index.frag
#version 300 es
precision highp float;
const uint UINT_MAX = 0xffffffffu;
uvec3 k = uvec3(0x456789abu, 0x6789ab45u, 0x89ab4567u);
uvec3 u = uvec3(1, 2, 3);
uvec2 uhash22(uvec2 n) {
n ^= n.yx << u.xy;
n ^= n.yx >> u.xy;
n *= k.xy;
n ^= n.yx << u.xy;
return n * k.xy;
}
vec2 hash22(vec2 b) {
uvec2 n = floatBitsToUint(b);
return vec2(uhash22(n)) / vec2(UINT_MAX);
}
vec2 voronoi2(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float distMin = 1.0;
vec2 iMin;
for (int y = -1; y <= 1; y++) {
for (int x = -1; x <= 1; x++) {
vec2 offset = vec2(float(x), float(y));
vec2 neighbor = hash22(i + offset);
float dist = distance(neighbor + offset, f);
if (distMin > dist) {
iMin = neighbor;
distMin = dist;
}
}
}
return iMin;
}
uniform sampler2D uOriginal;
uniform float uAlpha;
uniform float uMixingRatio;
uniform float uSiteCount;
in vec2 vTextureCoords;
out vec4 fragColor;
void main() {
vec2 uv = vec2(vTextureCoords.x, 1.0 - vTextureCoords.y);
vec3 original = texture(uOriginal, uv).rgb;
uv *= uSiteCount;
vec2 voronoi = voronoi2(uv);
vec3 random = vec3(hash22(voronoi), 1.0);
vec4 dx = dFdx(vec4(random, 1.0));
vec4 dy = dFdy(vec4(random, 1.0));
vec3 outColor = (abs(dx) + abs(dy)).rgb;
outColor.r = (outColor.r + outColor.g + outColor.b) / 3.0;
float threshold = 0.01;
outColor = outColor.r > threshold
? vec3(original.r)
: mix(vec3(voronoi, 1.0), original, uMixingRatio);
fragColor = vec4(outColor, uAlpha);
}
render.ts
import { SketchFilter, type FilterSketchConfig, type FilterSketchFn } from "sketchgl"
import { ImageTexture } from "sketchgl/texture"
import { Program, Uniforms } from "sketchgl/program"
import { CanvasCoverPolygon } from "sketchgl/geometry"
import mainVertSrc from "./index.vert?raw"
import mainFragSrc from "./index.frag"
import imageGeometry from "@/assets/original/pastel-tomixy.png"
import imageAutumnLeaves from "@/assets/original/autumn-leaves_00037.jpg"
import imageWater from "@/assets/original/cat.jpg"
import imageGoldFish from "@/assets/original/fireworks_00018.jpg"
const sketch: FilterSketchFn = ({ gl, fitImage }) => {
const uniforms = new Uniforms(gl, ["uAlpha", "uSiteCount", "uMixingRatio"])
let uAlpha = 0.9
let uMixingRatio = 0.7
let uSiteCount = 50
const images = [
{ name: "花火", src: imageGoldFish },
{ name: "立方体", src: imageGeometry },
{ name: "紅葉", src: imageAutumnLeaves },
{ name: "猫", src: imageWater }
]
const imageNames = images.map((obj) => obj.name)
const textures = images.map((img) => new ImageTexture(gl, img.src))
let activeImage = 2
const program = new Program(gl)
program.attach(mainVertSrc, mainFragSrc)
program.activate()
uniforms.init(program.glProgram)
const plane = new CanvasCoverPolygon(gl)
plane.setLocations({ vertices: 0, uv: 1 })
gl.clearColor(1.0, 0.0, 0.0, 1.0)
gl.clearDepth(1.0)
return {
preload: [...textures.map((tex) => tex.load())],
preloaded: [() => fitImage(textures[activeImage].img)],
drawOnFrame() {
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
plane.bind()
textures[activeImage].activate(program.glProgram!, "uOriginal")
uniforms.float("uAlpha", uAlpha)
uniforms.float("uMixingRatio", uMixingRatio)
uniforms.float("uSiteCount", uSiteCount)
plane.draw({ primitive: "TRIANGLES" })
},
control(ui) {
ui.select("Image", images[activeImage].name, imageNames, (name) => {
const idx = imageNames.indexOf(name)
if (idx < 0) return
activeImage = idx
fitImage(textures[activeImage].img)
})
ui.number("全体の透明度", uAlpha, 0.0, 1.0, 0.01, (v) => {
uAlpha = v
})
ui.number("ボロノイの透明度", uMixingRatio, 0.0, 1.0, 0.01, (v) => {
uMixingRatio = v
})
ui.number("母点の数", uSiteCount, 3, 100, 1, (v) => {
uSiteCount = v
})
}
}
}
export const onload = () => {
const config: FilterSketchConfig = {
canvas: {
el: "gl-canvas",
autoResize: true
}
}
SketchFilter.init(config, sketch)
}