three.jsとRapierでレースゲームが3日でできた話

Transcript

1. UISFFKTͱ3BQJFSͰ
   ϨʔεήʔϜ͕
   ೔ͰͰ͖ͨ࿩ UISFFKTͱ3BQJFSͰ
   ϨʔεήʔϜ͕
   ೔ͰͰ͖ͨ࿩ 0DU
   TU
   4IJ[VPLBKT
   খࢁా
   ߊߒ
2. ձࣾͷ߹॓
   ձٞࣨ෇͖ͷԹઘ॓Ͱ
   ޷͖ͳ΋ͷΛ̏೔ؒͰ࡞Δ
4. ̏೔ؒͰϨʔεήʔϜΛ
   ࡞Γ·ͨ͠
5. https://63172814.rapier-tryout.pages.dev/ %FNP
6. גࣜձࣾϐΫηϧάϦου খࢁా
   ߊߒ !ZPNPUTV
7. ٕज़બఆ ྨࣅϥΠϒϥϦʔ
   ྨࣅϥΠϒϥϦʔ
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   BNNPKT
   DBOOPOKT ෺ཧγϛϡϨʔγϣϯ
   %දࣔ
   
8. w ୯ʹ࢖͍׳Ε͍ͯΔ
   w ͔ͳΓ׆ൃʹΞοϓσʔτ͞Ε͍ͯΔ
   w ਺ֶػೳ΋ɺͱͯ΋๛෋
   ʢϕΫλʔɺΫΥʔλχΦϯɺߦྻͳͲʣ
   ࢓ࣄͰ਺ֶػೳ͕ඞཁͳ৔߹͸ɺࢀߟʹ͍ͯ͠Δ ඳը
   UISFFKT
11. w BNNPKTͱDBOOPOKT͸ݹ͘
    ౰͔࣌Βػೳ௥Ճ͕ͳ͍ͷͰআ֎
    w )BWPL͸ʢ࢖ͬͯΈ͍͚ͨͲʣ #BCZMPOҎ֎͸
    ૬ੑѱͦ͏ͳͷͰݟૹΓ
    w 3BQJFS͸ൺֱత৽͠ΊͳͷͰɺ࠾༻ͯ͠Έͨ ෺ཧԋࢉ
    3BQJFS
12. https://rapier.rs/
13. w 3VTUͰॻ͔Εͨɺ෺ཧԋࢉϥΠϒϥϦʔ
    w 8BTNͷ+4൛΋͋Γɺܕ΋͍ͭͯ͘Δ
    w %෺ཧɺ%෺ཧͷ྆ํʹରԠ
    w جຊతͳ෺ཧԋࢉػೳ͸ଗ͍ͬͯΔ
    w ࣗಈंγϛϡϨʔγϣϯػೳ΋͋Γͦ͏ʜ ෺ཧԋࢉ
    3BQJFS
14. w ϓϦϛςΟϒਤܗʢ௚ํମ΍ٿମͳͲʣ Ҏ֎ʹ΋ɺ
    ޷͖ͳܗͷ߶ମΛ࡞ΕΔ
    w UISFFKTͷδΦϝτϦʔ͔Β௚઀
    3BQJFSͷ߶ମΛ࡞ΕΔ ෺ཧԋࢉ
    3BQJFS
15. ೚ҙϝογϡ͔Β߶ମΛ࡞Δ
16. terrainMesh.updateWorldMatrix( true, true ); terrainMesh.traverse( ( object ) => { if ( ! object.isMesh ) return; const geometry = object.geometry.clone(); geometry.applyMatrix4( object.matrix ); geometry.computeVertexNormals(); const vertices = new Float32Array( geometry.attributes.position.array ); const indices = new Uint32Array( geometry.index.array ); const groundColliderDesc = RAPIER.ColliderDesc.trimesh( new Float32Array(vertices), new Uint32Array(indices) ) .setActiveEvents( RAPIER.ActiveEvents.COLLISION_EVENTS ); const groundCollider = world.createCollider( groundColliderDesc ); } ); QPTJUJPO΍SPUBUJPO͕
    ద༻͞Ε͍ͯΔ৔߹͸
    ࣄલʹߦྻʹ൓ө͢Δ
    ʢ௨ৗ͸SFOEFS࣌ʹద༻͞ΕΔʣ
    
17. terrainMesh.updateWorldMatrix( true, true ); terrainMesh.traverse( ( object ) => { if ( ! object.isMesh ) return; const geometry = object.geometry.clone(); geometry.applyMatrix4( object.matrix ); geometry.computeVertexNormals(); const vertices = new Float32Array( geometry.attributes.position.array ); const indices = new Uint32Array( geometry.index.array ); const groundColliderDesc = RAPIER.ColliderDesc.trimesh( new Float32Array(vertices), new Uint32Array(indices) ) .setActiveEvents( RAPIER.ActiveEvents.COLLISION_EVENTS ); const groundCollider = world.createCollider( groundColliderDesc ); } ); .FTI಺ͷ
    શδΦϝτϦʔʹରͯ͠ʜ
