added post cartoon v

Author: spite

post-cartoon-iv/post.js

@@ -7,8 +7,11 @@ import {
   RepeatWrapping,
   HalfFloatType,
   RGBAFormat,
+  UnsignedByteType,
+  Vector2,
 } from "../third_party/three.module.js";
 import { ShaderPass } from "../js/ShaderPass.js";
+import { ShaderPingPongPass } from "../js/ShaderPingPongPass.js";
 import { getFBO } from "../js/FBO.js";
 import { shader as orthoVs } from "../shaders/ortho-vs.js";
 import { shader as sobel } from "../shaders/sobel.js";
@@ -17,6 +20,7 @@ import { shader as luma } from "../shaders/luma.js";
 import { generateParams as generatePaperParams } from "../js/paper.js";
 import { shader as darken } from "../shaders/blend-darken.js";
 import { shader as screen } from "../shaders/blend-screen.js";
+import { blur5 } from "../shaders/fast-separable-gaussian-blur.js";
 
 import {
   Material as ColorMaterial,
@@ -30,6 +34,23 @@ const loader = new TextureLoader();
 const noiseTexture = loader.load("../assets/noise1.png");
 noiseTexture.wrapS = noiseTexture.wrapT = RepeatWrapping;
 
+const blurFragmentShader = `#version 300 es
+precision highp float;
+
+uniform sampler2D inputTexture;
+uniform vec2 direction;
+
+${blur5}
+
+in vec2 vUv;
+out vec4 fragColor;
+
+void main() {
+  vec2 size = vec2(textureSize(inputTexture, 0));
+  fragColor = blur5(inputTexture, vUv, size, direction);
+}
+`;
+
 const componentFragmentShader = `#version 300 es
 precision highp float;
 
@@ -288,7 +309,7 @@ void main() {
   fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., border*.25 * shade);
   fragColor.rgb = blendDarken(fragColor.rgb, darkInk/255., darkIntensity * (1.-shadeHatch));
   fragColor.rgb = blendScreen(fragColor.rgb, brightInk/255., brightIntensity * whiteHatch);
-    
+  
   fragColor.a = 1.;
 }
 `;
@@ -302,14 +323,15 @@ class Post {
     this.params = {
       roughness: 0.2,
       metalness: 0.1,
-      colorScale: 0.25,
+      colorScale: 0.07,
       colorOffset: 0.25,
       colorWidth: 0.5,
       scale: 0.32,
       angle: 0,
       thickness: 0.7,
       noisiness: 0.003,
       contour: 2,
+      blur: 2,
       border: 0.5,
       fill: 1,
       stroke: 1,
@@ -318,7 +340,7 @@ class Post {
       yellow: 0.6,
       black: 0.1,
       darkIntensity: 0.75,
-      brightIntensity: 0.25,
+      brightIntensity: 1,
       darkInk: new Color(30, 30, 30),
       brightInk: new Color(230, 230, 230),
     };
@@ -336,6 +358,7 @@ class Post {
         thickness: { value: this.params.thickness },
         contour: { value: this.params.contour },
         border: { value: this.params.border },
+        blur: { value: this.params.blur },
         stroke: { value: this.params.stroke },
         fill: { value: this.params.fill },
         darkIntensity: { value: this.params.darkIntensity },
@@ -346,10 +369,26 @@ class Post {
       vertexShader: orthoVs,
       fragmentShader,
     });
+    const blurShader = new RawShaderMaterial({
+      uniforms: {
+        inputTexture: { value: this.colorFBO.texture },
+        direction: { value: new Vector2() },
+      },
+      vertexShader: orthoVs,
+      fragmentShader: blurFragmentShader,
+    });
+    this.blurPass = new ShaderPingPongPass(renderer, blurShader, {
+      format: RGBAFormat,
+      type: UnsignedByteType,
+    });
+    this.blurShadePass = new ShaderPingPongPass(renderer, blurShader, {
+      format: RGBAFormat,
+      type: UnsignedByteType,
+    });
     this.renderPass = new ShaderPass(renderer, shader);
     const componentShader = new RawShaderMaterial({
       uniforms: {
-        colorTexture: { value: this.colorFBO.texture },
+        colorTexture: { value: null },
         cyan: { value: this.params.cyan },
         magenta: { value: this.params.magenta },
         yellow: { value: this.params.yellow },
@@ -371,6 +410,8 @@ class Post {
     this.shadeFBO.setSize(w, h);
     this.renderPass.setSize(w, h);
     this.componentPass.setSize(w, h);
+    this.blurPass.setSize(w, h);
+    this.blurShadePass.setSize(w, h);
   }
 
   render(scene, camera) {
@@ -390,6 +431,46 @@ class Post {
     this.renderer.setRenderTarget(null);
     scene.overrideMaterial = null;
 
+    this.blurPass.shader.uniforms.inputTexture.value = this.colorFBO.texture;
+    for (let i = 0; i < 6; i++) {
+      if (i < this.params.blur) {
+        var d = (i + 1) * 2;
+        this.blurPass.shader.uniforms.direction.value.set(d, 0);
+        this.blurPass.render();
+        this.blurPass.shader.uniforms.inputTexture.value = this.blurPass.fbos[
+          this.blurPass.currentFBO
+        ].texture;
+        this.blurPass.shader.uniforms.direction.value.set(0, d);
+        this.blurPass.render();
+        this.blurPass.shader.uniforms.inputTexture.value = this.blurPass.fbos[
+          this.blurPass.currentFBO
+        ].texture;
+      }
+    }
+    this.componentPass.shader.uniforms.colorTexture.value = this.blurPass.shader.uniforms.inputTexture.value = this.blurPass.fbos[
+      this.blurPass.currentFBO
+    ].texture;
+
+    this.blurShadePass.shader.uniforms.inputTexture.value = this.shadeFBO.texture;
+    for (let i = 0; i < 6; i++) {
+      if (i < this.params.blur) {
+        var d = (i + 1) * 2;
+        this.blurShadePass.shader.uniforms.direction.value.set(d, 0);
+        this.blurShadePass.render();
+        this.blurShadePass.shader.uniforms.inputTexture.value = this.blurShadePass.fbos[
+          this.blurShadePass.currentFBO
+        ].texture;
+        this.blurShadePass.shader.uniforms.direction.value.set(0, d);
+        this.blurShadePass.render();
+        this.blurShadePass.shader.uniforms.inputTexture.value = this.blurShadePass.fbos[
+          this.blurShadePass.currentFBO
+        ].texture;
+      }
+    }
+    this.renderPass.shader.uniforms.shadeTexture.value = this.blurShadePass.shader.uniforms.inputTexture.value = this.blurShadePass.fbos[
+      this.blurShadePass.currentFBO
+    ].texture;
+
     this.componentPass.render();
     this.renderPass.render(true);
   }
@@ -411,11 +492,7 @@ class Post {
       .onChange(async (v) => {
         colorMat.uniforms.width.value = v;
       });
-    // controllers["metalness"] = gui
-    //   .add(this.params, "metalness", 0., 1)
-    //   .onChange(async (v) => {
-    //     this.renderPass.shader.uniforms.metalness.value = v;
-    //   });
+
     controllers["scale"] = gui
       .add(this.params, "scale", 0.1, 1)
       .onChange(async (v) => {
@@ -426,6 +503,7 @@ class Post {
       .onChange(async (v) => {
         this.renderPass.shader.uniforms.thickness.value = v;
       });
+    controllers["blur"] = gui.add(this.params, "blur", 0, 7);
     controllers["contour"] = gui
       .add(this.params, "contour", 0, 5)
       .onChange(async (v) => {

post-cartoon-v/ColorMaterial.js

@@ -0,0 +1,191 @@
+import {
+  MeshBasicMaterial,
+  Vector2,
+  Color,
+} from "../third_party/three.module.js";
+
+class Material extends MeshBasicMaterial {
+  constructor(options) {
+    super(options);
+
+    this.params = {
+      scale: 0.25,
+      offset: 0.25,
+      width: 0.5,
+    };
+
+    this.uniforms = {
+      resolution: { value: new Vector2(1, 1) },
+      paperTexture: { value: null },
+      scale: { value: this.params.scale },
+      offset: { value: this.params.offset },
+      width: { value: this.params.width },
+    };
+
+    this.onBeforeCompile = (shader, renderer) => {
+      for (const uniformName of Object.keys(this.uniforms)) {
+        shader.uniforms[uniformName] = this.uniforms[uniformName];
+      }
+
+      shader.vertexShader = shader.vertexShader.replace(
+        `#include <common>`,
+        `#include <common>
+        out vec2 vCoords;
+        out vec3 vPosition;
+        out vec4 vWorldPosition;`
+      );
+      shader.vertexShader = shader.vertexShader.replace(
+        `#include <uv_vertex>`,
+        `#include <uv_vertex>
+        vCoords = uv;
+        vPosition = position;
+        vWorldPosition = modelMatrix * vec4(position, 1.);// + vec4(normal.xyz, 0.);`
+      );
+
+      shader.fragmentShader = shader.fragmentShader.replace(
+        `#include <common>`,
+        `#include <common>
+        uniform vec2 resolution;
+        uniform sampler2D paperTexture;
+        uniform float scale;
+        uniform float offset;
+        uniform float width;
+
+        in vec2 vCoords;
+        in vec3 vPosition;
+        in vec4 vWorldPosition;
+        #define TAU 6.28318530718
+
+        //	Classic Perlin 3D Noise 
+        //	by Stefan Gustavson
+        //
+        vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+        vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+        vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+        
+        float cnoise(vec3 P){
+          vec3 Pi0 = floor(P); // Integer part for indexing
+          vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
+          Pi0 = mod(Pi0, 289.0);
+          Pi1 = mod(Pi1, 289.0);
+          vec3 Pf0 = fract(P); // Fractional part for interpolation
+          vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+          vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+          vec4 iy = vec4(Pi0.yy, Pi1.yy);
+          vec4 iz0 = Pi0.zzzz;
+          vec4 iz1 = Pi1.zzzz;
+        
+          vec4 ixy = permute(permute(ix) + iy);
+          vec4 ixy0 = permute(ixy + iz0);
+          vec4 ixy1 = permute(ixy + iz1);
+        
+          vec4 gx0 = ixy0 / 7.0;
+          vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+          gx0 = fract(gx0);
+          vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+          vec4 sz0 = step(gz0, vec4(0.0));
+          gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+          gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+        
+          vec4 gx1 = ixy1 / 7.0;
+          vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+          gx1 = fract(gx1);
+          vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+          vec4 sz1 = step(gz1, vec4(0.0));
+          gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+          gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+        
+          vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+          vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+          vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+          vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+          vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+          vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+          vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+          vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+        
+          vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+          g000 *= norm0.x;
+          g010 *= norm0.y;
+          g100 *= norm0.z;
+          g110 *= norm0.w;
+          vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+          g001 *= norm1.x;
+          g011 *= norm1.y;
+          g101 *= norm1.z;
+          g111 *= norm1.w;
+        
+          float n000 = dot(g000, Pf0);
+          float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+          float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+          float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+          float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+          float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+          float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+          float n111 = dot(g111, Pf1);
+        
+          vec3 fade_xyz = fade(Pf0);
+          vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+          vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+          float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
+          return 2.2 * n_xyz;
+        }
+
+        // from https://www.shadertoy.com/view/ltfXR4
+        vec3 catmul_rom(vec3 p0, vec3 p1, vec3 p2, vec3 p3, float t)
+        {
+            return 0.5 * (
+                (2.0 * p1) +
+                (-p0 + p2) * t +
+                (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * t * t +
+                (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * t * t * t);
+        }
+
+        vec3 color_spline(float t, bool wrap)
+        {
+            t = clamp(t, 0.0, 1.0);
+            
+            const int s = 7;
+            
+            vec3 p[s];
+            p[0] = vec3(87,24,69) / 255.0;
+            p[1] = vec3(144,13,62) / 255.0;
+            p[2] = vec3(200,0,57) / 255.0;
+            p[3] = vec3(255,86,51) / 255.0;
+            p[4] = vec3(255,195,0) / 255.0;
+            
+            p[s-2] = p[0];
+            p[s-1] = p[1];
+            
+            float m = wrap ? float(s - 2) : float(s - 3);
+            float d = m * t;
+            
+            int b = int(d);
+            float dt = d - floor(d);
+            
+            return catmul_rom(p[((b-1)+s)%s], p[b], p[b+1], p[(b+2)%s], dt);
+        }
+
+        `
+      );
+      shader.fragmentShader = shader.fragmentShader.replace(
+        "#include <dithering_fragment>",
+        `#include <dithering_fragment>
+        float n = smoothstep(.5-width, .5+width, .5 + .5 * cnoise(scale*vWorldPosition.xyz));
+        gl_FragColor.rgb *= color_spline(n, true);
+        gl_FragColor.rgb += offset;
+        `
+      );
+    };
+  }
+}
+
+function generateParams(gui, material) {
+  const params = material.params;
+  gui
+    .add(params, "scale", 0.1, 5)
+    .onChange((v) => (material.uniforms.scale.value = v));
+  //gui.add(params, "offset", 0, 1).onChange((v) => (material.metalness = v));
+}
+
+export { Material, generateParams };

post-cartoon-v/Material.js

@@ -0,0 +1,15 @@
+import {
+  MeshStandardMaterial,
+  Vector2,
+  Color,
+} from "../third_party/three.module.js";
+
+const Material = MeshStandardMaterial;
+
+function generateParams(gui, material) {
+  const params = material;
+  gui.add(params, "roughness", 0, 1).onChange((v) => (material.roughness = v));
+  gui.add(params, "metalness", 0, 1).onChange((v) => (material.metalness = v));
+}
+
+export { Material, generateParams };