Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Three.jsの新しいWebGPUレンダラーを使って3D表現。 JavaScriptでヌルヌルと動きます。

池田泰延

31,458 subscribers

138,582 views • 1 year ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

2 Comments

池田泰延1 year ago

Three.jsのWebGPUレンダラーの解説記事をICS MEDIAで書きました！ WebGL後継のWebGPUについて、将来性や導入方法をまとめています。JavaScriptで簡単に導入できます。

UserInterface1 year ago

Unlock $50 in Ad Credits! Join Star Membership for just $4 and boost your brand on Google, Facebook, Instagram, Twitter & YouTube! No contracts, no strings attached. Sign up now and amplify your reach:

Related Videos

JavaScriptでのクリエイティブコーディング、強い光のパーティクル表現。 Three.js(WebGPU版)を使い、新しい技術開拓としてHDR表示に対応。レンズフレアの輝きが違います。

JavaScriptでのクリエイティブコーディング、強い光のパーティクル表現。 Three.js(WebGPU版)を使い、新しい技術開拓としてHDR表示に対応。レンズフレアの輝きが違います。

池田泰延

162,323 views • 9 months ago

JavaScriptで炎上させてみました🔥 WebGPU（Three.js）で大量の火の玉を表現。ドローコールを最適化したので、軽やかに動作します。

JavaScriptで炎上させてみました🔥 WebGPU（Three.js）で大量の火の玉を表現。ドローコールを最適化したので、軽やかに動作します。

池田泰延

28,843 views • 2 months ago

Three.jsの新しい作例、すごく綺麗。東京の3Dタイル表示、雲がとくに素敵。 JavaScriptでここまでできるなんて。

Three.jsの新しい作例、すごく綺麗。東京の3Dタイル表示、雲がとくに素敵。 JavaScriptでここまでできるなんて。

池田泰延

203,720 views • 6 months ago

Three.js を使って作成したゲームが増えてきたので、まとめWebサイトを作りました。TRONのような妖しいレトロアーケード空間を表現。筐体は追加でき、今後の拡張性も考慮しています。Three.js

Three.js を使って作成したゲームが増えてきたので、まとめWebサイトを作りました。TRONのような妖しいレトロアーケード空間を表現。筐体は追加でき、今後の拡張性も考慮しています。Three.js

トミナガハルキ | フリーランス歴10年な人

23,055 views • 2 months ago

アニメ背景風3DCGの研究で作った、木の表現を3Dでできないか検討したときの成果ですノードを使いまくることにより、そこそこ良い感じの期の質感を表現することができましたイラスト描く時の手順に沿ってノードで作っています！ #blender #3DCG

アニメ背景風3DCGの研究で作った、木の表現を3Dでできないか検討したときの成果ですノードを使いまくることにより、そこそこ良い感じの期の質感を表現することができましたイラスト描く時の手順に沿ってノードで作っています！ #blender #3DCG

藤田将

811,116 views • 3 years ago

Three.jsを使ったレンズフレア表現。公式アドオンのLensflare.jsを使うと、良い感じに立体的な効果が得られます。 #JavaScript

Three.jsを使ったレンズフレア表現。公式アドオンのLensflare.jsを使うと、良い感じに立体的な効果が得られます。 #JavaScript

池田泰延

19,818 views • 1 year ago

WebGPU + JavaScriptだと500万パーティクルでもヌルヌル。かつてのFlashやCanvas 2Dで1〜10万パーティクルで挑戦していた時代とは隔世の感があります。ポイントは、WebGPUでコンピュートシェーダーが使えること。座標計算にGPUが使えます。

WebGPU + JavaScriptだと500万パーティクルでもヌルヌル。かつてのFlashやCanvas 2Dで1〜10万パーティクルで挑戦していた時代とは隔世の感があります。ポイントは、WebGPUでコンピュートシェーダーが使えること。座標計算にGPUが使えます。

池田泰延

193,395 views • 1 year ago

Three.js r185がリリース。🔥のデモが超リアルで、かっこいい！コンピュートシェーダーなりWebGPUならではの機能のオンパレード。ブラウザ表現の垣根を越えてきますね。

Three.js r185がリリース。🔥のデモが超リアルで、かっこいい！コンピュートシェーダーなりWebGPUならではの機能のオンパレード。ブラウザ表現の垣根を越えてきますね。

池田泰延

40,369 views • 4 months ago

1枚のイラストから、3Dになって動くところまで作ってみました✨ 使ったのはMeshy MeshyAI イラスト → 3Dモデル → リギング → アニメーションまで動画にまとめました👇 で、書き出したファイル（GLB）をClaudeとかChatGPTに渡したら、そのままゲームなどの素材として使えます！使い方とか実際の動きは動画で見てみて！

1枚のイラストから、3Dになって動くところまで作ってみました✨ 使ったのはMeshy MeshyAI イラスト → 3Dモデル → リギング → アニメーションまで動画にまとめました👇 で、書き出したファイル（GLB）をClaudeとかChatGPTに渡したら、そのままゲームなどの素材として使えます！使い方とか実際の動きは動画で見てみて！

かし子🍩

10,895 views • 4 months ago

巷で噂の新メッキ表現にチャレンジ！ PREZMOさんのキャンジェルEX とミラーパウダーの動画作ってみました！塗装不要でメッキ表現ができるのはお手軽で嬉しいですね～慣れはいりますが、使いこなせると表現の幅がグッと広がると思います！ #ミラー塗装 #PREZMO #ガンプラ

