chore(sample-scene): include sample scene on the repo (#36)

* chore(gitignore): create "scenes" folder This commit includes: * Sample scene that shows material support on the renderer is now part of the repo located under the scenes/ directory * Modified `.gitignore` file such that any other folder inside of `scenes/` would be ignored by git. * chore(npmignore): add .npmignore file This commit includes `.npmignore` for the first time. When a developer includes the renderer as an npm package, the dependency won't include the `scenes` folder. * chore(index.html): update file paths * use latest version of scene * chore(gitignore): do not ignore anything in the "scenes" folder * remove "test-scene" and "demos" from gitignore as well * chore(renderer-test): rename scene from "materials" to "renderer-test"
hoverinc · Oct 29, 2019 · 8fd2fa9 · 8fd2fa9
1 parent 4c26336
commit 8fd2fa9
Show file tree

Hide file tree

Showing 13 changed files with 251 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,8 @@
+# hidden config files
 .DS_Store
 
+# dependencies
 node_modules
 
-# file with envinronment variables
+# file with environment variables
 .env
-
-# demo/test scenes
-demos/
-test-scene/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+# files to ignore when you install the library as an npm package
+
+# folder with sample scenes & 3D models
+scenes/
diff --git a/scenes/renderer-test/credits.txt b/scenes/renderer-test/credits.txt
@@ -0,0 +1,5 @@
+Glass texture - Bryan Brown - https://skirmish.io/posts/688-seamless-stained-glass-texture/order/popular/author/530
+
+Wood & Metal texture - textures.com - https://www.textures.com/download/pbr0267/133941
+
+Environment map - Greg Zaal - https://hdrihaven.com/hdri/?h=leadenhall_market
diff --git a/scenes/renderer-test/diffuse.png b/scenes/renderer-test/diffuse.png
diff --git a/scenes/renderer-test/envmap.hdr b/scenes/renderer-test/envmap.hdr
diff --git a/scenes/renderer-test/glass_diffuse.png b/scenes/renderer-test/glass_diffuse.png
diff --git a/scenes/renderer-test/glass_normal.png b/scenes/renderer-test/glass_normal.png
diff --git a/scenes/renderer-test/index.html b/scenes/renderer-test/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Path Tracing Renderer - Test Scene</title>
+  <script src="/node_modules/three/build/three.js"></script>
+  <script src="/node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
+  <script src="/node_modules/three/examples/js/controls/OrbitControls.js"></script>
+  <script src="/node_modules/three/examples/js/loaders/RGBELoader.js"></script>
+  <script src="/node_modules/stats.js/build/stats.min.js"></script>
+  <script src="/build/RayTracingRenderer.js"></script>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    canvas {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/scenes/renderer-test/main.js b/scenes/renderer-test/main.js
@@ -0,0 +1,210 @@
+const renderer = new THREE.RayTracingRenderer();
+renderer.setPixelRatio(1.0);
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.5;
+renderer.toneMappingWhitePoint = 5;
+renderer.maxHardwareUsage = true;
+renderer.renderWhenOffFocus = false;
+
+document.body.appendChild(renderer.domElement);
+
+const stats = new Stats();
+stats.setMode(0); // 0: fps, 1: ms
+stats.domElement.style.position = 'absolute';
+stats.domElement.style.left = '0px';
+stats.domElement.style.top = '0px';
+document.body.appendChild(stats.domElement);
+
+const camera = new THREE.LensCamera();
+camera.fov = 70;
+camera.aperture = 0.01;
+
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.screenSpacePanning = true;
+
+const scene = new THREE.Scene();
+
+function resize() {
+  if (renderer.domElement.parentElement) {
+    const width = renderer.domElement.parentElement.clientWidth;
+    const height = renderer.domElement.parentElement.clientHeight;
+    renderer.setSize(width, height);
+
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  }
+}
+
+window.addEventListener('resize', resize);
+resize();
+
+const tick = () => {
+  controls.update();
+  camera.focus = controls.target.distanceTo(camera.position);
+  stats.begin();
+  renderer.render(scene, camera);
+  stats.end();
+  requestAnimationFrame(tick);
+};
+
+const geo = new THREE.SphereBufferGeometry(4, 24, 24);
+
+function makeMesh() {
+  const mat = new THREE.RayTracingMaterial();
+  const mesh = new THREE.Mesh(geo, mat);
+  mesh.position.set(0, 4, 0);
+  return mesh;
+}
+
+function init() {
+  const envmap = new THREE.RGBELoader().load('envmap.hdr');
+  const envLight = new THREE.EnvironmentLight(envmap);
+  scene.add(envLight);
+
+  const model = new THREE.Object3D();
+  model.rotateY(-Math.PI / 2);
+
+  controls.target.set(0, 2, 0);
+  camera.position.set(31, 21, -1);
+
+  // smooth
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(-15);
+    mesh.position.setZ(15);
+    mesh.material.roughness = 0.0;
+    mesh.material.metalness = 0.0;
+    mesh.material.color.set(0xaa3333);
+    model.add(mesh);
+  }
+
+  // diffuse
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(-5);
+    mesh.position.setZ(15);
+    mesh.material.roughness = 1.0;
+    mesh.material.metalness = 0.0;
+    mesh.material.color.set(0x222288);
+    model.add(mesh);
+  }
+
+  // smooth metal
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(5);
+    mesh.position.setZ(15);
+    mesh.material.roughness = 0.0;
+    mesh.material.metalness = 1.0;
+    mesh.material.color.set(0xaaaa33);
+    model.add(mesh);
+  }
+
+  //rough metal
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(15);
+    mesh.position.setZ(15);
+    mesh.material.roughness = 1.0;
+    mesh.material.metalness = 1.0;
+    mesh.material.color.set(0x33aa33);
+    model.add(mesh);
+  }
+
+  // diffuse mapping
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(15);
+    mesh.position.setZ(-15);
+    mesh.material.roughness = 1.0;
+    mesh.material.metalness = 0.0;
+    mesh.material.map = new THREE.TextureLoader().load('diffuse.png');
+    model.add(mesh);
+  }
+
+  // roughness/metalness mapping
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(5);
+    mesh.position.setZ(-15);
+    mesh.material.roughness = 1.0;
+    mesh.material.metalness = 1.0;
+    mesh.material.color.set(0x333333);
+    mesh.material.roughnessMap = new THREE.TextureLoader().load('roughness.png');
+    mesh.material.metalnessMap = new THREE.TextureLoader().load('metalness.png');
+    model.add(mesh);
+  }
+
+  // normal mapping
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(-5);
+    mesh.position.setZ(-15);
+    mesh.material.roughness = 0.1;
+    mesh.material.metalness = 1.0;
+    mesh.material.color.set(0xcccccc);
+    mesh.material.normalMap = new THREE.TextureLoader().load('normal.png');
+    model.add(mesh);
+  }
+
+  // combined mapping
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(-15);
+    mesh.position.setZ(-15);
+    mesh.material.roughness = 1.0;
+    mesh.material.metalness = 1.0;
+    mesh.material.map = new THREE.TextureLoader().load('diffuse.png');
+    mesh.material.normalMap = new THREE.TextureLoader().load('normal.png');
+    const metalrough = new THREE.TextureLoader().load('metalrough.png');
+    mesh.material.roughnessMap = metalrough;
+    mesh.material.metalnessMap = metalrough;
+    model.add(mesh);
+  }
+
+  // hollow glass
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(-10);
+    mesh.material.transparent = true;
+    mesh.material.color.set(0xeeeeee);
+    model.add(mesh);
+  }
+
+  // solid glass
+  {
+    const mesh = makeMesh();
+    mesh.position.setX(10);
+    mesh.material.transparent = true;
+    mesh.material.solid = true;
+    mesh.material.color.set(0x8888ee);
+    model.add(mesh);
+  }
+
+  // textured glass
+  {
+    const mesh = makeMesh();
+    mesh.material.transparent = true;
+    mesh.material.solid = true;
+    mesh.material.map = new THREE.TextureLoader().load('glass_diffuse.png');
+    mesh.material.normalMap = new THREE.TextureLoader().load('glass_normal.png');
+    mesh.material.normalScale.set(1.0, -1.0);
+    model.add(mesh);
+  }
+
+  // ground plane
+  {
+    const geo = new THREE.PlaneBufferGeometry(10000, 10000);
+    const mat = new THREE.MeshStandardMaterial();
+    mat.shadowCatcher = true;
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.rotateX(Math.PI / 2);
+    model.add(mesh);
+  }
+
+  scene.add(model);
+
+  THREE.DefaultLoadingManager.onLoad = tick;
+}
+
+init();
diff --git a/scenes/renderer-test/metalness.png b/scenes/renderer-test/metalness.png
diff --git a/scenes/renderer-test/metalrough.png b/scenes/renderer-test/metalrough.png
diff --git a/scenes/renderer-test/normal.png b/scenes/renderer-test/normal.png
diff --git a/scenes/renderer-test/roughness.png b/scenes/renderer-test/roughness.png