Scribble Pad demo.

scribble-pad.ts

// You will need to install these via npm or yarn.
import * as THREE from "three";
import glsl from "glslify";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export const config = {
  loop: true,
  context: "webgl",
};

const COLOR1 = "#8DDAB9";
const COLOR2 = "#67A2E3";

let renderer: THREE.WebGLRenderer;
let camera: THREE.PerspectiveCamera;
let scene: THREE.Scene;
let controls: OrbitControls;

export const onSetup = (context: WebGLRenderingContext) => {

  context.clearColor(0.0, 0.0, 0.0, 1.0);

  renderer = new THREE.WebGLRenderer({
    canvas: context.canvas,
  });

  renderer.setClearColor(COLOR2, 1);

  camera = new THREE.PerspectiveCamera(50, 1, 0.01, 100);
  camera.position.set(0, 0, -4);
  camera.lookAt(new THREE.Vector3());

  controls = new OrbitControls(camera, context.canvas);

  scene = new THREE.Scene();

  const geometry = new THREE.SphereGeometry(1, 32, 16);
  const baseGeom = new THREE.IcosahedronGeometry(1, 1);
  const points = baseGeom.vertices;

  const vertexShader = `
    varying vec2 vUv;
    varying vec3 vPosition;
    void main () {
      vPosition = position;
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);
    }
  `;

  const fragmentShader = glsl(`

    varying vec2 vUv;
    varying vec3 vPosition;

    uniform vec3 color;
    uniform vec3 color2;
    uniform float time;

    uniform vec3 points[POINT_COUNT];

    void main () {
      float dist = 10000.0;

      for (int i = 0; i < POINT_COUNT; i++) {
        vec3 p = points[i];
        float d = distance(vPosition, p);
        dist = min(d, dist);
      }

      float mask = step(0.2, dist);
      mask = 1.0 - mask;

      vec3 fragColor = mix(color, color2, mask);

      gl_FragColor = vec4(fragColor, 1.0);

      // if (mask > 0.5) discard;
    }
  `);

  const amount = 1;
  const group = new THREE.Group();

  for (let i = 0; i < amount; i++) {
    // Setup a material
    const material = new THREE.ShaderMaterial({
      defines: {
        POINT_COUNT: points.length,
      },
      extensions: {
        derivatives: true,
      },
      fragmentShader,
      vertexShader,
      side: THREE.DoubleSide,
      uniforms: {
        points: { value: points },
        time: { value: 0 },
        color: { value: new THREE.Color(COLOR1) },
        color2: { value: new THREE.Color(COLOR2) },
      },
    });

    const mesh = new THREE.Mesh(geometry, material);

    mesh.scale.setScalar((Math.random() * 2 + 1) * 0.29);

    group.add(mesh);
  }

  scene.add(group);
  renderer.render(scene, camera);
};

export const onDraw = () => {
  controls.update();
  renderer.render(scene, camera);
};

export const onResize = ({ pixelRatio, width, height }) => {
  renderer.setPixelRatio(pixelRatio);
  renderer.setSize(width, height, false);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
};