Merge pull request #13 from martinRenou/add_water

martinRenou · web-flow · commit 30250be6bf2f · 2020-06-17T08:45:51.000+02:00
Add water effect
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "backbone": "^1.4.0",
     "binary-search-tree": "^0.2.6",
     "jquery": "^3.4.1",
-    "three": "^0.112.0",
+    "three": "^0.117.0",
     "uuid": "^3.3.3"
   },
   "devDependencies": {
diff --git a/src/Block.ts b/src/Block.ts
@@ -49,9 +49,6 @@ abstract class Block extends Events {
     for (const mesh of this._environmentMeshes) {
       mesh.matrixAutoUpdate = false;
     }
-
-    this.updateMatrix();
-
   }
 
   /**
@@ -62,6 +59,7 @@ abstract class Block extends Events {
 
     this.handleVerticesChange();
 
+    // TODO: Separate vertices change and triangles change event?
     this.trigger('change:geometry');
   }
 
@@ -79,6 +77,8 @@ abstract class Block extends Events {
     this._triangleIndices = triangleIndices;
 
     this.handleTriangleIndicesChange();
+
+    this.trigger('change:geometry');
   }
 
   /**
@@ -138,7 +138,7 @@ abstract class Block extends Events {
     this.updateMatrix();
   }
 
-  private updateMatrix () {
+  protected updateMatrix () {
     const scaleMatrix = new THREE.Matrix4().makeScale(this._scale.x, this._scale.y, this._scale.z);
     const positionMatrix = new THREE.Matrix4().makeTranslation(this._position.x, this._position.y, this._position.z);
 
@@ -214,4 +214,6 @@ abstract class Block extends Events {
 
   parent: Block | null = null;
 
+  beforeRenderHook: ((renderer: THREE.WebGLRenderer) => void) | null = null;
+
 }
diff --git a/src/EffectBlock.ts b/src/EffectBlock.ts
@@ -61,7 +61,6 @@ class Effect extends Block {
    */
   setInput (input?: Input) : void {
     if (this.inputDimension == 0) {
-      // Do nothing (Maybe throw?)
       return;
     }
 
diff --git a/src/Effects/Alpha.ts b/src/Effects/Alpha.ts
@@ -38,6 +38,7 @@ class Alpha extends Effect {
     this.parent.on('change:geometry', this.sortTriangleIndices.bind(this));
 
     this.initialized = true;
+    this.updateMatrix();
   }
 
   setInput(input?: Input) : void {
diff --git a/src/Effects/IsoColor.ts b/src/Effects/IsoColor.ts
@@ -45,6 +45,7 @@ class IsoColor extends Effect {
     this.buildMaterial();
 
     this.initialized = true;
+    this.updateMatrix();
   }
 
   setInput(input?: Input) : void {
diff --git a/src/Effects/IsoSurface.ts b/src/Effects/IsoSurface.ts
@@ -68,6 +68,7 @@ class IsoSurface extends Effect {
     this.inputComponent.on('change:array', this.onInputArrayChange.bind(this));
 
     this.initialized = true;
+    this.updateMatrix();
   }
 
   updateGeometry () {
diff --git a/src/Effects/RGB.ts b/src/Effects/RGB.ts
@@ -34,6 +34,7 @@ class RGB extends Effect {
     this.buildMaterial();
 
     this.initialized = true;
+    this.updateMatrix();
   }
 
   setInput(input?: Input) : void {
diff --git a/src/Effects/Warp.ts b/src/Effects/Warp.ts
@@ -38,6 +38,7 @@ class Warp extends Effect {
     this.buildMaterial();
 
     this.initialized = true;
+    this.updateMatrix();
   }
 
   setInput(input?: Input) : void {
diff --git a/src/MeshBlock.ts b/src/MeshBlock.ts
@@ -59,12 +59,11 @@ class PolyMesh extends Block {
       const indexBuffer = new THREE.BufferAttribute(this.triangleIndices, 1);
       this.geometry.setIndex(indexBuffer);
     }
-
   }
 
   get boundingSphere () : THREE.Sphere {
     this.geometry.computeBoundingSphere();
-    return this.geometry.boundingSphere;
+    return this.geometry.boundingSphere as THREE.Sphere;
   }
 
   _triangleIndices: Uint32Array;
@@ -125,7 +124,7 @@ class PointCloud extends Block {
 
   get boundingSphere () : THREE.Sphere {
     this.geometry.computeBoundingSphere();
-    return this.geometry.boundingSphere;
+    return this.geometry.boundingSphere as THREE.Sphere;
   }
 
   geometry: THREE.BufferGeometry;
diff --git a/src/NodeMesh.ts b/src/NodeMesh.ts
@@ -180,7 +180,7 @@ class NodeMesh {
 
   get boundingSphere () : THREE.Sphere {
     this.geometry.computeBoundingSphere();
-    return this.geometry.boundingSphere;
+    return this.geometry.boundingSphere as THREE.Sphere;
   }
 
   set defaultColor (defaultColor: string) {
diff --git a/src/Plugins/Water/UnderWater.ts b/src/Plugins/Water/UnderWater.ts
@@ -0,0 +1,246 @@
+import * as THREE from 'three';
+
+import {
+  Effect, Input, InputDimension
+} from '../../EffectBlock';
+
+import {
+  Component
+} from '../../Data';
+
+import {
+  Block
+} from '../../Block';
+
+
+// Environment mapping shaders
+const envMappingVertex = `
+varying vec4 worldPosition;
+varying float depth;
+
+
+void main() {
+  // Compute world position
+  worldPosition = modelMatrix * vec4(position, 1.);
+
+  // Project vertex in the screen coordinates
+  vec4 projectedPosition = projectionMatrix * viewMatrix * worldPosition;
+
+  // Store vertex depth
+  depth = projectedPosition.z;
+
+  gl_Position = projectedPosition;
+}
+`;
+
+const envMappingFragment = `
+varying vec4 worldPosition;
+varying float depth;
+
+
+void main() {
+  gl_FragColor = vec4(worldPosition.xyz, depth);
+}
+`;
+
+
+// Environment shaders
+const getEnvVertex = (underwater: String) => `
+attribute float ${underwater};
+
+// Light projection matrix
+uniform mat4 lightProjectionMatrix;
+uniform mat4 lightViewMatrix;
+
+varying vec3 lightPosition;
+varying vec3 worldPosition;
+varying float v${underwater};
+
+
+void main(void){
+  // Interpolate the underwater value
+  v${underwater} = ${underwater};
+
+  vec4 modelPosition = modelMatrix * vec4(position, 1.);
+  worldPosition = modelPosition.xyz;
+
+  // Compute position in the light coordinates system, this will be used for
+  // comparing fragment depth with the caustics texture
+  vec4 lightRelativePosition = lightProjectionMatrix * lightViewMatrix * modelPosition;
+  lightPosition = 0.5 + lightRelativePosition.xyz / lightRelativePosition.w * 0.5;
+
+  // The position of the vertex
+  gl_Position = projectionMatrix * viewMatrix * modelPosition;
+}
+`;
+
+const getEnvFragment = (underwater: String) => `
+uniform vec3 light;
+uniform sampler2D caustics;
+
+varying vec3 lightPosition;
+varying vec3 worldPosition;
+varying float v${underwater};
+
+const float bias = 0.005;
+
+const vec3 underwaterColor = vec3(0.4, 0.9, 1.0);
+const vec3 overwaterColor = vec3(1.);
+
+
+void main() {
+  // Compute flat shading normal (inefficient, should be computed on CPU once)
+  vec3 X = dFdx(worldPosition);
+  vec3 Y = dFdy(worldPosition);
+  vec3 normal = normalize(cross(X, Y));
+
+  float lightIntensity = - dot(light, normalize(normal));
+
+  // Set the frag color
+  float computedLightIntensity = 0.5;
+
+  computedLightIntensity += 0.2 * lightIntensity;
+
+  if (v${underwater} < 0.) {
+    // Retrieve caustics information
+    vec2 causticsInfo = texture2D(caustics, lightPosition.xy).zw;
+    float causticsIntensity = causticsInfo.x;
+    float causticsDepth = causticsInfo.y;
+
+    if (causticsDepth > lightPosition.z - bias) {
+      computedLightIntensity += causticsIntensity;
+    }
+
+    gl_FragColor = vec4(underwaterColor * computedLightIntensity, 1.);
+  } else {
+    gl_FragColor = vec4(overwaterColor * computedLightIntensity, 1.);
+  }
+}
+`;
+
+
+/**
+ * Block that receives the caustics.
+ **/
+// TODO: Take a 1D input, the underwater component that specifies if the vertex is underwater or not
+export
+class UnderWater extends Effect {
+
+  constructor (parent: Block, input: Input) {
+    super(parent, input);
+
+    // Remove meshes, we won't use NodeMeshes here
+    this.meshes = [];
+
+    this.inputComponent = this.inputs[0];
+
+    // Initialize environment mapping and environment material
+    this.envMappingMaterial = new THREE.ShaderMaterial({
+      vertexShader: envMappingVertex,
+      fragmentShader: envMappingFragment,
+    });
+
+    this.envMaterial = new THREE.ShaderMaterial({
+      vertexShader: getEnvVertex(this.inputComponent.shaderName),
+      fragmentShader: getEnvFragment(this.inputComponent.shaderName),
+      uniforms: {
+        light: { value: null },
+        caustics: { value: null },
+        lightProjectionMatrix: { value: null },
+        lightViewMatrix: { value: null }
+      },
+      extensions: {
+        derivatives: true
+      }
+    });
+
+    this.envMappingMeshes = [];
+    this.envMeshes = [];
+    for (const mesh of parent.meshes) {
+      const envMappingMesh = new THREE.Mesh(mesh.geometry, this.envMappingMaterial)
+      envMappingMesh.matrixAutoUpdate = false;
+      this.envMappingMeshes.push(envMappingMesh);
+
+      (mesh.geometry as THREE.BufferGeometry).setAttribute(this.inputComponent.shaderName, this.inputComponent.bufferAttribute);
+
+      const envMesh = new THREE.Mesh(mesh.geometry, this.envMaterial);
+      envMesh.matrixAutoUpdate = false;
+      this.envMeshes.push(envMesh);
+    }
+
+    this.initialized = true;
+  }
+
+  /**
+   * Add the effect to a given scene
+   */
+  addToScene (scene: THREE.Scene) {
+    super.addToScene(scene);
+
+    for (const mesh of this.envMeshes) {
+      scene.add(mesh);
+    }
+  }
+
+  setLight (light: THREE.Vector3, lightProjectionMatrix: THREE.Matrix4, lightViewMatrix: THREE.Matrix4) {
+    this.envMaterial.uniforms['light'].value = light;
+    this.envMaterial.uniforms['lightProjectionMatrix'].value = lightProjectionMatrix;
+    this.envMaterial.uniforms['lightViewMatrix'].value = lightViewMatrix;
+  }
+
+  setCausticsTexture (causticsTexture: THREE.Texture) {
+    this.envMaterial.uniforms['caustics'].value = causticsTexture;
+  }
+
+  renderEnvMap (renderer: THREE.WebGLRenderer, lightCamera: THREE.Camera) {
+    for (const mesh of this.envMappingMeshes) {
+      // @ts-ignore: Until https://github.com/mrdoob/three.js/pull/19564 is released
+      renderer.render(mesh, lightCamera);
+    }
+  }
+
+  setMatrix (matrix: THREE.Matrix4) {
+    for (const mesh of this.envMappingMeshes) {
+      mesh.matrix.copy(matrix);
+      mesh.updateMatrixWorld(true);
+    }
+    for (const mesh of this.envMeshes) {
+      mesh.matrix.copy(matrix);
+      mesh.updateMatrixWorld(true);
+    }
+  }
+
+  setInput(input?: Input) : void {
+    super.setInput(input);
+
+    if (this.initialized) {
+      this.inputComponent = this.inputs[0];
+
+      for (const mesh of this.envMeshes) {
+        (mesh.geometry as THREE.BufferGeometry).setAttribute(this.inputComponent.shaderName, this.inputComponent.bufferAttribute);
+      }
+
+      this.envMaterial.vertexShader = getEnvVertex(this.inputComponent.shaderName);
+      this.envMaterial.fragmentShader = getEnvFragment(this.inputComponent.shaderName);
+      this.envMaterial.needsUpdate = true;
+    }
+  }
+
+  get inputDimension () : InputDimension {
+    return 1;
+  }
+
+  static readonly envMapSize: number = 256;
+  static envMappingTarget: THREE.WebGLRenderTarget = new THREE.WebGLRenderTarget(UnderWater.envMapSize, UnderWater.envMapSize, {type: THREE.FloatType});
+  private envMappingMaterial: THREE.ShaderMaterial;
+  private envMappingMeshes: THREE.Mesh[];
+  private envMeshes: THREE.Mesh[];
+
+  private envMaterial: THREE.ShaderMaterial;
+
+  private initialized: boolean = false;
+  private inputComponent: Component;
+
+  protected inputs: Component[];
+
+}
diff --git a/src/Plugins/Water/Water.ts b/src/Plugins/Water/Water.ts
diff --git a/src/Plugins/plugins.ts b/src/Plugins/plugins.ts
diff --git a/src/Scene.ts b/src/Scene.ts
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/utils/uuid.ts b/src/utils/uuid.ts

Original file line number	Diff line number	Diff line change
`@@ -49,9 +49,6 @@ abstract class Block extends Events {`
`49`	`49`	`for (const mesh of this._environmentMeshes) {`
`50`	`50`	`mesh.matrixAutoUpdate = false;`
`51`	`51`	`}`
`52`		`-`
`53`		`- this.updateMatrix();`
`54`		`-`
`55`	`52`	`}`
`56`	`53`
`57`	`54`	`/**`
`@@ -62,6 +59,7 @@ abstract class Block extends Events {`
`62`	`59`
`63`	`60`	`this.handleVerticesChange();`
`64`	`61`
	`62`	`+ // TODO: Separate vertices change and triangles change event?`
`65`	`63`	`this.trigger('change:geometry');`
`66`	`64`	`}`
`67`	`65`
`@@ -79,6 +77,8 @@ abstract class Block extends Events {`
`79`	`77`	`this._triangleIndices = triangleIndices;`
`80`	`78`
`81`	`79`	`this.handleTriangleIndicesChange();`
	`80`	`+`
	`81`	`+ this.trigger('change:geometry');`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`/**`
`@@ -138,7 +138,7 @@ abstract class Block extends Events {`
`138`	`138`	`this.updateMatrix();`
`139`	`139`	`}`
`140`	`140`
`141`		`- private updateMatrix () {`
	`141`	`+ protected updateMatrix () {`
`142`	`142`	`const scaleMatrix = new THREE.Matrix4().makeScale(this._scale.x, this._scale.y, this._scale.z);`
`143`	`143`	`const positionMatrix = new THREE.Matrix4().makeTranslation(this._position.x, this._position.y, this._position.z);`
`144`	`144`
`@@ -214,4 +214,6 @@ abstract class Block extends Events {`
`214`	`214`
`215`	`215`	`parent: Block \| null = null;`
`216`	`216`
	`217`	`+ beforeRenderHook: ((renderer: THREE.WebGLRenderer) => void) \| null = null;`
	`218`	`+`
`217`	`219`	`}`
Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,6 @@ class Effect extends Block {`
`61`	`61`	`*/`
`62`	`62`	`setInput (input?: Input) : void {`
`63`	`63`	`if (this.inputDimension == 0) {`
`64`		`- // Do nothing (Maybe throw?)`
`65`	`64`	`return;`
`66`	`65`	`}`
`67`	`66`
Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ class Alpha extends Effect {`
`38`	`38`	`this.parent.on('change:geometry', this.sortTriangleIndices.bind(this));`
`39`	`39`
`40`	`40`	`this.initialized = true;`
	`41`	`+ this.updateMatrix();`
`41`	`42`	`}`
`42`	`43`
`43`	`44`	`setInput(input?: Input) : void {`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@ class IsoColor extends Effect {`
`45`	`45`	`this.buildMaterial();`
`46`	`46`
`47`	`47`	`this.initialized = true;`
	`48`	`+ this.updateMatrix();`
`48`	`49`	`}`
`49`	`50`
`50`	`51`	`setInput(input?: Input) : void {`
Original file line number	Diff line number	Diff line change
`@@ -68,6 +68,7 @@ class IsoSurface extends Effect {`
`68`	`68`	`this.inputComponent.on('change:array', this.onInputArrayChange.bind(this));`
`69`	`69`
`70`	`70`	`this.initialized = true;`
	`71`	`+ this.updateMatrix();`
`71`	`72`	`}`
`72`	`73`
`73`	`74`	`updateGeometry () {`
Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@ class RGB extends Effect {`
`34`	`34`	`this.buildMaterial();`
`35`	`35`
`36`	`36`	`this.initialized = true;`
	`37`	`+ this.updateMatrix();`
`37`	`38`	`}`
`38`	`39`
`39`	`40`	`setInput(input?: Input) : void {`
Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ class Warp extends Effect {`
`38`	`38`	`this.buildMaterial();`
`39`	`39`
`40`	`40`	`this.initialized = true;`
	`41`	`+ this.updateMatrix();`
`41`	`42`	`}`
`42`	`43`
`43`	`44`	`setInput(input?: Input) : void {`
Original file line number	Diff line number	Diff line change
`@@ -59,12 +59,11 @@ class PolyMesh extends Block {`
`59`	`59`	`const indexBuffer = new THREE.BufferAttribute(this.triangleIndices, 1);`
`60`	`60`	`this.geometry.setIndex(indexBuffer);`
`61`	`61`	`}`
`62`		`-`
`63`	`62`	`}`
`64`	`63`
`65`	`64`	`get boundingSphere () : THREE.Sphere {`
`66`	`65`	`this.geometry.computeBoundingSphere();`
`67`		`- return this.geometry.boundingSphere;`
	`66`	`+ return this.geometry.boundingSphere as THREE.Sphere;`
`68`	`67`	`}`
`69`	`68`
`70`	`69`	`_triangleIndices: Uint32Array;`
`@@ -125,7 +124,7 @@ class PointCloud extends Block {`
`125`	`124`
`126`	`125`	`get boundingSphere () : THREE.Sphere {`
`127`	`126`	`this.geometry.computeBoundingSphere();`
`128`		`- return this.geometry.boundingSphere;`
	`127`	`+ return this.geometry.boundingSphere as THREE.Sphere;`
`129`	`128`	`}`
`130`	`129`
`131`	`130`	`geometry: THREE.BufferGeometry;`
Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ class NodeMesh {`
`180`	`180`
`181`	`181`	`get boundingSphere () : THREE.Sphere {`
`182`	`182`	`this.geometry.computeBoundingSphere();`
`183`		`- return this.geometry.boundingSphere;`
	`183`	`+ return this.geometry.boundingSphere as THREE.Sphere;`
`184`	`184`	`}`
`185`	`185`
`186`	`186`	`set defaultColor (defaultColor: string) {`