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
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
460
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.1k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
2
6.3k
How GitHub (no longer) Works
holman
316
150k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How Software Deployment tools have changed in the past 20 years
geshan
2
35k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
220
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
730
AI Search: Where Are We & What Can We Do About It?
aleyda
0
8.1k
Product Roadmaps are Hard
iamctodd
55
13k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
570
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を自分で書いてカスタムできる!