WebGL 総本山
原理を正しく理解してさらなる高みを目指す WebGL スクール第１３期の募集を開始します！（リモート開催） WebGL GLSL programming school event 運営お知らせ 2026 年 5 月開講 本日より WebGL スクール第１３期の募集を開始します。 感染症の影響、遠隔地からの参加などの利便性を踏まえ、ここ数年は講義をすべてリモートでの配信方式で行っています。（配信プラットフォームには Vimeo を利用） リモートでの講義を始めた当初は不安もありましたが「配信... クリエイティブエージェンシー Leeroy が贈るモントリオールを舞台とした実験作品が味わい深い WebGL GLSL demo イラスト風のテイストが素晴らしい 今回ご紹介するのは、Leeroy というエージェンシーが公開している実験作です。 特になにかの販促やプロモーションがあるわけではなく、
WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA
2023年5月にリリースされたChrome・Edge 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU（ウェブジーピーユー）がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でした。 ChromeとEdge限定ではありますが、WebGPUが一般ユーザーの環境でも動作できるようになったいま、オリジナルのデモを交えてあらためてWebGPUを紹介します。 この記事で紹介すること WebGPUがChrome・Edge 113で標準で利用可能になった WebGPUはモダンな3D APIに直接アクセスすることで、WebGLより高い性能が得られる WebGPUだとドローコールの最適化をしなくても十分に高速 WebGPUはコ
cables
Cables is a tool for creating beautiful interactive content.With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments. You are provided with a set of operators, such as mathematical functions, shapes, materials and post processing effects. Connect these to each other with virtual cables to create the experience you have in mind. Easily export yo
three.jsで流体シミュレーション(stable fluids) | mofu
We create beautiful expressions through programming and deliver the best possible experiences.
Inside REACT-VFX
ぼく「ポートフォリオ作りたいな〜」ぼく「参考にAWWWARDSでもみるか」僕はChromeにPanda入れてますこの画像エフェクトかっこいいな〜 かっけ〜！ 僕のVEDAJSで作れるかな？WebGL(GLSL)でアニメーションを描画するライブラリ要素の数だけcanvasを生成する必要があり、非効率WebGL contextの数に上限アリ(ソース)Spector.jsで見てみるBabylonJSチームによるWebGLデバッグツールどういう順番で描画命令とかテクスチャを見れるDevtools見た結果ページ全体にcanvas一枚画像ごとに描画されてるThree.jsの場合、画像毎にシーン作って viewport設定して描画すれば良さそう参考: Three.jsのexample できましたreact-vfxの仕組み登場人物VFXPlayer: シーン管理、描画VFXProvider: canvas
Spector.js - Chrome Web Store
Ratings are updated daily and may not reflect the most recent reviews. Explore and Troubleshoot your WebGL scenes easily. Spector is a tool aim to WebGl developers willing to know what happens on their context. It enables capturing all the available information from a frame. You will be empowered to look at your entire commands list with their associated visual states and context information. You
●●WebGL(PIXI.js + glsl)と物理演算(matter.js)で可愛い絵本風タピオカ作ったので解説●● - Qiita
こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます（スマホ未対応）： https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ
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を勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
Webでどこまで遊べるか試してみた - Qiita
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
Kitasenju Design / 北千住デザイン
インタラクティブメディア上で実験と実装。広告からデジタルアートまで。 Experimentation実験 and implementation実装 of visual視覚 expression表現 on interactive双方向 media媒体.
WebGL事例とアニメーションのアイデア - Google スライド
WebGL事例とアニメーションのアイデア 2016.10.9 DevFest Tokyo 2016
毎日GLSLでアニメーションを作ってる - マルシテイア
最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。 そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。 先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA— BRDG / VRDG (@toky
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next2D | Rendering Engine, Animation Tool, Underlying Framework.
Condition
GitHub - fms-cat/condition: A 64KB WebGL Intro. Appeared in Revision 2021, PC 64KB Intro Compo
音の出るCPUを作っている途中
REACT-VFX - WebGL effects for React! #REACTVFX
GitHub - pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js
WebGLを使ったマンガビューワを作っている - daiiz
