饋 - OpenProcessing

sketch.js
shaderSource.js
tools.js
style.css
index.html
xxxxxxxxxx
 
// 饋 © 2024-04-22 by Zaron Chen is licensed under CC BY-NC-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/3.0/
// Feedback ♻️ #WCCChallenge
// See all my WCCChallenge submissions: https://github.com/ZRNOF/WCCC-Sketches
​
import Olon from "https://cdn.jsdelivr.net/npm/olon@0.3.2/dist/Olon.min.js"
import { BASE_FRAG, ITER_FRAG, QUAD_FRAG, QUAD_VERT } from "./shaderSource.js"
import { random, floor } from "./tools.js"
​
const STOP_FRAME = 50 * floor(random(1, 11))
​
const ol = Olon(1024, 1024, true)
ol.enableFloat()
​
ol.flex({ container: { padding: "20px" }, canvas: { fit: ol.SCALE_DOWN } })
​
const baseProgram = ol.createProgram(QUAD_VERT, BASE_FRAG)
const iterProgram = ol.createProgram(QUAD_VERT, ITER_FRAG)
const quadProgram = ol.createProgram(QUAD_VERT, QUAD_FRAG)
​
ol.blend({
  sfactor: ol.SRC_ALPHA,
  dfactor: ol.ONE_MINUS_SRC_ALPHA,
})
​
const baseVAO = ol.createVAO(baseProgram, ol.quadBufferInfo())
const iterVAO = ol.createVAO(iterProgram, ol.quadBufferInfo())
const quadVAO = ol.createVAO(quadProgram, ol.quadBufferInfo())
​
const texOpts = { iformat: ol.RGBA32F, immutableStorage: true }
const fragColorTex0 = ol.texture2D(texOpts)
const fragColorTex1 = ol.texture2D(texOpts)
const fragColorTex2 = ol.texture2D(texOpts)
const depthBuffer = ol.createDepthBuffer(ol.width, ol.height)
​
const fbo0 = ol.createFBO({
  program: baseProgram,
  depthBuffer: depthBuffer,
  outs: [{ name: "fragColor", texture: fragColorTex0 }],
})
​
const fbo1 = ol.createFBO({
  program: iterProgram,
  depthBuffer: depthBuffer,
  outs: [{ name: "fragColor", texture: fragColorTex1 }],
})
​
const fbo2 = ol.createFBO({
  program: iterProgram,
  depthBuffer: depthBuffer,
  outs: [{ name: "fragColor", texture: fragColorTex2 }],
})
​
const frameBuffer = (fbo, texture) => {
  ol.use({
    program: iterProgram,
    VAO: iterVAO,
    Depth: true,
    FBO: fbo,
  }).run(() => {
    ol.clear(ol.COLOR_BUFF | ol.DEPTH_BUFF)
    ol.uniform("uImage", texture)
    ol.uniform("time", ol.frame / 60)
    ol.triangles(0, 6)
  })
}
​
const feedback = (texture) => {
  frameBuffer(fbo1, texture)
  frameBuffer(fbo2, fragColorTex1)
}
​
ol.use({
  program: baseProgram,
  VAO: baseVAO,
  FBO: fbo0,
}).run(() => ol.triangles(0, 6))
feedback(fragColorTex0)
​
ol.render(() => {
  feedback(fragColorTex2)
​
  ol.use({
    program: quadProgram,
    VAO: quadVAO,
    Blend: true,
  }).run(() => {
    ol.uniform("uImage", fragColorTex2)
    ol.triangles(0, 6)
  })
​
  ol.frame === STOP_FRAME && ol.pause()
})
​