18. terrainMesh.updateWorldMatrix( true, true ); terrainMesh.traverse( ( object ) => { if ( ! object.isMesh ) return; const geometry = object.geometry.clone(); geometry.applyMatrix4( object.matrix ); geometry.computeVertexNormals(); const vertices = new Float32Array( geometry.attributes.position.array ); const indices = new Uint32Array( geometry.index.array ); const groundColliderDesc = RAPIER.ColliderDesc.trimesh( new Float32Array(vertices), new Uint32Array(indices) ) .setActiveEvents( RAPIER.ActiveEvents.COLLISION_EVENTS ); const groundCollider = world.createCollider( groundColliderDesc ); } ); ίϐʔͨ͠δΦϝτϦΛ
    ഁյૢ࡞͍ͯ͘͠
19. terrainMesh.updateWorldMatrix( true, true ); terrainMesh.traverse( ( object ) => { if ( ! object.isMesh ) return; const geometry = object.geometry.clone(); geometry.applyMatrix4( object.matrix ); geometry.computeVertexNormals(); const vertices = new Float32Array( geometry.attributes.position.array ); const indices = new Uint32Array( geometry.index.array ); const groundColliderDesc = RAPIER.ColliderDesc.trimesh( new Float32Array(vertices), new Uint32Array(indices) ) .setActiveEvents( RAPIER.ActiveEvents.COLLISION_EVENTS ); const groundCollider = world.createCollider( groundColliderDesc ); } ); ม׵ߦྻΛ௖఺ʹম͖෇͚Δ
20. terrainMesh.updateWorldMatrix( true, true ); terrainMesh.traverse( ( object ) => { if ( ! object.isMesh ) return; const geometry = object.geometry.clone(); geometry.applyMatrix4( object.matrix ); geometry.computeVertexNormals(); const vertices = new Float32Array( geometry.attributes.position.array ); const indices = new Uint32Array( geometry.index.array ); const groundColliderDesc = RAPIER.ColliderDesc.trimesh( new Float32Array(vertices), new Uint32Array(indices) ) .setActiveEvents( RAPIER.ActiveEvents.COLLISION_EVENTS ); const groundCollider = world.createCollider( groundColliderDesc ); } ); UISFFKTͷHFPNFUSZ͔Β
    ಺༰ΛऔΓग़ͯ͠
    
21. terrainMesh.updateWorldMatrix( true, true ); terrainMesh.traverse( ( object ) => { if ( ! object.isMesh ) return; const geometry = object.geometry.clone(); geometry.applyMatrix4( object.matrix ); geometry.computeVertexNormals(); const vertices = new Float32Array( geometry.attributes.position.array ); const indices = new Uint32Array( geometry.index.array ); const groundColliderDesc = RAPIER.ColliderDesc.trimesh( new Float32Array(vertices), new Uint32Array(indices) ) .setActiveEvents( RAPIER.ActiveEvents.COLLISION_EVENTS ); const groundCollider = world.createCollider( groundColliderDesc ); } ); ௖఺഑ྻ͔Β
    3BQJFSͷ߶ମΛ࡞ΕΔ
    
22. +4൛ʹ͸ɺࣗಈं෺ཧ͕ͳ͍ʂ
23. ͍͢͝ਓ͕ɺಠࣗʹ࡞͍ͬͯͨʜ
24. w 5XJUUFSͰҎલ͔Β
    গ͠ݟ͔͚͍ͯͨ
    w φϏήʔγϣϯϝογϡͱ
    ΤʔδΣϯτػೳΛ+4΋
    ެ։ͯ͠Δ *TBBD͞Μɺ͍͢͝
25. φϏήʔγϣϯϝογϡ
26. ΤʔδΣϯτ IUUQTUZQJDBMTZOPOZNPVTTQJSJUHMJUDINF
27. w UISFFKT
    w %ඳըػೳ
    w ೚ҙϞσϧͷಡΈࠐΈʢHM5'ʣ
    w 3BQJFS
    w ೚ҙϝογϡ͔Β߶ମΛ࡞Δ
    w ࣗಈं෺ཧγϛϡϨʔγϣϯʢ*TBBD͞Μ੡ʣ
    ཁ݅ୡ੒ʹඞཁͳػೳ
28. ίʔυΛॻ͍͍ͯ͘ʜʂ
29. ෺ཧԋࢉͱඳը ෺ཧԋࢉ
    ʢ3BQJFSͷXPSMEʣ දࣔ
    ʢUISFFKTͷTDFOFʣ
30. w Ұൠతʹɺ෺ཧԋࢉͷੈք͸XPSMEͱݺ͹Ε
    දࣔͷੈք͸TDFOFͱݺ͹ΕΔ
    w ෺ཧԋࢉʢ3BQJFSʣͰ
    ࣌ؒ͝ͱͷγϛϡϨʔγϣϯΛ͢Δ
    w γϛϡϨʔγϣϯ݁ՌʢXPSMEʣΛ
    UISFFKTͷTDFOFʹ൓ө͢Δ ෺ཧԋࢉͱඳը
