three-stdlib 2.8.12 → 2.9.0

package/index.d.ts

@@ -157,6 +157,7 @@ export * from './postprocessing/TAARenderPass';
 export * from './postprocessing/ShaderPass';
 export * from './postprocessing/SSAARenderPass';
 export * from './postprocessing/RenderPass';
+export * from './postprocessing/RenderPixelatedPass';
 export * from './postprocessing/BloomPass';
 export * from './webxr/ARButton';
 export * from './webxr/OculusHandModel';

package/index.js

@@ -103,6 +103,7 @@ export { TAARenderPass } from './postprocessing/TAARenderPass.js';
 export { ShaderPass } from './postprocessing/ShaderPass.js';
 export { SSAARenderPass } from './postprocessing/SSAARenderPass.js';
 export { RenderPass } from './postprocessing/RenderPass.js';
+export { RenderPixelatedPass } from './postprocessing/RenderPixelatedPass.js';
 export { BloomPass } from './postprocessing/BloomPass.js';
 export { ARButton } from './webxr/ARButton.js';
 export { OculusHandModel } from './webxr/OculusHandModel.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-stdlib",
-  "version": "2.8.12",
+  "version": "2.9.0",
   "private": false,
   "description": "stand-alone library of threejs examples",
   "main": "index.cjs.js",

