Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebGLであそぼう！ Three.jsについて

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for お茶 お茶
June 17, 2024
0
30

WebGLであそぼう！ Three.jsについて

Avatar for お茶

お茶

June 17, 2024
Tweet

More Decks by お茶

See All by お茶
DRY原則より「SOLID原則のS」
Avatar for お茶 okamonster
0
42
Denoのしょぼい使い方
Avatar for お茶 okamonster
0
11
突然生えてきたシェーダー言語TSL
Avatar for お茶 okamonster
0
10
なぜモダンな言語を学ぶか[2025/05/16 Progate Bar登壇]
Avatar for お茶 okamonster
0
100
クレカなしでもできる！Cloudflareではじめる金欠個人開発
Avatar for お茶 okamonster
0
480

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
99
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
460
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
260
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
170
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
130
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
470
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
280
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k

Transcript

  1. WebGLであそぼう！ Three.jsについて

  2. WebGLってなんなん OpenGLのWeb版 3DグラフィックスがWeb上で動かせる ざっくり言うと... 3DコンテンツがWeb上で作れる！！！

  3. GLSL ＼は？／ WebGLを記述する言語 C言語ベース GPUを直接操作 物体の頂点や色の計算を する やたら複雑！！ やたらムズイ！！

  4. Three.js GLSLの基本的な操作を簡単 に！ JavaScriptで書ける！ 人類にやさしい！！！ 直感的にDOM操作の感覚で書ける！

  5. React-Three-Fiber React用Three.js コンポーネントで3Dオブジェクトを操作できる https://docs.pmnd.rs/react-three-fiber/getting- started/introduction

  6. WebXR Device API VR,ARコンテンツをブラウザで動かす技術 HMDなどの操作イベントをJSに割り当てられる 首の動きとかコントローラーの操作も JSで書ける！

  7. WebXR Device API 活用事例 3~4年くらい前に作ったやつ 高専の卒研の残骸 Web上でのオープンキャンパスを 目標に作った めっちゃ作り直したい https://hogehoge-

    systemv2.web.app/

  8. WebXR Device API 活用事例 SOUGEN Ustubo社 Webファーストメタバース プロジェクト すごい(語彙力) https://sougen.co/

  9. なぜWebにこだわるのか URL一本、QRひとつでドヤ顔できる ブラウザで動くので特別なハードやソフトウェアがいらな い AppleStoreから文句を言われたりアプリを消されたりしな い Webページのコンテンツをそのまま3Dコンテンツに落とし 込める

  10. お茶の新作に乞うご期待！！ これから GLSLを勉強中です。 Three.jsではGLSLを自分で書いてカスタムできる！