31. // 物理 const gravity = { x: 0, y: -9.81, z: 0 }; const world = new RAPIER.World( gravity ); world.timestep = 0.016; // 表示 const width = window.innerWidth; const height = window.innerHeight; const clock = new THREE.Clock(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); https://github.com/yomotsu/rapier-tryout ෺ཧγϛϡϨʔγϣϯೖΕ෺
    XPSME දࣔͷೖΕ෺
    TDFOF
32. const radius = 1; // 表示 const ballMesh = new Mesh( new SphereGeometry( radius, 16, 16 ), new MeshNormalMaterial( { wireframe: true } ) ); scene.add( ballMesh ); // 物理 const rigidBodyDesc = RAPIER.RigidBodyDesc.dynamic() .setLinearDamping( 0.1 ) .setTranslation( 0, 3, 0 ); const rigidBody = world.createRigidBody( rigidBodyDesc ); const colliderDesc = RAPIER.ColliderDesc.ball( radius ) .setFriction( 0.1 ) .setFrictionCombineRule( RAPIER.CoefficientCombineRule.Max ) .setRestitution( 0.6 ) .setRestitutionCombineRule( RAPIER.CoefficientCombineRule.Max ); world.createCollider( colliderDesc, rigidBody ); https://github.com/yomotsu/rapier-tryout ൒ܘ̍ͷٿମͷϝογϡ ൒ܘ̍ͷٿମͷ߶ମ TDFOF಺ʹ഑ஔ XPSME಺ʹ഑ஔ
33. ( function gameLoop() { world.step(); ballMesh.position.copy( rigidBody.translation() ); ballMesh.quaternion.copy( rigidBody.rotation() ); setTimeout( gameLoop, world.timestep ); } )(); https://github.com/yomotsu/rapier-tryout UJNFTUFQ͸ඵͰݻఆࡁΈ
    ෺ཧ͸S"'Λ࢖Θͣɺݻఆඵϧʔϓͤ͞Δ ෺ཧγϛϡϨʔγϣϯ݁ՌΛ
    දࣔҐஔʹίϐʔ
34. ( function renderLoop () { requestAnimationFrame( renderLoop ); renderer.render( scene, camera ); } )(); https://github.com/yomotsu/rapier-tryout දࣔ͸S"'Ͱɺ
    σόΠεෛՙʹԠͨ͡ϧʔϓΛͤ͞Δ
37. https://booth.pm/ja/items/1098032
41. https://on-jin.com/sound/listshow.php?pagename=nori&title=ंɾΫϥΫγϣϯ02
43. Web audio https://github.com/yomotsu/rapier-tryout/blob/main/6_hone/index.html
44. %FNP
46. const curvePath: THREE.CurvePath<THREE.Vector3> = new THREE.CurvePath(); curvePath.add( new THREE.CatmullRomCurve3( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, 0.1 ), new THREE.Vector3( 0, 0, 10 ), new THREE.Vector3( 0, 18, 50 ), new THREE.Vector3( 20, 18, 60 ), new THREE.Vector3( 20, 18, 0 ), new THREE.Vector3( 0, 18, 0 ), new THREE.Vector3( - 10, 18, 0 ), new THREE.Vector3( - 50, 0, - 50 ), new THREE.Vector3( 0, 0, - 50 ), new THREE.Vector3( 0, 0, - 10 ), ] ) );
48. three.jsʹ͸ɺ ఺͔ΒεϓϥΠϯΛ࡞Δػೳ͕͋Δ
50. ͋Δ఺ʹ͓͍ͯɺ Ұॠલͷ఺ Ұॠޙͷ఺ ͷࠩ෼ϕΫτϧ͔Βɺ ਐߦํ޲ʢλϯδΣϯτʣ͕Θ͔Δ
51. ਐߦํ޲ʢλϯδΣϯτʣ͕Θ͔Ε͹ɺ ্ํ޲ʢϊʔϚϧʣ΋ܭࢉͰ͖Δ
52. ԣํ޲ʢόΠϊʔϚϧʣ΋ܭࢉͰ͖Δ
56. ϑϨωɾηϨ
57. ࿈ଓ͢Δ఺ͷ λϯδΣϯτɾϊʔϚϧɾόΠϊʔϥϧ ͔ΒɺϦϘϯঢ়ͷδΦϝτϦʔ͕࡞ΕΔ
59. w /PEFKTίϚϯυϥΠϯπʔϧ
    w HMCϑΝΠϧΛѹॖ͢Δ
    w %SBDPΦϓγϣϯ
    w (MC಺ͷେαΠζະѹॖ1/(ςΫενϟΛ
    αΠζͷXFCQʹม׵
    w ͳͲͳͲ HMUGUSBOTGPSN
60. https://gltf-transform.dev/
61. w ϥΠϒϥϦʔɺϒϥ΢βͷਐԽͷ݁Ռ͸
    ໨֮·͍͠
    w ϞόΠϧ୺຤ɾճઢঢ়گ΋ਐԽͨ͠
    w +BWB4DSJQUͬͯԿͰ΋Ͱ͖ͦ͏ʜʂ ·ͱΊ
62. ͓ΘΓ খࢁా
    ߊߒ
    !ZPNPUTV