package/postprocessing/RenderPixelatedPass.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("three"),e=require("./Pass.cjs.js");require("@babel/runtime/helpers/defineProperty");class n extends e.Pass{constructor(n,i,a,o,l={}){var s,d;super(),this.pixelSize=i,this.resolution=new t.Vector2,this.renderResolution=new t.Vector2,this.setSize(n.x,n.y),this.fsQuad=new e.FullScreenQuad(this.material()),this.scene=a,this.camera=o,this.normalEdgeStrength=null!=(s=l.normalEdgeStrength)?s:.3,this.depthEdgeStrength=null!=(d=l.depthEdgeStrength)?d:.4,this.rgbRenderTarget=r(this.renderResolution,t.RGBAFormat,!0),this.normalRenderTarget=r(this.renderResolution,t.RGBFormat,!1),this.normalMaterial=new t.MeshNormalMaterial}dispose(){this.rgbRenderTarget.dispose(),this.normalRenderTarget.dispose(),this.fsQuad.dispose()}setSize(t,e){var n,r,i;this.resolution.set(t,e),this.renderResolution.set(t/this.pixelSize|0,e/this.pixelSize|0);const{x:a,y:o}=this.renderResolution;null===(n=this.rgbRenderTarget)||void 0===n||n.setSize(a,o),null===(r=this.normalRenderTarget)||void 0===r||r.setSize(a,o),null===(i=this.fsQuad)||void 0===i||i.material.uniforms.resolution.value.set(a,o,1/a,1/o)}setPixelSize(t){this.pixelSize=t,this.setSize(this.resolution.x,this.resolution.y)}render(t,e){const n=this.fsQuad.material.uniforms;n.normalEdgeStrength.value=this.normalEdgeStrength,n.depthEdgeStrength.value=this.depthEdgeStrength,t.setRenderTarget(this.rgbRenderTarget),t.render(this.scene,this.camera);const r=this.scene.overrideMaterial;t.setRenderTarget(this.normalRenderTarget),this.scene.overrideMaterial=this.normalMaterial,t.render(this.scene,this.camera),this.scene.overrideMaterial=r,n.tDiffuse.value=this.rgbRenderTarget.texture,n.tDepth.value=this.rgbRenderTarget.depthTexture,n.tNormal.value=this.normalRenderTarget.texture,this.renderToScreen?t.setRenderTarget(null):(t.setRenderTarget(e),this.clear&&t.clear()),this.fsQuad.render(t)}material(){return new t.ShaderMaterial({uniforms:{tDiffuse:{value:null},tDepth:{value:null},tNormal:{value:null},resolution:{value:new t.Vector4(this.renderResolution.x,this.renderResolution.y,1/this.renderResolution.x,1/this.renderResolution.y)},normalEdgeStrength:{value:0},depthEdgeStrength:{value:0}},vertexShader:"\n\t\t\t\tvarying vec2 vUv;\n\n\t\t\t\tvoid main() {\n\n\t\t\t\t\tvUv = uv;\n\t\t\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n\t\t\t\t}\n\t\t\t\t",fragmentShader:"\n\t\t\t\tuniform sampler2D tDiffuse;\n\t\t\t\tuniform sampler2D tDepth;\n\t\t\t\tuniform sampler2D tNormal;\n\t\t\t\tuniform vec4 resolution;\n\t\t\t\tuniform float normalEdgeStrength;\n\t\t\t\tuniform float depthEdgeStrength;\n\t\t\t\tvarying vec2 vUv;\n\n\t\t\t\tfloat getDepth(int x, int y) {\n\n\t\t\t\t\treturn texture2D( tDepth, vUv + vec2(x, y) * resolution.zw ).r;\n\n\t\t\t\t}\n\n\t\t\t\tvec3 getNormal(int x, int y) {\n\n\t\t\t\t\treturn texture2D( tNormal, vUv + vec2(x, y) * resolution.zw ).rgb * 2.0 - 1.0;\n\n\t\t\t\t}\n\n\t\t\t\tfloat depthEdgeIndicator(float depth, vec3 normal) {\n\n\t\t\t\t\tfloat diff = 0.0;\n\t\t\t\t\tdiff += clamp(getDepth(1, 0) - depth, 0.0, 1.0);\n\t\t\t\t\tdiff += clamp(getDepth(-1, 0) - depth, 0.0, 1.0);\n\t\t\t\t\tdiff += clamp(getDepth(0, 1) - depth, 0.0, 1.0);\n\t\t\t\t\tdiff += clamp(getDepth(0, -1) - depth, 0.0, 1.0);\n\t\t\t\t\treturn floor(smoothstep(0.01, 0.02, diff) * 2.) / 2.;\n\n\t\t\t\t}\n\n\t\t\t\tfloat neighborNormalEdgeIndicator(int x, int y, float depth, vec3 normal) {\n\n\t\t\t\t\tfloat depthDiff = getDepth(x, y) - depth;\n\t\t\t\t\tvec3 neighborNormal = getNormal(x, y);\n\t\t\t\t\t\n\t\t\t\t\t// Edge pixels should yield to faces who's normals are closer to the bias normal.\n\t\t\t\t\tvec3 normalEdgeBias = vec3(1., 1., 1.); // This should probably be a parameter.\n\t\t\t\t\tfloat normalDiff = dot(normal - neighborNormal, normalEdgeBias);\n\t\t\t\t\tfloat normalIndicator = clamp(smoothstep(-.01, .01, normalDiff), 0.0, 1.0);\n\t\t\t\t\t\n\t\t\t\t\t// Only the shallower pixel should detect the normal edge.\n\t\t\t\t\tfloat depthIndicator = clamp(sign(depthDiff * .25 + .0025), 0.0, 1.0);\n\n\t\t\t\t\treturn (1.0 - dot(normal, neighborNormal)) * depthIndicator * normalIndicator;\n\n\t\t\t\t}\n\n\t\t\t\tfloat normalEdgeIndicator(float depth, vec3 normal) {\n\t\t\t\t\t\n\t\t\t\t\tfloat indicator = 0.0;\n\n\t\t\t\t\tindicator += neighborNormalEdgeIndicator(0, -1, depth, normal);\n\t\t\t\t\tindicator += neighborNormalEdgeIndicator(0, 1, depth, normal);\n\t\t\t\t\tindicator += neighborNormalEdgeIndicator(-1, 0, depth, normal);\n\t\t\t\t\tindicator += neighborNormalEdgeIndicator(1, 0, depth, normal);\n\n\t\t\t\t\treturn step(0.1, indicator);\n\n\t\t\t\t}\n\n\t\t\t\tvoid main() {\n\n\t\t\t\t\tvec4 texel = texture2D( tDiffuse, vUv );\n\n\t\t\t\t\tfloat depth = 0.0;\n\t\t\t\t\tvec3 normal = vec3(0.0);\n\n\t\t\t\t\tif (depthEdgeStrength > 0.0 || normalEdgeStrength > 0.0) {\n\n\t\t\t\t\t\tdepth = getDepth(0, 0);\n\t\t\t\t\t\tnormal = getNormal(0, 0);\n\n\t\t\t\t\t}\n\n\t\t\t\t\tfloat dei = 0.0;\n\t\t\t\t\tif (depthEdgeStrength > 0.0) \n\t\t\t\t\t\tdei = depthEdgeIndicator(depth, normal);\n\n\t\t\t\t\tfloat nei = 0.0; \n\t\t\t\t\tif (normalEdgeStrength > 0.0) \n\t\t\t\t\t\tnei = normalEdgeIndicator(depth, normal);\n\n\t\t\t\t\tfloat Strength = dei > 0.0 ? (1.0 - depthEdgeStrength * dei) : (1.0 + normalEdgeStrength * nei);\n\n\t\t\t\t\tgl_FragColor = texel * Strength;\n\n\t\t\t\t}\n\t\t\t\t"})}}function r(e,n,r){const i=new t.WebGLRenderTarget(e.x,e.y,r?{depthTexture:new t.DepthTexture(e.x,e.y),depthBuffer:!0}:void 0);return i.texture.format=n,i.texture.minFilter=t.NearestFilter,i.texture.magFilter=t.NearestFilter,i.texture.generateMipmaps=!1,i.stencilBuffer=!1,i}exports.RenderPixelatedPass=n;

