Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Gsplat Viewer</title> | |
| <link rel="stylesheet" href="https://bilca-visionneur-playcanva.static.hf.space/style.css"> | |
| </head> | |
| <body> | |
| <canvas id="application-canvas"></canvas> | |
| <script type="module"> | |
| const rootPath = 'https://playcanvas.vercel.app'; | |
| const deviceType = "webgl2"; | |
| import * as pc from "https://cdn.skypack.dev/[email protected]"; | |
| window.pc = pc; | |
| const canvas = document.getElementById('application-canvas'); | |
| window.focus(); | |
| const gfxOptions = { | |
| deviceTypes: [deviceType], | |
| glslangUrl: `${rootPath}/static/lib/glslang/glslang.js`, | |
| twgslUrl: `${rootPath}/static/lib/twgsl/twgsl.js`, | |
| antialias: false | |
| }; | |
| const device = await pc.createGraphicsDevice(canvas, gfxOptions); | |
| device.maxPixelRatio = Math.min(window.devicePixelRatio, 2); | |
| const createOptions = new pc.AppOptions(); | |
| createOptions.graphicsDevice = device; | |
| createOptions.mouse = new pc.Mouse(document.body); | |
| createOptions.touch = new pc.TouchDevice(document.body); | |
| createOptions.componentSystems = [ | |
| pc.RenderComponentSystem, | |
| pc.CameraComponentSystem, | |
| pc.LightComponentSystem, | |
| pc.ScriptComponentSystem, | |
| pc.GSplatComponentSystem | |
| ]; | |
| createOptions.resourceHandlers = [ | |
| pc.TextureHandler, | |
| pc.ContainerHandler, | |
| pc.ScriptHandler, | |
| pc.GSplatHandler | |
| ]; | |
| const app = new pc.AppBase(canvas); | |
| app.init(createOptions); | |
| app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW); | |
| app.setCanvasResolution(pc.RESOLUTION_AUTO); | |
| app.scene.exposure = 0.8; // Increase exposure slightly (1.2 is a good start) | |
| app.scene.toneMapping = pc.TONEMAP_ACES; | |
| const resize = () => app.resizeCanvas(); | |
| window.addEventListener('resize', resize); | |
| app.on('destroy', () => window.removeEventListener('resize', resize)); | |
| const assets = { | |
| biker: new pc.Asset('gsplat', 'gsplat', { url: `https://huggingface.co/datasets/bilca/ply_files/resolve/main/tests/Statue_Long_ext_v03.ply` }), | |
| orbit: new pc.Asset('script', 'script', { url: `https://bilca-visionneur-playcanva.static.hf.space/orbit-camera.js` }) | |
| }; | |
| const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets); | |
| assetListLoader.load(() => { | |
| app.start(); | |
| const camera = new pc.Entity(); | |
| camera.addComponent('camera', { | |
| clearColor: new pc.Color(0.2, 0.2, 0.2), | |
| toneMapping: pc.TONEMAP_ACES | |
| }); | |
| camera.setLocalPosition(2, 1, 1); | |
| const biker = new pc.Entity(); | |
| biker.addComponent('gsplat', { | |
| asset: assets.biker | |
| }); | |
| biker.setLocalPosition(-1.5, 0.05, 0); | |
| biker.setLocalEulerAngles(0, 90, 0); | |
| biker.setLocalScale(0.7, 0.7, 0.7); | |
| app.root.addChild(biker); | |
| camera.addComponent('script'); | |
| camera.script.create('orbitCamera', { | |
| attributes: { | |
| inertiaFactor: 0.2, | |
| focusEntity: biker, | |
| distanceMax: 60, | |
| frameOnStart: false | |
| } | |
| }); | |
| camera.script.create('orbitCameraInputMouse'); | |
| camera.script.create('orbitCameraInputTouch'); | |
| app.root.addChild(camera); | |
| }); | |
| export { app }; | |
| </script> | |
| </body> | |
| </html> | |