巷で噂の新メッキ表現にチャレンジ！ PREZMOさんのキャンジェルEX とミラーパウダーの動画作ってみました！塗装不要でメッキ表現ができるのはお手軽で嬉しいですね～慣れはいりますが、使いこなせると表現の幅がグッと広がると思います！ #ミラー塗装 #PREZMO #ガンプラ

イーサン（サボリーマンのガンプラ製作部）

22,209 views • 5 months ago

ClaudeCodeやCodexで使える表現のライブラリ「NANKA DEKIRU」を作りましたなんかできる映像表現やモーション、編集などをまとめてます使いたい表現を選んでお使いのエージェントにコピペする機能つき！公式サイトの「公開ツール」にあります！

ClaudeCodeやCodexで使える表現のライブラリ「NANKA DEKIRU」を作りましたなんかできる映像表現やモーション、編集などをまとめてます使いたい表現を選んでお使いのエージェントにコピペする機能つき！公式サイトの「公開ツール」にあります！

絵空事テレビ / AIカワウソ

80,674 views • 28 days ago

【Viduのリファレンス機能がヤバい！】これは現在ベータテスト中のVidu 2.0で作成した動画ですいままでAI動画と言えば、正面を向いてニコニコしているだけでした。それは一つの画面に2人出そうとすると混ざってしまうからです。しかし、Viduのリファレンス機能を使えば2人のキャラを一貫性を保持したまま動画にすることができます。キャラクター同士の掛け合いを表現することでAI動画はまた新しい表現が可能になります ※リプ欄に一部のプロンプトを掲載します #ViduAI @Viduforhuman

【Viduのリファレンス機能がヤバい！】これは現在ベータテスト中のVidu 2.0で作成した動画ですいままでAI動画と言えば、正面を向いてニコニコしているだけでした。それは一つの画面に2人出そうとすると混ざってしまうからです。しかし、Viduのリファレンス機能を使えば2人のキャラを一貫性を保持したまま動画にすることができます。キャラクター同士の掛け合いを表現することでAI動画はまた新しい表現が可能になります ※リプ欄に一部のプロンプトを掲載します #ViduAI @Viduforhuman

とうや

46,238 views • 1 year ago

クリスタの3Dには反射光を表現できる［平行光2］という設定がありますスパナマークをクリックしオブジェクトリストで選択して表示すると、位置を変えたり色を変更したりできます 3Dが暗いとき、ちょっとリアルな陰影になります

クリスタの3Dには反射光を表現できる［平行光2］という設定がありますスパナマークをクリックしオブジェクトリストで選択して表示すると、位置を変えたり色を変更したりできます 3Dが暗いとき、ちょっとリアルな陰影になります

Sweets中山＠背景美塾

89,264 views • 6 months ago

板ポリで簡単に水を表現できるシェーダーを作りました！色や波の動き、透明度などを調整可能です使い方の動画など作って、フリー素材として近日公開予定です #blender #3DCG

板ポリで簡単に水を表現できるシェーダーを作りました！色や波の動き、透明度などを調整可能です使い方の動画など作って、フリー素材として近日公開予定です #blender #3DCG

藤田将

427,809 views • 3 years ago

／【第2弾】 📢柊さんたMMDモーション配布中＼新しいモーションを追加しました！私の動きと表情をMMD用に調整しているため、ダウンロードしてすぐに使用できる状態になっています✨ 現在6件あって、今後も同じページに追加していきます！【ダウンロードページはツリーをチェック！】

／【第2弾】 📢柊さんたMMDモーション配布中＼新しいモーションを追加しました！私の動きと表情をMMD用に調整しているため、ダウンロードしてすぐに使用できる状態になっています✨ 現在6件あって、今後も同じページに追加していきます！【ダウンロードページはツリーをチェック！】

柊さんた🎅🏻🏮バレエ歴20年Vtuber

30,990 views • 8 months ago

#AIアニメ #seedance2 AIとの対話で能動的に動画制作を進めてくれるTopviewの新機能「Canvas」を使って、天地が逆さまとなって空へと落ちていく世界のアニメを作りました天地がひっくり返るような複雑な動きは破綻するんじゃないかと思いましたがここまで表現できるとは😲

#AIアニメ #seedance2 AIとの対話で能動的に動画制作を進めてくれるTopviewの新機能「Canvas」を使って、天地が逆さまとなって空へと落ちていく世界のアニメを作りました天地がひっくり返るような複雑な動きは破綻するんじゃないかと思いましたがここまで表現できるとは😲

ゟ(yori)

74,035 views • 4 months ago

VRC+の新機能のカメラドリーを使用して動画を作ってみました！使いやすいので皆さんもいっぱい動画作りましょ！！ #VRChat

VRC+の新機能のカメラドリーを使用して動画を作ってみました！使いやすいので皆さんもいっぱい動画作りましょ！！ #VRChat

aremik.

183,249 views • 1 year ago

デモを作るのに気合を入れすぎてしまってかなり複雑になってしまい、すべてを細かく解説することはできないんですが、実現するための道具と考え方をしっかり解説したいと思います。デモはこちら↓ アニメーション、インタラクションともにCSSのみで動いています。JSは使っていません。

デモを作るのに気合を入れすぎてしまってかなり複雑になってしまい、すべてを細かく解説することはできないんですが、実現するための道具と考え方をしっかり解説したいと思います。デモはこちら↓ アニメーション、インタラクションともにCSSのみで動いています。JSは使っていません。

Takumi HASEGAWA (unshift Inc.)

78,220 views • 1 year ago