package/postprocessing/RenderPixelatedPass.js

@@ -0,0 +1,213 @@
+import { Vector2, MeshNormalMaterial, ShaderMaterial, Vector4, WebGLRenderTarget, DepthTexture, NearestFilter, RGBAFormat, RGBFormat } from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+
+class RenderPixelatedPass extends Pass {
+  constructor(resolution, pixelSize, scene, camera, options = {}) {
+    var _options$normalEdgeSt, _options$depthEdgeStr;
+
+    super();
+    this.pixelSize = pixelSize;
+    this.resolution = new Vector2();
+    this.renderResolution = new Vector2();
+    this.setSize(resolution.x, resolution.y);
+    this.fsQuad = new FullScreenQuad(this.material());
+    this.scene = scene;
+    this.camera = camera;
+    this.normalEdgeStrength = (_options$normalEdgeSt = options.normalEdgeStrength) != null ? _options$normalEdgeSt : 0.3;
+    this.depthEdgeStrength = (_options$depthEdgeStr = options.depthEdgeStrength) != null ? _options$depthEdgeStr : 0.4;
+    this.rgbRenderTarget = pixelRenderTarget(this.renderResolution, RGBAFormat, true);
+    this.normalRenderTarget = pixelRenderTarget(this.renderResolution, RGBFormat, false);
+    this.normalMaterial = new MeshNormalMaterial();
+  }
+
+  dispose() {
+    this.rgbRenderTarget.dispose();
+    this.normalRenderTarget.dispose();
+    this.fsQuad.dispose();
+  }
+
+  setSize(width, height) {
+    var _this$rgbRenderTarget, _this$normalRenderTar, _this$fsQuad;
+
+    this.resolution.set(width, height);
+    this.renderResolution.set(width / this.pixelSize | 0, height / this.pixelSize | 0);
+    const {
+      x,
+      y
+    } = this.renderResolution;
+    (_this$rgbRenderTarget = this.rgbRenderTarget) === null || _this$rgbRenderTarget === void 0 ? void 0 : _this$rgbRenderTarget.setSize(x, y);
+    (_this$normalRenderTar = this.normalRenderTarget) === null || _this$normalRenderTar === void 0 ? void 0 : _this$normalRenderTar.setSize(x, y);
+    (_this$fsQuad = this.fsQuad) === null || _this$fsQuad === void 0 ? void 0 : _this$fsQuad.material.uniforms.resolution.value.set(x, y, 1 / x, 1 / y);
+  }
+
+  setPixelSize(pixelSize) {
+    this.pixelSize = pixelSize;
+    this.setSize(this.resolution.x, this.resolution.y);
+  }
+
+  render(renderer, writeBuffer) {
+    const uniforms = this.fsQuad.material.uniforms;
+    uniforms.normalEdgeStrength.value = this.normalEdgeStrength;
+    uniforms.depthEdgeStrength.value = this.depthEdgeStrength;
+    renderer.setRenderTarget(this.rgbRenderTarget);
+    renderer.render(this.scene, this.camera);
+    const overrideMaterial_old = this.scene.overrideMaterial;
+    renderer.setRenderTarget(this.normalRenderTarget);
+    this.scene.overrideMaterial = this.normalMaterial;
+    renderer.render(this.scene, this.camera);
+    this.scene.overrideMaterial = overrideMaterial_old;
+    uniforms.tDiffuse.value = this.rgbRenderTarget.texture;
+    uniforms.tDepth.value = this.rgbRenderTarget.depthTexture;
+    uniforms.tNormal.value = this.normalRenderTarget.texture;
+
+    if (this.renderToScreen) {
+      renderer.setRenderTarget(null);
+    } else {
+      renderer.setRenderTarget(writeBuffer);
+      if (this.clear) renderer.clear();
+    }
+
+    this.fsQuad.render(renderer);
+  }
+
+  material() {
+    return new ShaderMaterial({
+      uniforms: {
+        tDiffuse: {
+          value: null
+        },
+        tDepth: {
+          value: null
+        },
+        tNormal: {
+          value: null
+        },
+        resolution: {
+          value: new Vector4(this.renderResolution.x, this.renderResolution.y, 1 / this.renderResolution.x, 1 / this.renderResolution.y)
+        },
+        normalEdgeStrength: {
+          value: 0
+        },
+        depthEdgeStrength: {
+          value: 0
+        }
+      },
+      vertexShader: `
+				varying vec2 vUv;
+
+				void main() {
+
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+				}
+				`,
+      fragmentShader: `
+				uniform sampler2D tDiffuse;
+				uniform sampler2D tDepth;
+				uniform sampler2D tNormal;
+				uniform vec4 resolution;
+				uniform float normalEdgeStrength;
+				uniform float depthEdgeStrength;
+				varying vec2 vUv;
+
+				float getDepth(int x, int y) {
+
+					return texture2D( tDepth, vUv + vec2(x, y) * resolution.zw ).r;
+
+				}
+
+				vec3 getNormal(int x, int y) {
+
+					return texture2D( tNormal, vUv + vec2(x, y) * resolution.zw ).rgb * 2.0 - 1.0;
+
+				}
+
+				float depthEdgeIndicator(float depth, vec3 normal) {
+
+					float diff = 0.0;
+					diff += clamp(getDepth(1, 0) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(-1, 0) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(0, 1) - depth, 0.0, 1.0);
+					diff += clamp(getDepth(0, -1) - depth, 0.0, 1.0);
+					return floor(smoothstep(0.01, 0.02, diff) * 2.) / 2.;
+
+				}
+
+				float neighborNormalEdgeIndicator(int x, int y, float depth, vec3 normal) {
+
+					float depthDiff = getDepth(x, y) - depth;
+					vec3 neighborNormal = getNormal(x, y);
+					
+					// Edge pixels should yield to faces who's normals are closer to the bias normal.
+					vec3 normalEdgeBias = vec3(1., 1., 1.); // This should probably be a parameter.
+					float normalDiff = dot(normal - neighborNormal, normalEdgeBias);
+					float normalIndicator = clamp(smoothstep(-.01, .01, normalDiff), 0.0, 1.0);
+					
+					// Only the shallower pixel should detect the normal edge.
+					float depthIndicator = clamp(sign(depthDiff * .25 + .0025), 0.0, 1.0);
+
+					return (1.0 - dot(normal, neighborNormal)) * depthIndicator * normalIndicator;
+
+				}
+
+				float normalEdgeIndicator(float depth, vec3 normal) {
+					
+					float indicator = 0.0;
+
+					indicator += neighborNormalEdgeIndicator(0, -1, depth, normal);
+					indicator += neighborNormalEdgeIndicator(0, 1, depth, normal);
+					indicator += neighborNormalEdgeIndicator(-1, 0, depth, normal);
+					indicator += neighborNormalEdgeIndicator(1, 0, depth, normal);
+
+					return step(0.1, indicator);
+
+				}
+
+				void main() {
+
+					vec4 texel = texture2D( tDiffuse, vUv );
+
+					float depth = 0.0;
+					vec3 normal = vec3(0.0);
+
+					if (depthEdgeStrength > 0.0 || normalEdgeStrength > 0.0) {
+
+						depth = getDepth(0, 0);
+						normal = getNormal(0, 0);
+
+					}
+
+					float dei = 0.0;
+					if (depthEdgeStrength > 0.0) 
+						dei = depthEdgeIndicator(depth, normal);
+
+					float nei = 0.0; 
+					if (normalEdgeStrength > 0.0) 
+						nei = normalEdgeIndicator(depth, normal);
+
+					float Strength = dei > 0.0 ? (1.0 - depthEdgeStrength * dei) : (1.0 + normalEdgeStrength * nei);
+
+					gl_FragColor = texel * Strength;
+
+				}
+				`
+    });
+  }
+
+}
+
+function pixelRenderTarget(resolution, pixelFormat, useDepthTexture) {
+  const renderTarget = new WebGLRenderTarget(resolution.x, resolution.y, !useDepthTexture ? undefined : {
+    depthTexture: new DepthTexture(resolution.x, resolution.y),
+    depthBuffer: true
+  });
+  renderTarget.texture.format = pixelFormat;
+  renderTarget.texture.minFilter = NearestFilter;
+  renderTarget.texture.magFilter = NearestFilter;
+  renderTarget.texture.generateMipmaps = false;
+  renderTarget.stencilBuffer = false;
+  return renderTarget;
+}
+
+export { RenderPixelatedPass };