Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[Martin Splitt] Practical WebGL with Three.js
Search
Google Developers Group Lviv
September 10, 2016
Technology
1
850
[Martin Splitt] Practical WebGL with Three.js
Presentation from GDG DevFest Ukraine 2016.
Learn more at:
https://devfest.gdg.org.ua
Google Developers Group Lviv
September 10, 2016
Tweet
Share
More Decks by Google Developers Group Lviv
See All by Google Developers Group Lviv
[Elad Bezalel] Angular Material CDK
gdglviv
0
150
[Zac Sweers] Breaking the Android ClassLoader
gdglviv
0
210
[Daniel Galpin] Adventures in Navigation
gdglviv
1
330
[Rebecca Franks] Practical Image Processing in Android
gdglviv
0
300
[Mateusz Herych] Architecture for App Bundles
gdglviv
1
120
[Andrea Falcone] Iterative Mobile Development
gdglviv
1
76
[Yonatan Levin] Keynote: The world of change and your significance in it
gdglviv
0
120
[Denys Tkalich] Using BigQuery as a data warehouse in B2B startup
gdglviv
0
80
[Mete Atamel] Google Assistant powered by Containers, Machine Learning and .NET on Google Cloud
gdglviv
0
130
Other Decks in Technology
See All in Technology
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
1
430
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
28k
メールサーバ管理者のみ知る話
hinono
1
110
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
340
ジョブマッチングサービスにおける相互推薦システムの応用事例と課題
hakubishin3
3
640
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
120
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
2.6k
3次元点群データ「VIRTUAL SHIZUOKA』のオープンデータ化による恩恵と協働の未来/FOSS4G Japan 2024
kazz24s
0
130
Railsで4GBのデカ動画ファイルのアップロードと配信、どう実現する?
asflash8
1
240
徹底比較!HA Kubernetes ClusterにおけるControl Plane LoadBalancerの選択肢
logica0419
2
150
DatabricksにおけるLLMOpsのベストプラクティス
taka_aki
4
1.6k
ライブラリでしかお目にかかれない珍しい実装
mikanichinose
2
340
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Designing Experiences People Love
moore
138
23k
Teambox: Starting and Learning
jrom
133
8.8k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
How to Ace a Technical Interview
jacobian
276
23k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Transcript
@g33konaut with Three.js Practical WebGL
@g33konaut Hi, I’m Martin, Senior Dev @ Archilogic @g33konaut on
Twitter
@g33konaut This is what we do
@g33konaut The next 30ish minutes... Why should you be excited?
How do you create 3D experiences? What is next?
@g33konaut Why?
@g33konaut Use cases • Maps / Navigation • Education /
Research • Healthcare / Therapy • Entertainment / Journalism • Marketing
@g33konaut So, what’s it look like?
@g33konaut It’s well-ish-supported
@g33konaut Is WebGL fast?
@g33konaut
@g33konaut How?
@g33konaut
@g33konaut So how do we get 3D graphics? 1. We
need points (“vertices”) 2. We need to connect them (“faces”) 3. We need to define a. What colour? b. What texture? c. Shiny / Transparent / …? “Material”
@g33konaut The WebGL pipeline
@g33konaut Three.js • threejs.org • Lots of plugins, 3D format
importers, ... • Basic principle: ◦ “Movie shooting”: Camera, Scene, Meshes • Let’s go: avgp.github.io/h2g2three
@g33konaut The WebGL pipeline Three.js covers this
@g33konaut Setup var renderer = new THREE.WebGLRenderer(), scene = new
THREE.Scene(), camera = new THREE.PerspectiveCamera( ...)
@g33konaut Getting something on stage var box = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100), new THREE.MeshBasicMaterial() ) scene.add(box)
@g33konaut Rendering it out (function render() { requestAnimationFrame( render )
renderer.render( scene, camera ) })()
@g33konaut Working with 3D assets • Use the 3D editor
of your choice (e.g. Blender) • Export as a common 3D format (e.g. OBJ or glTF)
@g33konaut Tips & Tricks
@g33konaut The basic ones: Reducing vertices
@g33konaut The basic ones: Level of detail
@g33konaut The basic ones: Extensions
@g33konaut Using textures to cheat • Normal maps • Light
maps • Bump maps • Environment maps
@g33konaut Normal maps
@g33konaut Light maps
@g33konaut Light maps
@g33konaut Bump maps
@g33konaut Environment maps
@g33konaut Post processing
@g33konaut Tooling • Shader Editor: Chrome & Firefox (built in)
• WebGL Insight • WebGL Inspector
@g33konaut What’s next? • Explore WebVR • Check out what’s
coming in WebGL 2 • Get started!
@g33konaut Wrap up • 3D is great for spatial visualisation
• 3D can be used as an enhancement • Three.js gets you up & running quickly • Trick the eyes to get nicer visual quality
@g33konaut GO EXPLORE! • The harder way: learningwebgl.com • The
easier way: three.js.org/docs
@g33konaut Thank you! Questions? Slides: bit.ly/dfua-webgl Twitter: @g33konaut Web: spaces.archilogic.com
Feedback wanted ;-)