Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
WebGLであそぼう! Three.jsについて
Search
お茶
June 17, 2024
33
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WebGLであそぼう! Three.jsについて
お茶
June 17, 2024
More Decks by お茶
See All by お茶
DRY原則より「SOLID原則のS」
okamonster
0
50
Denoのしょぼい使い方
okamonster
0
24
突然生えてきたシェーダー言語TSL
okamonster
0
20
なぜモダンな言語を学ぶか[2025/05/16 Progate Bar登壇]
okamonster
0
110
クレカなしでもできる!Cloudflareではじめる金欠個人開発
okamonster
0
570
Featured
See All Featured
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
280
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
540
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
1
280
The Curious Case for Waylosing
cassininazir
1
570
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
430
Visualization
eitanlees
153
17k
A Tale of Four Properties
chriscoyier
163
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
Being A Developer After 40
akosma
92
590k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
520
Thoughts on Productivity
jonyablonski
76
5.4k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
330
Transcript
WebGLであそぼう! Three.jsについて
WebGLってなんなん OpenGLのWeb版 3DグラフィックスがWeb上で動かせる ざっくり言うと... 3DコンテンツがWeb上で作れる!!!
GLSL \は?/ WebGLを記述する言語 C言語ベース GPUを直接操作 物体の頂点や色の計算を する やたら複雑!! やたらムズイ!!
Three.js GLSLの基本的な操作を簡単 に! JavaScriptで書ける! 人類にやさしい!!! 直感的にDOM操作の感覚で書ける!
React-Three-Fiber React用Three.js コンポーネントで3Dオブジェクトを操作できる https://docs.pmnd.rs/react-three-fiber/getting- started/introduction
WebXR Device API VR,ARコンテンツをブラウザで動かす技術 HMDなどの操作イベントをJSに割り当てられる 首の動きとかコントローラーの操作も JSで書ける!
WebXR Device API 活用事例 3~4年くらい前に作ったやつ 高専の卒研の残骸 Web上でのオープンキャンパスを 目標に作った めっちゃ作り直したい https://hogehoge-
systemv2.web.app/
WebXR Device API 活用事例 SOUGEN Ustubo社 Webファーストメタバース プロジェクト すごい(語彙力) https://sougen.co/
なぜWebにこだわるのか URL一本、QRひとつでドヤ顔できる ブラウザで動くので特別なハードやソフトウェアがいらな い AppleStoreから文句を言われたりアプリを消されたりしな い Webページのコンテンツをそのまま3Dコンテンツに落とし 込める
お茶の新作に乞うご期待!! これから GLSLを勉強中です。 Three.jsではGLSLを自分で書いてカスタムできる!