Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
thrree.js入門
kaidouji85
June 16, 2017
Technology
0
860
thrree.js入門
kaidouji85
June 16, 2017
Tweet
Share
More Decks by kaidouji85
See All by kaidouji85
JSだけでバックエンド環境構築、IaC、自動デプロイまでやってみた話
kaidouji85
0
55
サーバレスでネット対戦を作った話
kaidouji85
0
240
TWAでGoogle Playにアプリをリリースしてみた
kaidouji85
0
13
サーバレスでブルーグリーンデプロイしてみた
kaidouji85
0
33
three.jsにスプライトアニメーションが無いから自作した話
kaidouji85
0
44
iOS15にアップデートしたら、WebGLのゲームが動かなくなったので根性で何とかしてみた
kaidouji85
0
160
サードパーティクッキーが使えないとAuth0で毎回ログインしなきゃダメと思ってたけど誤解だった件
kaidouji85
1
390
PWAにIDaaS導入しようと思って検証したら、auth0が最強だと思った件
kaidouji85
0
150
AWS AppRunnerで対戦サーバを作って開発は捗ったけど本番運用は厳しいかもしれない件
kaidouji85
0
110
Other Decks in Technology
See All in Technology
今 SLI/SLO の監視をするなら Sloth が良さそうという話
shotakitazawa
1
270
Amplifyで Webアプリケーションの 堅固な土台をサクッと構築する方法
kawasakiteruo
0
210
Trusted Web プロトタイプ
finengine
0
320
疎ベクトル検索と密ベクトル検索: 第68回 Machine Learning 15minutes! Broadcast
keyakkie
1
250
DBRE 活動と information_schema
_awache
0
250
プロダクトマネージャーの役割と育成、評価
middleokada
15
9.9k
eBPF-based Container Networking
johnlin
2
1.1k
第22回 MLOps 勉強会:みてねのMLOps事情
tonouchi510
0
110
20220803投資先CXO候補者向け 会社紹介資料_合同会社BLUEPRINT
hik
0
240
20220731 如何跟隨開源技術保持你的職涯發展
pichuang
0
120
最先端の生成AIから考える、ビジネスにおける10年後のパラダイムシフト
sbtechnight
1
310
データ分析のためのAWS Well-Architected -Data Analytics Lens-
maru1981
0
220
Featured
See All Featured
Faster Mobile Websites
deanohume
294
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
In The Pink: A Labor of Love
frogandcode
131
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
How GitHub (no longer) Works
holman
297
140k
The Language of Interfaces
destraynor
148
21k
A Tale of Four Properties
chriscoyier
149
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
15k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Transcript
UISFFKTೖ ϓϩάϥϛϯάੜ์ૹษڧձୈճ !αΠϘζגࣜձࣾদࢁΦϑΟε ɹ༎հ
ࣗݾհ ɹ༎հ ϓϩάϥϚʔͬͯ·͢ +4͕େ͖Ͱ͢ ϓϩੜͪΌΜՄѪ͍ʂʂ
দࢁͱ͍͑ळࢁܑఋ
ळࢁܑఋͱ͍͑ઓ؋ࡾּ
ࡾּ UISFF
ͱ͍͏༁Ͱ UISFFKTͷΛ͠·͢
ΞδΣϯμ UISFFKTΛ͏ཧ༝ UISFFKTೖ %ϓϩάϥϛϯάUJQT ·ͱΊ
ΞδΣϯμ UISFFKTΛ͏ཧ༝ UISFFKTೖ %ϓϩάϥϛϯάUJQT ·ͱΊ
UISFFKTͱ +BWB4DSJQUͰ%͕؆୯ʹ͑ΔΑ͏ʹͳΔ ϥΠϒϥϦͰ͢ +BWB4DSJQUʹ8FC(-ͱ͍͏ඪ४Ͱ %Λѻ͏ػೳ͕͋Γ·͢ 8FC(-Λ͏ͷେมͰ͢ ˢԿނ͔ͱݴ͏ͱɺͦΕʜʜ
8FC(-㱠+BWB4DSJQU
γΣʔμʔݴޠ 8FH(-Λ͏ʹ+BWB4DSJQUͱશʹผͷ γΣʔμʔݴޠΛֶͿඞཁ͕͋Γ·͢ +4෦ߦྻܭࢉ͕ଟͯ͘େมͰ͢ attribute vec3 aVertexPosition; uniform mat4 uMVMatrix;
uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }
UISFFKTͰָͯ͠ 8FC(-Λ͍·͠ΐ͏
ΞδΣϯμ UISFFKTΛ͏ཧ༝ UISFFKTೖ %ϓϩάϥϛϯάUJQT ·ͱΊ
UISFFKTͰIFMMPXPSME ཱํମΛදࣔ͢ΔϓϩάϥϜΛ࡞Γ·͢ ιʔεͪ͜Βʹ͋Γ·͢ IUUQTHJUIVCDPNLBJEPVKJIFMMPUISFFKT
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
Կ͜Εɺ ҙຯ͔Μͳ͍
େৎɺ %ʹऀ͕ଟ͍ͷͰ ͘͠ݟ͑Δ͚ͩͰ͢
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
3FOEFS ϒϥβʹ%ը໘Λඳը͢Δͷ 3FOEFSҎԼύϥϝʔλͰ%ඳը͠·͢ 4DFOF %ମ͕ஔ͔Ε͍ͯΔੈք $BNFSB 3FOEFSΛࣸਅʹྫ͑Δͱ͔Γ͍͢Ͱ͢
3FOEFS 4DFOF $BNFSB
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
$BNFSB %ۭؒΛࡱӨ͢ΔΧϝϥͰ͢ ݱ࣮ͷΧϝϥಉ༷ɺ༻్ʹԠͯ͡৭ʑͳͷ͕ ͋Γ·͢ αϯϓϧίʔυͰ1FSTQFDUJWF$BNFSB ಁࢹӨΧϝϥ Λ͍ͬͯ·͢ IUUQTXXXBUXJLJKQUISFFKTQBHFT IUNM
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
4DFOF %ϞσϧɺޫݯͳͲΛஔ͢ΔͷͰ͢ %ۭؒͷੈքͦͷͷͰ͢
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
.FTI %ۭؒʹஔ͢ΔମͰ͢ ΩϟϥΫλʔɺՈɺϏϧͳͲͷഎܠͳͲ͕ .FTIʹ֘͠·͢
.FTI (FPNFUSZ .BUFSJBM ܗঢ় ɹ৭ ɹࡐ࣭ ɹςΫενϟ
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
(FPNFUSZ ମͷܗঢ়σʔλ αϯϓϧϓϩάϥϜͰཱํମΛ͍ͬͯΔ ଞʹฏ໘ɺٿମͳͲجຊతͳܗ͕ ༻ҙ͞Ε͍ͯΔ
UISFFKTͷओͳऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
.BUFSJBM ମͷࡐ࣭ΛܾΊΔͷ ৭ɺޫͷࣹ۩߹ɺෆಁ໌ͳͲΛઃఆͰ͖Δ ςΫενϟͷઃఆΛ͢Δͷ͜͜
͏Ұαϯϓϧίʔυ ΛݟͯΈ·͠ΐ͏
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); UISFFKTͷऀΛ ॳظԽͯ͠Δ͚ͩ
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ͋ͱ͜ͷ෦͕ Α͔͘Βͳ͍
͍͜͜ΘΏΔ ήʔϜϧʔϓͰ͢
ήʔϜϧʔϓͱ ήʔϜը໘ΛΞχϝʔγϣϯͤ͞ΔΈ ήʔϜը໘ύϥύϥອըͷཁྖͰɺ ΞχϝʔγϣϯΛ͍ͯ͠Δ ύϥύϥອըΛϓϩάϥϜͰ࠶ݱ͢Δͱɺ ແݶϧʔϓʹͳΔ
SFRVFTU"OJNBUJPO'SBNF ϒϥβͰήʔϜϧʔϓΛ࣮ݱ͢Δͱ͖ʹ ͏ؔ ಈ͖ͱͯ͠ɺϒϥβը໘࠶ඳըલʹ ొͨ͠ίʔϧόοΫؔΛݺͿͱݴ͏ͷ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC "1*8JOEPXSFRVFTU"OJNBUJPO'SBNF
ήʔϜϧʔϓ࣮ݱํ๏ var render = function () { requestAnimationFrame( render );
cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ᶃSFOEFSΛ࣮ߦ ᶄSFRVFTU"OJNBUJPO'SBNFʹSFOEFSΛొ ᶅSFOEFS͕ؔऴྃ͢Δ ᶆϒϥβ࠶ඳըલʹSFOEFS͕ݺΕΔ ᶃʹΔ
ήʔϜϧʔϓͷॲཧ var render = function () { requestAnimationFrame( render );
cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ᶃ ᶄ ᶃཱํମͷYɺZ࣠ํͷճస֯Λ ͢Δ ᶄ%ը໘Λඳը͢Δ
UISFFKTجຊ·ͱΊ %ੈքͷجຊͱͳΔγʔϯɺͦͷੈքΛݟΔ ͨΊͷΧϝϥ ମͰ͋Δ.FTIɺܗঢ়σʔλ(FPNFUSZɺ ࡐ࣭σʔλ.BUFSJBM͔ΒΔ ήʔϜϧʔϓͱݺΕΔύϥύϥອըͷख๏Ͱɺ ήʔϜը໘͕ಈ͍͍ͯΔΑ͏ʹݟ͑Δ
৭ʑग़͖ͯ·͕ͨ͠ɺ
.FTI 3FOEFS 4DFOF $BNFSB (FPNFUSZ .BUFSJBM ·ͣओͳऀΛ ཧղ͠·͠ΐ͏
ΞδΣϯμ UISFFKTΛ͏ཧ༝ UISFFKTೖ %ϓϩάϥϛϯάUJQT ·ͱΊ
͡Ίʹ ͔͜͜ΒUJQTूʹͳΓ·͢ ൃදऀ͕ࣗ࡞ήʔϜΛ࡞ΔࡍʹಘͨݟΛ ڞ༗͠·͢ ࠷ऴతʹ͜Ε͘Β͍࡞ΕΔΑ͏ʹͳΓ·͢ IUUQTHPPHMEOZ23#
࡞ྫ खલຯͰ͕͢ʣ
࡞ྫͷίʔυ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTDPNNJUTNBTUFS
UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ εΧΠϘοΫεΛ࣮ݱ͢Δ ࣗ࡞ϞσϧΛಡΈࠐΉ
UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ εΧΠϘοΫεΛ࣮ݱ͢Δ ࣗ࡞ϞσϧΛಡΈࠐΉ
ɹϏϧϘʔυͱ ৗʹΧϝϥͷํʹදࣔ͞ΕΔɺ ൘ঢ়ͷΦϒδΣΫτ %ۭؒʹ࣍ݩը૾Λද͍ࣔͤͨ࣌͞ʹɺ Α͘ΘΕ͍ͯ·͢ ࡞ྫͩͱɺϩϘοτɺ͕ϏϧϘʔυͰ͢ ࣮ࡏͷήʔϜͩͱɺϖʔύʔϚ˓Φ31(ɺ εύ˓ϘͳͲ
ϏϧϘʔυ࣮ํ๏ ϏϧϘʔυͷRVPUBOJPO ճస֯ ʹɺ ΧϝϥͷRVPUBOJPOΛηοτ͠·͠ΐ͏ ˢ্هॲཧΛΔͷɺήʔϜϧʔϓͷதͰ͢ mesh.quaternion.copy(camera.quaternion);
ͬͱৄ͍͠ίʔυྫ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTCMPCNBTUFSTSDTUBHFTDIPPMTDIPPM CVJMEUSFFCJMMCPBSEKT
UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ εΧΠϘοΫεΛ࣮ݱ͢Δ ࣗ࡞ϞσϧΛಡΈࠐΉ
εΧΠϘοΫεͱ ശͷଆʹԕܠͷը૾ΛషΓ͚ͯɺ ͞ແݶͷੈքʹ͍ΔΑ͏ʹࡨ֮ͤ͞Δख๏ ࡞ྫͰۭɺ໘ͳͲʹεΧΠϘοΫεΛ༻
εΧΠϘοΫε࡞ํ๏ ԕܠը૾ΛࣗͰඳ͘ͷେมͳͷͰɺ 5FSSBHFOΛ͍·͠ΐ͏ 5FSSBHFOͱ%Ͱ৭ʑͳܗΛ࡞Δ͜ͱ͕ Ͱ͖ΔιϑτͰ͢ ํ ্Լͷܭຕͷը૾Λ༻ҙ͠·͠ΐ͏
εΧΠϘοΫεը૾ྫ
۩ମతͳखॱ ʮ5FSBHHFOɺεΧΠϘοΫεʯͰάάΔͱ ݁ߏώοτ͠·͢ ݸਓతʹɺ͜ͷϒϩά͕Φεεϝ IUUQEIBUFOBOFKQ OBLBNVSB
UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ εΧΠϘοΫεΛ࣮ݱ͢Δ ࣗ࡞ϞσϧΛಡΈࠐΉ
UISFFKTͷϞσϧϑΝΠϧ UISFFKTઐ༻ͷKTPOϑΝΠϧ͕͋Γ·͢ ༗໊ͳ%ιϑτʹݢฒΈUISFFKTઐ༻KTPOΛ ॻ͖ग़͢ϓϥάΠϯ͕͋Γ·͢ .FUBTFRVPJBɺ#MFOEFSΛࢼ͠·͕ͨ͠ɺ ͲͪΒ҆ఆ͠·ͤΜͰͨ͠
.FUBTFRVPJB ݴΘͣͱΕͨࠃ࢈ϞσϦϯάπʔϧ ඪ४ͰUISFFKTઐ༻KTPOͷग़ྗʹରԠ ςΫενϟ্͕Լٯ͞·ʹදࣔ͞ΕΔҎ֎ɺ ಛʹ͋Γ·ͤΜͰͨ͠
.FUBTFRVPJB UISFFKT ࣮ࡍͷঢ়
ෆ۩߹ͷճආࡦ ը૾ϑΝΠϧΛ্Լɺࠨӈٯʹ͢Ε ͳ͘දࣔͰ͖·͢ .FUBTFRVPJBެࣜ##4Ͱ࣭ͨ͠Βɺ ˢͷΑ͏ͳճΛ͖·ͨ͠
#MFOEFS ࠃࡍతʹ༗໊ͳ%ιϑτ ϑϦʔͳͷʹػೳ͕ϋΠΤϯυͳιϑτʹ ඖఢ͢Δ UISFFKTઐ༻KTPOΛॻ͖ग़͢ϓϥάΠϯ͕͋Δ ͕ɺͦͦϞσϧ͕දࣔ͞Εͳ͔ͬͨ
࠷ޙʹ͓·͚Ͱ
1SPKFDU%0("
1SPKFDU%PHBͱ ੵΈײ֮Ͱ%Ϟσϧ͕࡞ΕΔιϑτ ࠷ॳ͔Β༻ҙ͞Ε͍ͯΔύʔπ͕ଟͯ͘ɺ ૉਓͰͦΕͬΆ͍ͷ͕࡞ΕΔ ެࣜαΠτʹՃύʔπ͕͋ΔͷͰɺ શ෦ೖΕͨํ͕͍͍ ࡞ྫͷϩϘοτ͜ΕͰ࡞Γ·ͨ͠
None
None
None
ૉਓͰ ͜Ε͚ͩͷͷ͕ ࡞Ε·͢
%PHBҙ ͍ΘΏΔϩʔϙϦϞσϧͰͳ͍ͷͰɺ ήʔϜͰͦͷ··͏ʹෆ͖ ˢϏϧϘʔυͱͯ͠͏ͳΒશવ͋Γ ϝΧܥҎ֎গۤ͠ख ͔Δਓʹ%PHBͬͯΔͳͱҰൃͰόϨΔ
ΞδΣϯμ UISFFKTΛ͏ཧ༝ UISFFKTೖ %ϓϩάϥϛϯάUJQT ·ͱΊ
·ͱΊ UISFFKTͱ+BWB4DSJQUͰ؆୯ʹ%Λ ͏ͨΊͷϥΠϒϥϦͰ͋Δ UISFFKTʹऀ͕ͨ͘͞Μ͍ΔͷͰɺ ·ͣͦΕΒΛҰͭҰͭཧղ͠Α͏ .FUBTFRVPJBɺ5FSSBHFOɺ%PHBͳͲͰUISFFKT ༻ͷࣗ࡞ૉࡐΛͲΜͲΜ࡞Ζ͏
͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