|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="utf-8"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 7 | + <title>Spark • Stochastic Rendering</title> |
| 8 | + <style> |
| 9 | + body { |
| 10 | + margin: 0; |
| 11 | + } |
| 12 | + </style> |
| 13 | +</head> |
| 14 | + |
| 15 | +<body> |
| 16 | + <script type="importmap"> |
| 17 | + { |
| 18 | + "imports": { |
| 19 | + "three": "/examples/js/vendor/three/build/three.module.js", |
| 20 | + "@sparkjsdev/spark": "/dist/spark.module.js" |
| 21 | + } |
| 22 | + } |
| 23 | + </script> |
| 24 | + <script type="module"> |
| 25 | + import * as THREE from "three"; |
| 26 | + import { SparkRenderer, SparkControls, SplatMesh, VRButton } from "@sparkjsdev/spark"; |
| 27 | + import { getAssetFileURL } from "/examples/js/get-asset-url.js"; |
| 28 | + |
| 29 | + const scene = new THREE.Scene(); |
| 30 | + const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); |
| 31 | + const renderer = new THREE.WebGLRenderer(); |
| 32 | + renderer.setPixelRatio(window.devicePixelRatio); |
| 33 | + renderer.setSize(window.innerWidth, window.innerHeight); |
| 34 | + document.body.appendChild(renderer.domElement) |
| 35 | + |
| 36 | + // Make a local frame of reference that we can move to control |
| 37 | + // the camera, or as a frame of reference in WebXR mode |
| 38 | + const localFrame = new THREE.Group(); |
| 39 | + scene.add(localFrame); |
| 40 | + |
| 41 | + // Lower the splat rendering width to sqrt(5) std devs for more performance |
| 42 | + const spark = new SparkRenderer({ renderer, maxStdDev: Math.sqrt(5) }); |
| 43 | + spark.defaultView.stochastic = true; |
| 44 | + localFrame.add(spark); |
| 45 | + localFrame.add(camera); |
| 46 | + |
| 47 | + const splatURL = await getAssetFileURL("valley.spz"); |
| 48 | + const background = new SplatMesh({ url: splatURL }); |
| 49 | + background.quaternion.set(1, 0, 0, 0); |
| 50 | + background.scale.setScalar(0.5); |
| 51 | + scene.add(background); |
| 52 | + |
| 53 | + const vrButton = VRButton.createButton(renderer); |
| 54 | + if (vrButton) { |
| 55 | + // WebXR is available, so show the button |
| 56 | + document.body.appendChild(vrButton); |
| 57 | + } |
| 58 | + |
| 59 | + let lastCameraPos = new THREE.Vector3(0, 0, 0); |
| 60 | + const controls = new SparkControls({ canvas: renderer.domElement }); |
| 61 | + |
| 62 | + renderer.setAnimationLoop(function animate(time, xrFrame) { |
| 63 | + controls.update(localFrame); |
| 64 | + |
| 65 | + // This is a hack to make a "local" frame work reliably across |
| 66 | + // Quest 3 and Vision Pro. Any big discontinuity in the camera |
| 67 | + // results in a reverse shift of the local frame to compensate. |
| 68 | + if (lastCameraPos.distanceTo(camera.position) > 0.5) { |
| 69 | + localFrame.position.copy(camera.position).multiplyScalar(-1); |
| 70 | + } |
| 71 | + lastCameraPos.copy(camera.position); |
| 72 | + |
| 73 | + renderer.render(scene, camera); |
| 74 | + }); |
| 75 | + </script> |
| 76 | +</body> |
| 77 | + |
| 78 | +</html> |
0 commit comments