added post cmyk halftone

Author: spite

post-cmyk-halftone-i/Material.js

@@ -0,0 +1,195 @@
+import {
+  MeshStandardMaterial,
+  Vector2,
+  Color,
+} from "../third_party/three.module.js";
+
+class Material extends MeshStandardMaterial {
+  constructor(options) {
+    super(options);
+
+    this.params = {
+      roughness: 0.4,
+      metalness: 0.1,
+      scale: 100,
+      inkColor: 0x1831d3,
+      min: 0.1,
+      max: 0.9,
+      e: 0.1,
+    };
+
+    this.uniforms = {
+      resolution: { value: new Vector2(1, 1) },
+      paperTexture: { value: null },
+      scale: { value: this.params.scale },
+      inkColor: { value: new Color(this.params.inkColor) },
+      range: { value: new Vector2(this.params.min, this.params.max) },
+      e: { value: this.params.e },
+    };
+
+    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 vec3 inkColor;
+        uniform vec2 range;
+        uniform float scale;
+        uniform float e;
+        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(238, 64, 53) / 255.0;
+            p[1] = vec3(243, 119, 54) / 255.0;
+            p[2] = vec3(253, 244, 152) / 255.0;
+            p[3] = vec3(123, 192, 67) / 255.0;
+            p[4] = vec3(3, 146, 207) / 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 w = .5;
+        float n = smoothstep(.5-w, .5+w, .5 + .5 * cnoise(.1*vWorldPosition.xyz));
+        gl_FragColor.rgb *= 2.;
+        gl_FragColor.rgb *= color_spline(n, true);//mix(col, col2, n2);
+        `
+      );
+    };
+  }
+}
+
+function generateParams(gui, material) {
+  const params = material.params;
+  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 };

post-cmyk-halftone-i/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Sketch</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <style>
+      *{
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      canvas {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+  <canvas id="canvas"></canvas>
+  </body>
+    <script type="module" src="./main.js"></script>
+</html>

post-cmyk-halftone-i/main.js

@@ -0,0 +1,48 @@
+import { DoubleSide } from "../third_party/three.module.js";
+import { Material, generateParams } from "./Material.js";
+import * as dat from "../third_party/dat.gui.module.js";
+import { initScene, update } from "../js/scene.js";
+import { renderer, scene, camera, resize, onResize } from "../js/renderer.js";
+import { generateParams as generateEnvParams } from "../js/envMap.js";
+import { Post } from "./post.js";
+
+const post = new Post(renderer);
+
+const gui = new dat.GUI();
+const materialFolder = gui.addFolder("Material");
+materialFolder.open();
+
+const material = new Material({
+  color: 0x808080,
+  roughness: 0.2,
+  metalness: 0.1,
+  side: DoubleSide,
+});
+generateParams(materialFolder, material);
+const postController = post.generateParams(materialFolder);
+postController["paper"].setValue("Parchment");
+const envMapController = generateEnvParams(materialFolder, material);
+envMapController.setValue("bridge");
+
+function render() {
+  update();
+  post.render(scene, camera);
+  renderer.setAnimationLoop(render);
+}
+
+async function init() {
+  const controllers = await initScene(scene, material, gui);
+  controllers.torus.setValue(true);
+  controllers.spheres.setValue(true);
+  resize();
+  render();
+}
+
+onResize(() => {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const dPR = window.devicePixelRatio;
+  post.setSize(width * dPR, height * dPR);
+});
+
+init();