GSplatComponent that allows native integration of splat tech with the…

… Entity (#5976) Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
playcanvas · Jan 25, 2024 · c2ace37 · c2ace37
1 parent 56f4001
commit c2ace37
Show file tree

Hide file tree

Showing 14 changed files with 599 additions and 89 deletions.
diff --git a/examples/src/examples/loaders/gsplat-many.mjs b/examples/src/examples/loaders/gsplat-many.mjs
@@ -26,7 +26,8 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
         pc.RenderComponentSystem,
         pc.CameraComponentSystem,
         pc.LightComponentSystem,
-        pc.ScriptComponentSystem
+        pc.ScriptComponentSystem,
+        pc.GSplatComponentSystem
     ];
     createOptions.resourceHandlers = [
         // @ts-ignore
@@ -55,8 +56,8 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
 
     const assets = {
         gallery: new pc.Asset('gallery', 'container', { url: assetPath + 'models/vr-gallery.glb' }),
-        guitar: new pc.Asset('splat', 'gsplat', { url: assetPath + 'splats/guitar.ply' }),
-        biker: new pc.Asset('splat', 'gsplat', { url: assetPath + 'splats/biker.ply' }),
+        guitar: new pc.Asset('gsplat', 'gsplat', { url: assetPath + 'splats/guitar.ply' }),
+        biker: new pc.Asset('gsplat', 'gsplat', { url: assetPath + 'splats/biker.ply' }),
         orbit: new pc.Asset('script', 'script', { url: scriptsPath + 'camera/orbit-camera.js' })
     };
 
@@ -80,8 +81,7 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
 
         const createSplatInstance = (name, resource, px, py, pz, scale, vertex, fragment) => {
 
-            const splat = resource.instantiateRenderEntity({
-                cameraEntity: camera,
+            const splat = resource.instantiate({
                 debugRender: false,
                 fragment: fragment,
                 vertex: vertex
@@ -95,8 +95,12 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
 
         const guitar = createSplatInstance('guitar', assets.guitar.resource, 0, 0.8, 0, 0.4, files['shader.vert'], files['shader.frag']);
         const biker1 = createSplatInstance('biker1', assets.biker.resource, -1.5, 0.05, 0, 0.7);
-        const biker2 = createSplatInstance('biker2', assets.biker.resource, 1.5, 0.05, 0.8, 0.7);
+
+        // clone the biker and add the clone to the scene
+        const biker2 = biker1.clone();
+        biker2.setLocalPosition(1.5, 0.05, 0);
         biker2.rotate(0, 150, 0);
+        app.root.addChild(biker2);
 
         // add orbit camera script with a mouse and a touch support
         camera.addComponent("script");
@@ -116,7 +120,7 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
         app.on("update", function (dt) {
             currentTime += dt;
 
-            const material = guitar.render.meshInstances[0].material;
+            const material = guitar.gsplat.material;
             material.setParameter('uTime', currentTime);
         });
     });

diff --git a/examples/src/examples/loaders/gsplat.mjs b/examples/src/examples/loaders/gsplat.mjs
@@ -26,7 +26,8 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
         pc.RenderComponentSystem,
         pc.CameraComponentSystem,
         pc.LightComponentSystem,
-        pc.ScriptComponentSystem
+        pc.ScriptComponentSystem,
+        pc.GSplatComponentSystem
     ];
     createOptions.resourceHandlers = [
         // @ts-ignore
@@ -54,7 +55,7 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
     });
 
     const assets = {
-        biker: new pc.Asset('splat', 'gsplat', { url: assetPath + 'splats/biker.ply' }),
+        biker: new pc.Asset('gsplat', 'gsplat', { url: assetPath + 'splats/biker.ply' }),
         orbit: new pc.Asset('script', 'script', { url: scriptsPath + 'camera/orbit-camera.js' })
     };
 
@@ -74,8 +75,7 @@ async function example({ canvas, deviceType, assetPath, scriptsPath, glslangPath
 
         const createSplatInstance = (resource, px, py, pz, scale, vertex, fragment) => {
 
-            const splat = resource.instantiateRenderEntity({
-                cameraEntity: camera,
+            const splat = resource.instantiate({
                 debugRender: false,
                 fragment: fragment,
                 vertex: vertex

diff --git a/scripts/camera/orbit-camera.js b/scripts/camera/orbit-camera.js
@@ -310,6 +310,15 @@ OrbitCamera.prototype._buildAabb = function (entity) {
         }
     }
 
+    var gsplats = entity.findComponents("gsplat");
+    for (i = 0; i < gsplats.length; i++) {
+        var gsplat = gsplats[i];
+        var instance = gsplat.instance;
+        if (instance) {
+            meshInstances.push(instance.meshInstance);
+        }
+    }
+
     for (i = 0; i < meshInstances.length; i++) {
         if (i === 0) {
             this._modelsAabb.copy(meshInstances[i].aabb);