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
Que ocupas pa' 3D by @escusado
Search
gdljs
August 22, 2016
Technology
0
47
Que ocupas pa' 3D by @escusado
Talk:
https://www.youtube.com/watch?v=QCjWmLgbLDQ
gdljs
August 22, 2016
Tweet
Share
More Decks by gdljs
See All by gdljs
Construyendo la mejor experiencia de pagos en línea by @IvanChukitow
gdljs
0
67
Testabilidad en Javascript by @codingpains
gdljs
0
29
Desarrollo de aplicaciones con react native by @charliesbox
gdljs
0
120
¿Debería usar la librería de moda en mi proyecto? by @siedrix
gdljs
0
120
Agile Gamification by @chukitow
gdljs
0
42
Por qué hicimos nuestro propio NodeJS framework by @sgarza
gdljs
0
29
¿Cómo empezar a programar? by @amicavi
gdljs
0
84
Concurrencia y Paralelismo en Javascript by @eatcodetravel
gdljs
0
490
Caldo de Kafka para Node by @albertain
gdljs
0
70
Other Decks in Technology
See All in Technology
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
310
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
810
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
1
150
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
110
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.8k
On Your Data を超えていく!
hirotomotaguchi
2
700
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
400
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
開発パフォーマンスを最大化するための開発体制
ham0215
2
460
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Debugging Ruby Performance
tmm1
70
11k
What's new in Ruby 2.0
geeforr
337
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Side Projects
sachag
451
41k
A designer walks into a library…
pauljervisheath
200
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
How to Ace a Technical Interview
jacobian
272
22k
Transcript
None
Que ocupas pa 3D @escusado github.com/escusado
None
Cómo entendí el API getContext("webgl") para pintar gráficos acelerados por
la tarjeta de video en un Browser que soporte WebGL usando THREE.js … ah y el pedo con los tuts online @escusado github.com/escusado
Webgl is complex and different
One file tuts
None
None
None
None
None
jQuery Common, confortable js/web tools
THREE.js Common, confortable js/3D app tools
None
koa npm deps render index serve files & deps
None
None
None
None
.add(3D objects) “See” the scene Rasterize camera Rendereable DOM
None
requestAnimationFrame
None
None
None
None
None
None
None
None
Singleton Dispatcher?
None
None
DEMOOOOO github.com/escusado/3d
Stuff THREE js 3D space has its own units Lights
(or not, but helps thinking) Orthographic & Perspective cameras Three.js patterns should be optimization focused Patterns will be different (github.com/rbdr/serpentity) Freestyle hierarchy Physics, Shaders, External assets, Interaction, VR...
http://threejs.org/examples/webgl_geometry_cub e.html (FOV, mesh) https://aerotwist.com/tutorials/getting-started-with -three-js/
Thanks! github.com/escusado @escusado fpv.toily.mx