Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア
amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡𝙍𝙀𝘼𝘾𝙏-𝙑𝙁𝙓 released！⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
TensorFlow.jsがChromeでWebWorker上でもWebGL backendで動く - すぎゃーんメモ
tensorflow.js は処理の重さ的に worker で動かしたいのだがまだ WebWorker で動かすと cpu backend に fallback してしまうので、この issue ずっとみてる https://t.co/KYGEQSFwq5— 無糖派層 (@mizchi) July 30, 2019 僕も以前にWebWorker上でTensorFlow.jsを使おうとして WebGL backendで動かないことに気付いて諦めていたのだった。 memo.sugyan.com …と思っていたのだけど、どうも先月くらいの @tensorflow/tfjs@1.2.2 あたりから ChromeではOffscreenCanvasというのを使ってWebWorker上でもWebGL backendで動くようになったようだ。 試してみたところでは 動くのはChromeのみで、Safari
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
AtomでVJできるパッケージを作った #GLSL #livecoding - マルシテイア
GLSLでVJやライブコーディングができるAtomパッケージを作りました。 その名も VEDA !!! atom.io この記事では、VEDAの使い方や機能を説明します。 目次 このパッケージでできること 機能一覧 インストール glslangValidatorのインストール VEDA本体のインストール 使い方 今後の開発 このパッケージでできること AtomでこんなVJができちゃいます！ My first VJ live coding pic.twitter.com/j66MFGZfFO— amagi (@amagitakayosi) 2017年7月31日 この動画は、先日僕が VEDA を使ってVJした時のものです。 動画素材や画像素材をロードしつつ、GLSLで加工したり動きを付けたりしています。 動画素材をロードしてMIDIコントローラーで操作きるので、コードをほぼ書かずにVJするこ
Fast Neural Style | TensorFire
Demo is Shy 🙃 TensorFire is a library that runs neural networks in the browser. TensorFire mobile is not quite ready for prime-time, but here's a video of how this demo would look: If possible please open this page in a desktop browser! This is a demo app showing off TensorFire's ability to run the style-transfer neural network in your browser as fast as CPU TensorFlow on a desktop.
3D Maps and Indoor Mapping Platform
Your World, Reimagined A dynamic 3D mapping platform for smart cities and buildings, gaming, AR/VR experiences, and more. Get started for free Build interactive 3d maps We provide all the tools you’ll need to quickly develop or embed an engaging, high-performance, custom mapping experience with our cross-platform SDK and APIs. Anyone can create and publish rich, dynamic 3D maps: no coding required
Next-generation 3D Graphics on the Web
Apple’s WebKit team today proposed a new Community Group at the W3C to discuss the future of 3D graphics on the Web, and to develop a standard API that exposes modern GPU features including low-level graphics and general purpose computation. W3C Community Groups allow all to freely participate, and we invite browser engineers, GPU hardware vendors, software developers and the Web community to join
GLSL作曲入門 - Qiita
自己紹介 名前: notargs 作ったもの LGTM Shaders CRT Shader 今回話す内容 ?「Game Jamでプログラマーのみのチームになってしまった…」 ?「Game Jamでプログラマーのみのチームになってしまった…」 ?「音楽素材どうしよう…」 ?「Game Jamでプログラマーのみのチームになってしまった…」 ?「音楽素材どうしよう…」 @「それ、シェーダーで作れますよ！！」 メリット プログラマーだけで楽曲制作が完結できる OpenGLとPCMにさえ対応していれば動くため、移植性が高い プロシージャルなので圧縮率が高い デメリット 高度な知識と実装力が必要 めんどくさい 手法 Transform Feedback 頂点シェーダでの計算結果を頂点バッファオブジェクトに再度格納する機能 CPUからアクセス可能 Transform Feedback 頂点シェーダでの
Keras Documentation
Keras is now available for JAX, TensorFlow, and PyTorch! Read the Keras 3.0 release announcement "Keras is one of the key building blocks in YouTube Discovery's new modeling infrastructure. It brings a clear, consistent API and a common way of expressing modeling ideas to 8 teams across the major surfaces of YouTube recommendations." Maciej Kula Staff Software Engineer - Google "Keras has tremendo
GitHub - omarhuseynov011/WebGL2Examples: WebGL 2 Examples written in TypeScript
Before you start.. Running live demos require a GPU and a browser that supports WebGL 2 First click here to check if your browser supports WebGL 2 If your browser doesn't support WebGL 2, you can run these demos using supported browsers listed below: Chrome Canary Builds for Windows and Mac Chrome Dev Builds for Linux Firefox Nightly Builds for Windows, Mac and Linux In order to run the demos on y
プランニングや映像表現だけでなく WebGL 実装も行える日本人プログラマのポートフォリオサイトがすごい！ - WebGL 総本山
多彩な才能が凝縮されたウェブサイト 今回ご紹介するのは、とある日本人プログラマのポートフォリオサイトです。 プログラマ、という書き方をしましたが、実際にはプランニングや映像表現など、ゲームやウェブの世界で幅広く活動されており、ポートフォリオサイト内には多数の作品が掲載されています。 WebGL の実装には、MS 謹製の WebGL ライブラリ Babylon.js を使ってらっしゃるようで、日本人の作品でこのライブラリを使ったものはとても貴重なので、そういった意味でも参考にできるポイントがたくさんあるサイトとなっています。 WebGL デモも多数公開中 今回のサイトはポートフォリオサイトなので、たくさんの作品が掲載されていてとても見応えがあります。 まずページを開いた直後から、サイトのトップで WebGL のデモが動いています。 人体のモデルを主軸にしたシンプルなデモですが、エフェクトの使
第1回目 WebGLの概念 - Qiita
講師紹介 講師：杉本 雅広さん wgld.org という WebGL 開発支援サイトの管理人 WebGL の普及と発展のために日夜活動中 授業の流れ 1.WebGLとは何か？、利用状況、将来性 2.WebGLのメリット・デメリット 3.開発環境構築など 1. WebGLとは何か？ ・GPU(Graphics Processing Unit)へ直接アクセスすることができるブラウザに組み込まれたAPI ・ブラウザ側の実装（ブラウザに組み込まれている）によるものなので、ブラウザによって性能や機能に差が生じる WebGLはOpenGLというネイティブで動作するグラフィックスAPIをブラウザから呼び出すためのパイプ役のような存在 ・javascriptからOpenGLへ直接アクセスすることはできないがWebGLが間に入ることでOpenGLを間接的に呼び出すことができる ・OpenGLはグラフィックス
第三回 WebGLスクール 「シェーダの基礎」 - Qiita
wgld.orgの管理人であるdoxasさん主催のWebGLスクールの第三回目です。 今回はGLSLによるシェーダの記述の基礎を固める内容でした。 前回のまとめ 第一回 WebGLスクール 「WebGLの概念」 第二回 WebGLスクール 「WebGLの手続きと手順」 シェーダのおさらい シェーダには 頂点シェーダ と フラグメントシェーダ がある 頂点シェーダはジオメトリパイプラインで使用される フラグメントシェーダはフラグメントパイプラインで使用される シェーダの流れ javascript ↓ 頂点シェーダ ↓ フラグメントシェーダ ↓ 描画 javascriptからデータ(頂点データと汎用データ)を頂点シェーダに送る。汎用データはjavascriptからフラグメントシェーダに直接送ることも可能。頂点シェーダで処理したデータをフラグメントシェーダに送る。フラグメントシェーダで処理をし、
第二回 WebGLスクール 「WebGLの手続きと手順」 - Qiita
wgld.orgの管理人であるdoxasさん主催のWebGLスクールの第二回目です。 今回はWebGLを使って描画されるまでの流れを、実際にコードを見ながら解説してもらいました。 描画するまでに実にたくさんの処理が行われている。正直ほとんど理解できていないかもしれない・・・ 前回のまとめ 第一回 WebGLスクール 「WebGLの概念」 初期化から描画までのおおまかな流れ WebGLで画面に描画するまでの流れは以下の様になります。 ※順番は多少前後しても問題ないそう。 1,シェーダーの生成とリンク 2,頂点データの準備 3,行列の生成とリンク 4,シェーダへのデータ転送 5,全体設定とドローコール シェーダーの生成とリンク まずは、WebGLの2種類のシェーダ 頂点シェーダ と フラグメントシェーダ のソースコードを記述する シェーダはJavaScriptで文字列データとして扱う scri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gmork.in
Examples
AlteredQualia
zastava fica
GitHub - gre/gl-react-v2: DEPRECATED =>
Crosswalk - Crosswalk 23 to be the last Crosswalk release
