Merge pull request #47 from ninjadev/example-project

Bump to version 2.1.0
ninjadev · Jul 7, 2022 · b49f0e3 · b49f0e3
2 parents 9847cf5 + 9c1396a
commit b49f0e3
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 355 deletions.
diff --git a/example-project/package.json b/example-project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "renin-example-project",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "type": "module",
   "private": true,
   "scripts": {

diff --git a/example-project/src/JumpingBox.ts b/example-project/src/JumpingBox.ts
@@ -5,8 +5,11 @@ import {
   BoxGeometry,
   Color,
   DoubleSide,
+  FloatType,
+  LinearEncoding,
   Mesh,
   MeshBasicMaterial,
+  NoToneMapping,
   PerspectiveCamera,
   RawShaderMaterial,
   Scene,
@@ -29,11 +32,13 @@ export class JumpingBox extends ReninNode {
   beam: Mesh<BoxGeometry, MeshBasicMaterial>;
 
   /* The renderTarget for this node. */
-  renderTarget = new WebGLRenderTarget(640, 360);
+  renderTarget = new WebGLRenderTarget(640, 360, {
+    type: FloatType,
+  });
 
   /* In the constructor we set up our scene. */
-  constructor() {
-    super();
+  constructor(renin: Renin) {
+    super(renin);
     this.cube = new Mesh(
       new BoxGeometry(),
       new ShaderMaterial({
@@ -105,6 +110,8 @@ export class JumpingBox extends ReninNode {
     /* At the end of our render implementation, we finally render
      * to the renderTarget, making the output available to the parent node. */
     renderer.setRenderTarget(this.renderTarget);
+    renderer.toneMapping = NoToneMapping;
+    renderer.outputEncoding = LinearEncoding;
     renderer.render(this.scene, this.camera);
   }
 }
diff --git a/example-project/src/PostFx.ts b/example-project/src/PostFx.ts
@@ -20,21 +20,22 @@ export class PostFx extends ReninNode {
     })
   );
 
-  children = children<{
-    switcher: SceneSwitcher;
-  }>({
-    switcher: SceneSwitcher,
-  });
-
-  constructor() {
-    super();
+  constructor(renin: Renin) {
+    super(renin);
     this.scene.add(this.screen);
     this.camera.position.z = 10;
+
+    this.children = children<{
+      switcher: SceneSwitcher;
+    }>({
+      switcher: new SceneSwitcher(renin),
+    });
   }
 
   public render(frame: number, renderer: WebGLRenderer, _renin: Renin) {
     this.screen.material.uniforms.frame.value = frame;
-    this.screen.material.uniforms.tDiffuse.value = this.children.switcher.renderTarget.texture;
+    //@ts-ignore
+    this.screen.material.uniforms.tDiffuse.value = this.children?.switcher.renderTarget.texture;
     this.screen.material.needsUpdate = true;
     renderer.render(this.scene, this.camera);
   }

diff --git a/example-project/src/SceneSwitcher.ts b/example-project/src/SceneSwitcher.ts
@@ -18,31 +18,33 @@ export class SceneSwitcher extends ReninNode {
   camera = new OrthographicCamera(-1, 1, 1, -1);
   renderTarget = new WebGLRenderTarget(640, 360);
   screen = new Mesh(new BoxGeometry(2, 2, 2), new MeshBasicMaterial());
-
-  children = children<{
-    spinningcube: SpinningDonut;
-    jumpingbox: JumpingBox;
-  }>({
-    spinningcube: SpinningDonut,
-    jumpingbox: JumpingBox,
-  });
   public resize(width: number, height: number) {
     this.renderTarget.setSize(width, height);
   }
 
-  constructor() {
-    super();
+  constructor(renin: Renin) {
+    super(renin);
+
+    this.children = children<{
+      spinningcube: SpinningDonut;
+      jumpingbox: JumpingBox;
+    }>({
+      spinningcube: new SpinningDonut(renin),
+      jumpingbox: new JumpingBox(renin),
+    });
     this.scene.add(this.screen);
     this.scene.add(this.camera);
     this.camera.position.z = 10;
   }
 
-  public render(frame: number, renderer: WebGLRenderer, _renin: Renin) {
+  public render(frame: number, renderer: WebGLRenderer, renin: Renin) {
     this.screen.material.map = null;
-    if (this.children.jumpingbox.isActive) {
+    if (this.children?.jumpingbox.isActive) {
+      //@ts-ignore
       this.screen.material.map = this.children.jumpingbox.renderTarget.texture;
     }
-    if (this.children.spinningcube.isActive) {
+    if (this.children?.spinningcube.isActive) {
+      //@ts-ignore
       this.screen.material.map = this.children.spinningcube.renderTarget.texture;
     }
     this.screen.material.needsUpdate = true;

diff --git a/example-project/src/SpinningDonut.ts b/example-project/src/SpinningDonut.ts
@@ -3,6 +3,8 @@ import envMap from './envMap.jpg';
 import {
   BufferGeometry,
   EquirectangularReflectionMapping,
+  FloatType,
+  LinearEncoding,
   Mesh,
   MeshPhysicalMaterial,
   MeshStandardMaterial,
@@ -14,6 +16,7 @@ import {
   WebGLRenderer,
   WebGLRenderTarget,
 } from 'three';
+import { Renin } from 'renin/lib/renin';
 
 export class SpinningDonut extends ReninNode {
   /* The frame range this node will be active. */
@@ -25,11 +28,13 @@ export class SpinningDonut extends ReninNode {
   cube: Mesh<BufferGeometry, MeshStandardMaterial>;
 
   /* The renderTarget for this node. */
-  renderTarget = new WebGLRenderTarget(640, 360);
+  renderTarget = new WebGLRenderTarget(640, 360, {
+    type: FloatType,
+  });
 
   /* In the constructor we set up our scene. */
-  constructor() {
-    super();
+  constructor(renin: Renin) {
+    super(renin);
 
     /* Here load an image that we will use as an envMap. In renin,
      * we can load images by just using THREE's built-in TextureLoader
@@ -75,7 +80,9 @@ export class SpinningDonut extends ReninNode {
 
     /* At the end of our render implementation, we finally render
      * to the renderTarget, making the output available to the parent node. */
+
     renderer.setRenderTarget(this.renderTarget);
+    renderer.outputEncoding = LinearEncoding;
     renderer.render(this.scene, this.camera);
   }
 }
diff --git a/example-project/src/main.ts b/example-project/src/main.ts
@@ -10,7 +10,7 @@ export const renin = new Renin({
     subdivision: 12,
     beatOffset: 4,
   },
-  root: new PostFx(),
+  root: PostFx,
   productionMode: import.meta.env.PROD,
   rendererOptions: {
     powerPreference: 'high-performance',