index.vert

#version 300 es

in vec2 aVertexTextureCoords;
in vec3 aVertexPosition;

out vec2 vTextureCoords;

void main() {
  vTextureCoords = aVertexTextureCoords;
  gl_Position = vec4(aVertexPosition, 1.0);
}

index.frag

#version 300 es

precision highp float;

const float R_LUMINANCE = 0.298912;
const float G_LUMINANCE = 0.586611;
const float B_LUMINANCE = 0.114478;

// グレースケール化
float toMonochrome(vec3 color) {
  return dot(color, vec3(R_LUMINANCE, G_LUMINANCE, B_LUMINANCE));
}

uniform sampler2D uTexture0;
uniform float uDotScale;
uniform float uLightDirectionZ;
uniform bool uGrayScaleOn;

in vec2 vTextureCoords;

out vec4 fragColor;

void main() {
  vec2 texCoord = vec2(vTextureCoords.x, 1.0 - vTextureCoords.y);
  vec4 original = texture(uTexture0, texCoord);
  
  float gray = toMonochrome(original.rgb);
  vec3 inputColor = uGrayScaleOn ? vec3(gray) : original.rgb;
  
  // 法線ベクトルがない場合、表面法線ベクトルはビュー空間位置の偏導関数によって近似的に計算
  vec3 dx = dFdx(vec3(texCoord, 0.0));
  vec3 dy = dFdy(vec3(texCoord, 0.0));

  vec3 N = normalize(cross(dx, dy));
  N *= sign(N.z);
  vec3 L = vec3(1.0, 1.0, uLightDirectionZ);

  float diffuse = dot(N, L);
  vec3 diffuseColor = inputColor * diffuse;
  
  float radius = gray;
  vec2 scale = gl_FragCoord.xy * uDotScale;
  float wave = (sin(scale.x) * 0.5 + radius) + (sin(scale.y) * 0.5 + radius);
  
  float intensity = diffuse > 0.6 ? 1.0 : diffuse > 0.2 ? 0.6 : 0.4;
  
  fragColor = vec4(inputColor * (diffuseColor + vec3(wave)) * intensity, original.a);
}

render.ts

import { Space } from "@/lib/canvas/index"
import { Program } from "@/lib/webgl/program"
import { Scene } from "@/lib/webgl/scene"
import { Clock } from "@/lib/event/clock"
import { ControlUi } from "@/lib/gui/control-ui"
import { Texture } from "@/lib/webgl/texture"
import { UniformLoader } from "@/lib/webgl/uniform-loader"

import mainVertSrc from "./index.vert?raw"
import mainFragSrc from "./index.frag?raw"

import imageGeometry from "@/assets/original/pastel-tomixy.png"
import imageAutumnLeaves from "@/assets/original/autumn-leaves_00037.jpg"
import imageWater from "@/assets/original/water_00032.jpg"
import imageGoldFish from "@/assets/original/japanese-style_00011.jpg"

export const onload = () => {
  const space = new Space("gl-canvas")
  const canvas = space.canvas
  const gl = space.gl
  if (!canvas || !gl) return

  let scene: Scene
  let program: Program
  let clock: Clock
  let textures: Texture[] = []

  const uniforms = new UniformLoader(gl, ["uDotScale", "uLightDirectionZ", "uGrayScaleOn"])

  const images = [
    { name: "金魚", image: imageGoldFish },
    { name: "立方体", image: imageGeometry },
    { name: "紅葉", image: imageAutumnLeaves },
    { name: "水面", image: imageWater }
  ]
  const imageNames = images.map((obj) => obj.name)
  let activeImage = 0

  const defaultGrayScaleOn = true
  const defaultDotScale = 1.5
  const defaultLightDirectionZ = 0.67

  const initGuiControls = () => {
    const ui = new ControlUi()
    ui.select("Image", images[activeImage].name, imageNames, (name) => {
      const idx = imageNames.indexOf(name)
      if (idx < 0) return
      activeImage = idx
      space.fitImage(textures[activeImage].image)
    })
    ui.number("DotScale", defaultDotScale, 1.0, 2.0, 0.01, (value) => {
      uniforms.float("uDotScale", value)
    })
    ui.number("LightDirection.z", defaultLightDirectionZ, 0.57, 1.0, 0.01, (value) => {
      uniforms.float("uLightDirectionZ", value)
    })
    ui.boolean("GrayScale", defaultGrayScaleOn, (value) => {
      uniforms.boolean("uGrayScaleOn", value)
    })
  }

  const onResize = () => {
    space.fitImage(textures[activeImage].image)
    render()
  }

  const configure = async () => {
    gl.clearColor(1.0, 0.0, 0.0, 1.0)
    gl.clearDepth(1.0)

    program = new Program(gl, mainVertSrc, mainFragSrc)

    scene = new Scene(gl, program)
    clock = new Clock()

    await Promise.all(
      images.map(async (obj) => {
        const texture = new Texture(gl, program, obj.image)
        textures.push(texture)
        await texture.load()
      })
    )

    uniforms.init(program)
    uniforms.boolean("uGrayScaleOn", defaultGrayScaleOn)
    uniforms.float("uDotScale", defaultDotScale)
    uniforms.float("uLightDirectionZ", defaultLightDirectionZ)

    space.fitImage(textures[activeImage].image)
    space.onResize = onResize
  }

  const registerGeometry = () => {
    // 画面を覆う板ポリゴン
    const vertices = [-1.0, 1.0, 0.0, 1.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0]
    const texCoords = [0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0]
    const indices = [0, 2, 1, 2, 3, 1]
    scene.add({ vertices, indices, texCoords })
  }

  const render = () => {
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

    scene.traverseDraw((obj) => {
      obj.bind()

      textures[activeImage].use()
      gl.drawElements(gl.TRIANGLES, obj.indices.length, gl.UNSIGNED_SHORT, 0)

      obj.cleanup()
    })
  }

  const init = async () => {
    await configure()
    registerGeometry()
    clock.on("tick", render)

    initGuiControls()
  }

  init()
}