three-stdlib 2.15.2 → 2.16.1

package/objects/Water.js

@@ -1,55 +1,82 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const THREE = require("three");
-class Water extends THREE.Mesh {
+import { Mesh, Vector3, Color, FrontSide, Plane, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, UniformsUtils, UniformsLib, ShaderMaterial } from 'three';
+
+/**
+ * Work based on :
+ * https://github.com/Slayvin: Flat mirror for three.js
+ * https://home.adelphi.edu/~stemkoski/ : An implementation of water shader based on the flat mirror
+ * http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
+ */
+
+class Water extends Mesh {
   constructor(geometry, options = {}) {
     super(geometry);
     const scope = this;
-    const textureWidth = options.textureWidth !== void 0 ? options.textureWidth : 512;
-    const textureHeight = options.textureHeight !== void 0 ? options.textureHeight : 512;
-    const clipBias = options.clipBias !== void 0 ? options.clipBias : 0;
-    const alpha = options.alpha !== void 0 ? options.alpha : 1;
-    const time = options.time !== void 0 ? options.time : 0;
-    const normalSampler = options.waterNormals !== void 0 ? options.waterNormals : null;
-    const sunDirection = options.sunDirection !== void 0 ? options.sunDirection : new THREE.Vector3(0.70707, 0.70707, 0);
-    const sunColor = new THREE.Color(options.sunColor !== void 0 ? options.sunColor : 16777215);
-    const waterColor = new THREE.Color(options.waterColor !== void 0 ? options.waterColor : 8355711);
-    const eye = options.eye !== void 0 ? options.eye : new THREE.Vector3(0, 0, 0);
-    const distortionScale = options.distortionScale !== void 0 ? options.distortionScale : 20;
-    const side = options.side !== void 0 ? options.side : THREE.FrontSide;
-    const fog = options.fog !== void 0 ? options.fog : false;
-    const mirrorPlane = new THREE.Plane();
-    const normal = new THREE.Vector3();
-    const mirrorWorldPosition = new THREE.Vector3();
-    const cameraWorldPosition = new THREE.Vector3();
-    const rotationMatrix = new THREE.Matrix4();
-    const lookAtPosition = new THREE.Vector3(0, 0, -1);
-    const clipPlane = new THREE.Vector4();
-    const view = new THREE.Vector3();
-    const target = new THREE.Vector3();
-    const q = new THREE.Vector4();
-    const textureMatrix = new THREE.Matrix4();
-    const mirrorCamera = new THREE.PerspectiveCamera();
-    const renderTarget = new THREE.WebGLRenderTarget(textureWidth, textureHeight);
+    const textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
+    const textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
+    const clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
+    const alpha = options.alpha !== undefined ? options.alpha : 1.0;
+    const time = options.time !== undefined ? options.time : 0.0;
+    const normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
+    const sunDirection = options.sunDirection !== undefined ? options.sunDirection : new Vector3(0.70707, 0.70707, 0.0);
+    const sunColor = new Color(options.sunColor !== undefined ? options.sunColor : 0xffffff);
+    const waterColor = new Color(options.waterColor !== undefined ? options.waterColor : 0x7f7f7f);
+    const eye = options.eye !== undefined ? options.eye : new Vector3(0, 0, 0);
+    const distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
+    const side = options.side !== undefined ? options.side : FrontSide;
+    const fog = options.fog !== undefined ? options.fog : false; //
+
+    const mirrorPlane = new Plane();
+    const normal = new Vector3();
+    const mirrorWorldPosition = new Vector3();
+    const cameraWorldPosition = new Vector3();
+    const rotationMatrix = new Matrix4();
+    const lookAtPosition = new Vector3(0, 0, -1);
+    const clipPlane = new Vector4();
+    const view = new Vector3();
+    const target = new Vector3();
+    const q = new Vector4();
+    const textureMatrix = new Matrix4();
+    const mirrorCamera = new PerspectiveCamera();
+    const renderTarget = new WebGLRenderTarget(textureWidth, textureHeight);
     const mirrorShader = {
-      uniforms: THREE.UniformsUtils.merge([
-        THREE.UniformsLib["fog"],
-        THREE.UniformsLib["lights"],
-        {
-          normalSampler: { value: null },
-          mirrorSampler: { value: null },
-          alpha: { value: 1 },
-          time: { value: 0 },
-          size: { value: 1 },
-          distortionScale: { value: 20 },
-          textureMatrix: { value: new THREE.Matrix4() },
-          sunColor: { value: new THREE.Color(8355711) },
-          sunDirection: { value: new THREE.Vector3(0.70707, 0.70707, 0) },
-          eye: { value: new THREE.Vector3() },
-          waterColor: { value: new THREE.Color(5592405) }
+      uniforms: UniformsUtils.merge([UniformsLib['fog'], UniformsLib['lights'], {
+        normalSampler: {
+          value: null
+        },
+        mirrorSampler: {
+          value: null
+        },
+        alpha: {
+          value: 1.0
+        },
+        time: {
+          value: 0.0
+        },
+        size: {
+          value: 1.0
+        },
+        distortionScale: {
+          value: 20.0
+        },
+        textureMatrix: {
+          value: new Matrix4()
+        },
+        sunColor: {
+          value: new Color(0x7f7f7f)
+        },
+        sunDirection: {
+          value: new Vector3(0.70707, 0.70707, 0)
+        },
+        eye: {
+          value: new Vector3()
+        },
+        waterColor: {
+          value: new Color(0x555555)
         }
-      ]),
-      vertexShader: `
+      }]),
+      vertexShader:
+      /* glsl */
+      `
 				uniform mat4 textureMatrix;
 				uniform float time;
 
@@ -74,7 +101,9 @@ class Water extends THREE.Mesh {
 				#include <fog_vertex>
 				#include <shadowmap_vertex>
 			}`,
-      fragmentShader: `
+      fragmentShader:
+      /* glsl */
+      `
 				uniform sampler2D mirrorSampler;
 				uniform float alpha;
 				uniform float time;
@@ -147,34 +176,35 @@ class Water extends THREE.Mesh {
 					#include <fog_fragment>
 				}`
     };
-    const material = new THREE.ShaderMaterial({
+    const material = new ShaderMaterial({
       fragmentShader: mirrorShader.fragmentShader,
       vertexShader: mirrorShader.vertexShader,
-      uniforms: THREE.UniformsUtils.clone(mirrorShader.uniforms),
+      uniforms: UniformsUtils.clone(mirrorShader.uniforms),
       lights: true,
-      side,
-      fog
+      side: side,
+      fog: fog
     });
-    material.uniforms["mirrorSampler"].value = renderTarget.texture;
-    material.uniforms["textureMatrix"].value = textureMatrix;
-    material.uniforms["alpha"].value = alpha;
-    material.uniforms["time"].value = time;
-    material.uniforms["normalSampler"].value = normalSampler;
-    material.uniforms["sunColor"].value = sunColor;
-    material.uniforms["waterColor"].value = waterColor;
-    material.uniforms["sunDirection"].value = sunDirection;
-    material.uniforms["distortionScale"].value = distortionScale;
-    material.uniforms["eye"].value = eye;
+    material.uniforms['mirrorSampler'].value = renderTarget.texture;
+    material.uniforms['textureMatrix'].value = textureMatrix;
+    material.uniforms['alpha'].value = alpha;
+    material.uniforms['time'].value = time;
+    material.uniforms['normalSampler'].value = normalSampler;
+    material.uniforms['sunColor'].value = sunColor;
+    material.uniforms['waterColor'].value = waterColor;
+    material.uniforms['sunDirection'].value = sunDirection;
+    material.uniforms['distortionScale'].value = distortionScale;
+    material.uniforms['eye'].value = eye;
     scope.material = material;
-    scope.onBeforeRender = function(renderer, scene, camera) {
+
+    scope.onBeforeRender = function (renderer, scene, camera) {
       mirrorWorldPosition.setFromMatrixPosition(scope.matrixWorld);
       cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
       rotationMatrix.extractRotation(scope.matrixWorld);
       normal.set(0, 0, 1);
       normal.applyMatrix4(rotationMatrix);
-      view.subVectors(mirrorWorldPosition, cameraWorldPosition);
-      if (view.dot(normal) > 0)
-        return;
+      view.subVectors(mirrorWorldPosition, cameraWorldPosition); // Avoid rendering when mirror is facing away
+
+      if (view.dot(normal) > 0) return;
       view.reflect(normal).negate();
       view.add(mirrorWorldPosition);
       rotationMatrix.extractRotation(camera.matrixWorld);
@@ -189,47 +219,61 @@ class Water extends THREE.Mesh {
       mirrorCamera.up.applyMatrix4(rotationMatrix);
       mirrorCamera.up.reflect(normal);
       mirrorCamera.lookAt(target);
-      mirrorCamera.far = camera.far;
+      mirrorCamera.far = camera.far; // Used in WebGLBackground
+
       mirrorCamera.updateMatrixWorld();
-      mirrorCamera.projectionMatrix.copy(camera.projectionMatrix);
-      textureMatrix.set(0.5, 0, 0, 0.5, 0, 0.5, 0, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 1);
+      mirrorCamera.projectionMatrix.copy(camera.projectionMatrix); // Update the texture matrix
+
+      textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
       textureMatrix.multiply(mirrorCamera.projectionMatrix);
-      textureMatrix.multiply(mirrorCamera.matrixWorldInverse);
+      textureMatrix.multiply(mirrorCamera.matrixWorldInverse); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+      // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+
       mirrorPlane.setFromNormalAndCoplanarPoint(normal, mirrorWorldPosition);
       mirrorPlane.applyMatrix4(mirrorCamera.matrixWorldInverse);
       clipPlane.set(mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant);
       const projectionMatrix = mirrorCamera.projectionMatrix;
       q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
       q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-      q.z = -1;
-      q.w = (1 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
-      clipPlane.multiplyScalar(2 / clipPlane.dot(q));
+      q.z = -1.0;
+      q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
+
+      clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); // Replacing the third row of the projection matrix
+
       projectionMatrix.elements[2] = clipPlane.x;
       projectionMatrix.elements[6] = clipPlane.y;
-      projectionMatrix.elements[10] = clipPlane.z + 1 - clipBias;
+      projectionMatrix.elements[10] = clipPlane.z + 1.0 - clipBias;
       projectionMatrix.elements[14] = clipPlane.w;
-      eye.setFromMatrixPosition(camera.matrixWorld);
+      eye.setFromMatrixPosition(camera.matrixWorld); // Render
+
       const currentRenderTarget = renderer.getRenderTarget();
       const currentXrEnabled = renderer.xr.enabled;
       const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
       scope.visible = false;
-      renderer.xr.enabled = false;
-      renderer.shadowMap.autoUpdate = false;
+      renderer.xr.enabled = false; // Avoid camera modification and recursion
+
+      renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
+
       renderer.setRenderTarget(renderTarget);
-      renderer.state.buffers.depth.setMask(true);
-      if (renderer.autoClear === false)
-        renderer.clear();
+      renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
+
+      if (renderer.autoClear === false) renderer.clear();
       renderer.render(scene, mirrorCamera);
       scope.visible = true;
       renderer.xr.enabled = currentXrEnabled;
       renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-      renderer.setRenderTarget(currentRenderTarget);
+      renderer.setRenderTarget(currentRenderTarget); // Restore viewport
+
       const viewport = camera.viewport;
-      if (viewport !== void 0) {
+
+      if (viewport !== undefined) {
         renderer.state.viewport(viewport);
       }
     };
   }
+
 }
+
 Water.prototype.isWater = true;
-exports.Water = Water;
+
+export { Water };

package/objects/Water2.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("three"),e=require("./Reflector.cjs.js"),r=require("./Refractor.cjs.js");class o extends t.Mesh{constructor(o,n={}){super(o),this.type="Water";const a=this,l=void 0!==n.color?new t.Color(n.color):new t.Color(16777215),i=n.textureWidth||512,f=n.textureHeight||512,c=n.clipBias||0,u=n.flowDirection||new t.Vector2(1,0),v=n.flowSpeed||.03,m=n.reflectivity||.02,s=n.scale||1,p=n.shader||Water.WaterShader,d=void 0!==n.encoding?n.encoding:t.LinearEncoding,x=new t.TextureLoader,g=n.flowMap||void 0,h=n.normalMap0||x.load("textures/water/Water_1_M_Normal.jpg"),w=n.normalMap1||x.load("textures/water/Water_2_M_Normal.jpg"),y=.15,M=.075,_=new t.Matrix4,R=new t.Clock;if(void 0===e.Reflector)return void console.error("THREE.Water: Required component Reflector not found.");if(void 0===r.Refractor)return void console.error("THREE.Water: Required component Refractor not found.");const C=new e.Reflector(o,{textureWidth:i,textureHeight:f,clipBias:c,encoding:d}),W=new r.Refractor(o,{textureWidth:i,textureHeight:f,clipBias:c,encoding:d});C.matrixAutoUpdate=!1,W.matrixAutoUpdate=!1,this.material=new t.ShaderMaterial({uniforms:t.UniformsUtils.merge([t.UniformsLib.fog,p.uniforms]),vertexShader:p.vertexShader,fragmentShader:p.fragmentShader,transparent:!0,fog:!0}),void 0!==g?(this.material.defines.USE_FLOWMAP="",this.material.uniforms.tFlowMap={type:"t",value:g}):this.material.uniforms.flowDirection={type:"v2",value:u},h.wrapS=h.wrapT=t.RepeatWrapping,w.wrapS=w.wrapT=t.RepeatWrapping,this.material.uniforms.tReflectionMap.value=C.getRenderTarget().texture,this.material.uniforms.tRefractionMap.value=W.getRenderTarget().texture,this.material.uniforms.tNormalMap0.value=h,this.material.uniforms.tNormalMap1.value=w,this.material.uniforms.color.value=l,this.material.uniforms.reflectivity.value=m,this.material.uniforms.textureMatrix.value=_,this.material.uniforms.config.value.x=0,this.material.uniforms.config.value.y=M,this.material.uniforms.config.value.z=M,this.material.uniforms.config.value.w=s,this.onBeforeRender=function(t,e,r){!function(t){_.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),_.multiply(t.projectionMatrix),_.multiply(t.matrixWorldInverse),_.multiply(a.matrixWorld)}(r),function(){const t=R.getDelta(),e=a.material.uniforms.config;e.value.x+=v*t,e.value.y=e.value.x+M,e.value.x>=y?(e.value.x=0,e.value.y=M):e.value.y>=y&&(e.value.y=e.value.y-y)}(),a.visible=!1,C.matrixWorld.copy(a.matrixWorld),W.matrixWorld.copy(a.matrixWorld),C.onBeforeRender(t,e,r),W.onBeforeRender(t,e,r),a.visible=!0}}}o.prototype.isWater=!0,o.WaterShader={uniforms:{color:{type:"c",value:null},reflectivity:{type:"f",value:0},tReflectionMap:{type:"t",value:null},tRefractionMap:{type:"t",value:null},tNormalMap0:{type:"t",value:null},tNormalMap1:{type:"t",value:null},textureMatrix:{type:"m4",value:null},config:{type:"v4",value:new t.Vector4}},vertexShader:"\n\n\t\t#include <common>\n\t\t#include <fog_pars_vertex>\n\t\t#include <logdepthbuf_pars_vertex>\n\n\t\tuniform mat4 textureMatrix;\n\n\t\tvarying vec4 vCoord;\n\t\tvarying vec2 vUv;\n\t\tvarying vec3 vToEye;\n\n\t\tvoid main() {\n\n\t\t\tvUv = uv;\n\t\t\tvCoord = textureMatrix * vec4( position, 1.0 );\n\n\t\t\tvec4 worldPosition = modelMatrix * vec4( position, 1.0 );\n\t\t\tvToEye = cameraPosition - worldPosition.xyz;\n\n\t\t\tvec4 mvPosition =  viewMatrix * worldPosition; // used in fog_vertex\n\t\t\tgl_Position = projectionMatrix * mvPosition;\n\n\t\t\t#include <logdepthbuf_vertex>\n\t\t\t#include <fog_vertex>\n\n\t\t}",fragmentShader:"\n\n\t\t#include <common>\n\t\t#include <fog_pars_fragment>\n\t\t#include <logdepthbuf_pars_fragment>\n\n\t\tuniform sampler2D tReflectionMap;\n\t\tuniform sampler2D tRefractionMap;\n\t\tuniform sampler2D tNormalMap0;\n\t\tuniform sampler2D tNormalMap1;\n\n\t\t#ifdef USE_FLOWMAP\n\t\t\tuniform sampler2D tFlowMap;\n\t\t#else\n\t\t\tuniform vec2 flowDirection;\n\t\t#endif\n\n\t\tuniform vec3 color;\n\t\tuniform float reflectivity;\n\t\tuniform vec4 config;\n\n\t\tvarying vec4 vCoord;\n\t\tvarying vec2 vUv;\n\t\tvarying vec3 vToEye;\n\n\t\tvoid main() {\n\n\t\t\t#include <logdepthbuf_fragment>\n\n\t\t\tfloat flowMapOffset0 = config.x;\n\t\t\tfloat flowMapOffset1 = config.y;\n\t\t\tfloat halfCycle = config.z;\n\t\t\tfloat scale = config.w;\n\n\t\t\tvec3 toEye = normalize( vToEye );\n\n\t\t\t// determine flow direction\n\t\t\tvec2 flow;\n\t\t\t#ifdef USE_FLOWMAP\n\t\t\t\tflow = texture2D( tFlowMap, vUv ).rg * 2.0 - 1.0;\n\t\t\t#else\n\t\t\t\tflow = flowDirection;\n\t\t\t#endif\n\t\t\tflow.x *= - 1.0;\n\n\t\t\t// sample normal maps (distort uvs with flowdata)\n\t\t\tvec4 normalColor0 = texture2D( tNormalMap0, ( vUv * scale ) + flow * flowMapOffset0 );\n\t\t\tvec4 normalColor1 = texture2D( tNormalMap1, ( vUv * scale ) + flow * flowMapOffset1 );\n\n\t\t\t// linear interpolate to get the final normal color\n\t\t\tfloat flowLerp = abs( halfCycle - flowMapOffset0 ) / halfCycle;\n\t\t\tvec4 normalColor = mix( normalColor0, normalColor1, flowLerp );\n\n\t\t\t// calculate normal vector\n\t\t\tvec3 normal = normalize( vec3( normalColor.r * 2.0 - 1.0, normalColor.b,  normalColor.g * 2.0 - 1.0 ) );\n\n\t\t\t// calculate the fresnel term to blend reflection and refraction maps\n\t\t\tfloat theta = max( dot( toEye, normal ), 0.0 );\n\t\t\tfloat reflectance = reflectivity + ( 1.0 - reflectivity ) * pow( ( 1.0 - theta ), 5.0 );\n\n\t\t\t// calculate final uv coords\n\t\t\tvec3 coord = vCoord.xyz / vCoord.w;\n\t\t\tvec2 uv = coord.xy + coord.z * normal.xz * 0.05;\n\n\t\t\tvec4 reflectColor = texture2D( tReflectionMap, vec2( 1.0 - uv.x, uv.y ) );\n\t\t\tvec4 refractColor = texture2D( tRefractionMap, uv );\n\n\t\t\t// multiply water color with the mix of both textures\n\t\t\tgl_FragColor = vec4( color, 1.0 ) * mix( refractColor, reflectColor, reflectance );\n\n\t\t\t#include <tonemapping_fragment>\n\t\t\t#include <encodings_fragment>\n\t\t\t#include <fog_fragment>\n\n\t\t}"},exports.Water2=o;

package/objects/Water2.js

@@ -1,104 +1,133 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const THREE = require("three");
-const Reflector = require("./Reflector.js");
-const Refractor = require("./Refractor.js");
-class Water2 extends THREE.Mesh {
+import { Mesh, Color, Vector2, LinearEncoding, TextureLoader, Matrix4, Clock, ShaderMaterial, UniformsUtils, UniformsLib, RepeatWrapping, Vector4 } from 'three';
+import { Reflector } from './Reflector.js';
+import { Refractor } from './Refractor.js';
+
+/**
+ * References:
+ *	http://www.valvesoftware.com/publications/2010/siggraph2010_vlachos_waterflow.pdf
+ * 	http://graphicsrunner.blogspot.de/2010/08/water-using-flow-maps.html
+ *
+ */
+
+class Water2 extends Mesh {
   constructor(geometry, options = {}) {
     super(geometry);
-    this.type = "Water";
+    this.type = 'Water';
     const scope = this;
-    const color = options.color !== void 0 ? new THREE.Color(options.color) : new THREE.Color(16777215);
+    const color = options.color !== undefined ? new Color(options.color) : new Color(0xffffff);
     const textureWidth = options.textureWidth || 512;
     const textureHeight = options.textureHeight || 512;
     const clipBias = options.clipBias || 0;
-    const flowDirection = options.flowDirection || new THREE.Vector2(1, 0);
+    const flowDirection = options.flowDirection || new Vector2(1, 0);
     const flowSpeed = options.flowSpeed || 0.03;
     const reflectivity = options.reflectivity || 0.02;
     const scale = options.scale || 1;
     const shader = options.shader || Water.WaterShader;
-    const encoding = options.encoding !== void 0 ? options.encoding : THREE.LinearEncoding;
-    const textureLoader = new THREE.TextureLoader();
-    const flowMap = options.flowMap || void 0;
-    const normalMap0 = options.normalMap0 || textureLoader.load("textures/water/Water_1_M_Normal.jpg");
-    const normalMap1 = options.normalMap1 || textureLoader.load("textures/water/Water_2_M_Normal.jpg");
-    const cycle = 0.15;
+    const encoding = options.encoding !== undefined ? options.encoding : LinearEncoding;
+    const textureLoader = new TextureLoader();
+    const flowMap = options.flowMap || undefined;
+    const normalMap0 = options.normalMap0 || textureLoader.load('textures/water/Water_1_M_Normal.jpg');
+    const normalMap1 = options.normalMap1 || textureLoader.load('textures/water/Water_2_M_Normal.jpg');
+    const cycle = 0.15; // a cycle of a flow map phase
+
     const halfCycle = cycle * 0.5;
-    const textureMatrix = new THREE.Matrix4();
-    const clock = new THREE.Clock();
-    if (Reflector.Reflector === void 0) {
-      console.error("THREE.Water: Required component Reflector not found.");
+    const textureMatrix = new Matrix4();
+    const clock = new Clock(); // internal components
+
+    if (Reflector === undefined) {
+      console.error('THREE.Water: Required component Reflector not found.');
       return;
     }
-    if (Refractor.Refractor === void 0) {
-      console.error("THREE.Water: Required component Refractor not found.");
+
+    if (Refractor === undefined) {
+      console.error('THREE.Water: Required component Refractor not found.');
       return;
     }
-    const reflector = new Reflector.Reflector(geometry, {
-      textureWidth,
-      textureHeight,
-      clipBias,
-      encoding
+
+    const reflector = new Reflector(geometry, {
+      textureWidth: textureWidth,
+      textureHeight: textureHeight,
+      clipBias: clipBias,
+      encoding: encoding
     });
-    const refractor = new Refractor.Refractor(geometry, {
-      textureWidth,
-      textureHeight,
-      clipBias,
-      encoding
+    const refractor = new Refractor(geometry, {
+      textureWidth: textureWidth,
+      textureHeight: textureHeight,
+      clipBias: clipBias,
+      encoding: encoding
     });
     reflector.matrixAutoUpdate = false;
-    refractor.matrixAutoUpdate = false;
-    this.material = new THREE.ShaderMaterial({
-      uniforms: THREE.UniformsUtils.merge([THREE.UniformsLib["fog"], shader.uniforms]),
+    refractor.matrixAutoUpdate = false; // material
+
+    this.material = new ShaderMaterial({
+      uniforms: UniformsUtils.merge([UniformsLib['fog'], shader.uniforms]),
       vertexShader: shader.vertexShader,
       fragmentShader: shader.fragmentShader,
       transparent: true,
       fog: true
     });
-    if (flowMap !== void 0) {
-      this.material.defines.USE_FLOWMAP = "";
-      this.material.uniforms["tFlowMap"] = {
-        type: "t",
+
+    if (flowMap !== undefined) {
+      this.material.defines.USE_FLOWMAP = '';
+      this.material.uniforms['tFlowMap'] = {
+        type: 't',
         value: flowMap
       };
     } else {
-      this.material.uniforms["flowDirection"] = {
-        type: "v2",
+      this.material.uniforms['flowDirection'] = {
+        type: 'v2',
         value: flowDirection
       };
-    }
-    normalMap0.wrapS = normalMap0.wrapT = THREE.RepeatWrapping;
-    normalMap1.wrapS = normalMap1.wrapT = THREE.RepeatWrapping;
-    this.material.uniforms["tReflectionMap"].value = reflector.getRenderTarget().texture;
-    this.material.uniforms["tRefractionMap"].value = refractor.getRenderTarget().texture;
-    this.material.uniforms["tNormalMap0"].value = normalMap0;
-    this.material.uniforms["tNormalMap1"].value = normalMap1;
-    this.material.uniforms["color"].value = color;
-    this.material.uniforms["reflectivity"].value = reflectivity;
-    this.material.uniforms["textureMatrix"].value = textureMatrix;
-    this.material.uniforms["config"].value.x = 0;
-    this.material.uniforms["config"].value.y = halfCycle;
-    this.material.uniforms["config"].value.z = halfCycle;
-    this.material.uniforms["config"].value.w = scale;
+    } // maps
+
+
+    normalMap0.wrapS = normalMap0.wrapT = RepeatWrapping;
+    normalMap1.wrapS = normalMap1.wrapT = RepeatWrapping;
+    this.material.uniforms['tReflectionMap'].value = reflector.getRenderTarget().texture;
+    this.material.uniforms['tRefractionMap'].value = refractor.getRenderTarget().texture;
+    this.material.uniforms['tNormalMap0'].value = normalMap0;
+    this.material.uniforms['tNormalMap1'].value = normalMap1; // water
+
+    this.material.uniforms['color'].value = color;
+    this.material.uniforms['reflectivity'].value = reflectivity;
+    this.material.uniforms['textureMatrix'].value = textureMatrix; // inital values
+
+    this.material.uniforms['config'].value.x = 0; // flowMapOffset0
+
+    this.material.uniforms['config'].value.y = halfCycle; // flowMapOffset1
+
+    this.material.uniforms['config'].value.z = halfCycle; // halfCycle
+
+    this.material.uniforms['config'].value.w = scale; // scale
+    // functions
+
     function updateTextureMatrix(camera) {
-      textureMatrix.set(0.5, 0, 0, 0.5, 0, 0.5, 0, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 1);
+      textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
       textureMatrix.multiply(camera.projectionMatrix);
       textureMatrix.multiply(camera.matrixWorldInverse);
       textureMatrix.multiply(scope.matrixWorld);
     }
+
     function updateFlow() {
       const delta = clock.getDelta();
-      const config = scope.material.uniforms["config"];
-      config.value.x += flowSpeed * delta;
-      config.value.y = config.value.x + halfCycle;
+      const config = scope.material.uniforms['config'];
+      config.value.x += flowSpeed * delta; // flowMapOffset0
+
+      config.value.y = config.value.x + halfCycle; // flowMapOffset1
+      // Important: The distance between offsets should be always the value of "halfCycle".
+      // Moreover, both offsets should be in the range of [ 0, cycle ].
+      // This approach ensures a smooth water flow and avoids "reset" effects.
+
       if (config.value.x >= cycle) {
         config.value.x = 0;
         config.value.y = halfCycle;
       } else if (config.value.y >= cycle) {
         config.value.y = config.value.y - cycle;
       }
-    }
-    this.onBeforeRender = function(renderer, scene, camera) {
+    } //
+
+
+    this.onBeforeRender = function (renderer, scene, camera) {
       updateTextureMatrix(camera);
       updateFlow();
       scope.visible = false;
@@ -109,44 +138,48 @@ class Water2 extends THREE.Mesh {
       scope.visible = true;
     };
   }
+
 }
+
 Water2.prototype.isWater = true;
 Water2.WaterShader = {
   uniforms: {
     color: {
-      type: "c",
+      type: 'c',
       value: null
     },
     reflectivity: {
-      type: "f",
+      type: 'f',
       value: 0
     },
     tReflectionMap: {
-      type: "t",
+      type: 't',
       value: null
     },
     tRefractionMap: {
-      type: "t",
+      type: 't',
       value: null
     },
     tNormalMap0: {
-      type: "t",
+      type: 't',
       value: null
     },
     tNormalMap1: {
-      type: "t",
+      type: 't',
       value: null
     },
     textureMatrix: {
-      type: "m4",
+      type: 'm4',
       value: null
     },
     config: {
-      type: "v4",
-      value: new THREE.Vector4()
+      type: 'v4',
+      value: new Vector4()
     }
   },
-  vertexShader: `
+  vertexShader:
+  /* glsl */
+  `
 
 		#include <common>
 		#include <fog_pars_vertex>
@@ -173,7 +206,9 @@ Water2.WaterShader = {
 			#include <fog_vertex>
 
 		}`,
-  fragmentShader: `
+  fragmentShader:
+  /* glsl */
+  `
 
 		#include <common>
 		#include <fog_pars_fragment>
@@ -249,4 +284,5 @@ Water2.WaterShader = {
 
 		}`
 };
-exports.Water2 = Water2;
+
+export { Water2 };

package/offscreen/jank.cjs.js

@@ -0,0 +1 @@
+"use strict";var t=null,e=null;function n(){var t=0;for(let e=0;e<1e7;e++)t+=Math.random();e.textContent=t}module.exports=function(){var l=document.getElementById("button");l.addEventListener("click",(function(){null===t?(t=setInterval(n,1e3/60),l.textContent="STOP JANK"):(clearInterval(t),t=null,l.textContent="START JANK",e.textContent="")})),e=document.getElementById("result")};

package/offscreen/jank.js

@@ -1,26 +1,30 @@
-"use strict";
 var interval = null;
 var result = null;
+
 function initJank() {
-  var button = document.getElementById("button");
-  button.addEventListener("click", function() {
+  var button = document.getElementById('button');
+  button.addEventListener('click', function () {
     if (interval === null) {
-      interval = setInterval(jank, 1e3 / 60);
-      button.textContent = "STOP JANK";
+      interval = setInterval(jank, 1000 / 60);
+      button.textContent = 'STOP JANK';
     } else {
       clearInterval(interval);
       interval = null;
-      button.textContent = "START JANK";
-      result.textContent = "";
+      button.textContent = 'START JANK';
+      result.textContent = '';
     }
   });
-  result = document.getElementById("result");
+  result = document.getElementById('result');
 }
+
 function jank() {
   var number = 0;
-  for (let i = 0; i < 1e7; i++) {
+
+  for (let i = 0; i < 10000000; i++) {
     number += Math.random();
   }
+
   result.textContent = number;
 }
-module.exports = initJank;
+
+export default initJank;

package/offscreen/offscreen.cjs.js

@@ -0,0 +1 @@
+"use strict";var e=require("./scene.cjs.js");require("three"),self.onmessage=function(r){var a=r.data;e(a.drawingSurface,a.width,a.height,a.pixelRatio,a.path)};

package/offscreen/offscreen.js

@@ -1,6 +1,7 @@
-"use strict";
-const scene = require("./scene.js");
-self.onmessage = function(message) {
+import init from './scene.js';
+import 'three';
+
+self.onmessage = function (message) {
   var data = message.data;
-  scene(data.drawingSurface, data.width, data.height, data.pixelRatio, data.path);
+  init(data.drawingSurface, data.width, data.height, data.pixelRatio, data.path);
 };

package/offscreen/scene.cjs.js

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var t,a,r,n,o=e(require("three"));function i(){n.rotation.y=-Date.now()/4e3,r.render(a,t),self.requestAnimationFrame&&self.requestAnimationFrame(i)}var c=1;function s(){var e=1e4*Math.sin(c++);return e-Math.floor(e)}module.exports=function(e,c,l,p,u){(t=new o.PerspectiveCamera(40,c/l,1,1e3)).position.z=200,(a=new o.Scene).fog=new o.Fog(4473958,100,400),a.background=new o.Color(4473958),n=new o.Group,a.add(n);var f=(new o.ImageBitmapLoader).setPath(u);f.setOptions({imageOrientation:"flipY"}),f.load("textures/matcaps/matcap-porcelain-white.jpg",(function(t){var a=new o.CanvasTexture(t),u=new o.IcosahedronGeometry(5,8),f=[new o.MeshMatcapMaterial({color:11150559,matcap:a}),new o.MeshMatcapMaterial({color:6315408,matcap:a}),new o.MeshMatcapMaterial({color:14699071,matcap:a}),new o.MeshMatcapMaterial({color:14877782,matcap:a})];for(let e=0;e<100;e++){var m=f[e%f.length],w=new o.Mesh(u,m);w.position.x=200*s()-100,w.position.y=200*s()-100,w.position.z=200*s()-100,w.scale.setScalar(s()+1),n.add(w)}(r=new o.WebGLRenderer({antialias:!0,canvas:e})).setPixelRatio(p),r.setSize(c,l,!1),i()}))};