forked from vgaNAR6ta/drags-and-nerds
Ajout du noise
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
import resizeToFit from 'intrinsic-scale'
|
||||
|
||||
import noiseUrl from "../noise-power.png"
|
||||
|
||||
import baseVertSource from "./base.vert?raw"
|
||||
import baseFragSource from "./base.frag?raw"
|
||||
|
||||
@@ -11,17 +13,25 @@ export class Glitcher {
|
||||
/** @type {HTMLCanvasElement} */
|
||||
canvas
|
||||
|
||||
gliches = []
|
||||
glitches = []
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} canvas
|
||||
*/
|
||||
constructor(canvas) {
|
||||
this.canvas = canvas
|
||||
this.videoCanvas = new OffscreenCanvas(10, 10);
|
||||
this.video = document.createElement("video")
|
||||
this.init()
|
||||
}
|
||||
|
||||
init(){
|
||||
this.video.muted = true
|
||||
this.video.loop = true
|
||||
this.video.autoplay = true
|
||||
this.video.src = "/background.webm"
|
||||
this.video.addEventListener("canplay", e => this.video.play())
|
||||
|
||||
this.ctx = this.canvas.getContext("webgl")
|
||||
if(!this.ctx){
|
||||
throw new Error("WebGL isn't supported")
|
||||
@@ -56,13 +66,13 @@ export class Glitcher {
|
||||
aVertexPosition: this.ctx.getAttribLocation(baseProgram, "aVertexPosition"),
|
||||
aTextureCoord: this.ctx.getAttribLocation(baseProgram, "aTextureCoord"),
|
||||
uImageSampler: this.ctx.getUniformLocation(baseProgram, "uImageSampler"),
|
||||
uWindowSize: this.ctx.getUniformLocation(baseProgram, "uWindowSize"),
|
||||
imageTexture: imageTexture,
|
||||
panelUVBuffer: panelUVBuffer,
|
||||
panelPositionsBuffer: panelPositionBuffer
|
||||
panelPositionsBuffer: panelPositionBuffer,
|
||||
}
|
||||
this.clearImage();
|
||||
|
||||
|
||||
let glitchPositionBuffer = this.ctx.createBuffer()
|
||||
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, glitchPositionBuffer)
|
||||
const glitchPosition = [
|
||||
@@ -72,8 +82,41 @@ export class Glitcher {
|
||||
1.0, -1.0,
|
||||
]
|
||||
this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(glitchPosition), this.ctx.STATIC_DRAW)
|
||||
|
||||
|
||||
let glitchProgram = createProgram(this.ctx, glitchVertSource, glitchFragSource)
|
||||
let videoFrameTexture = this.ctx.createTexture()
|
||||
|
||||
let noiseTexture = this.ctx.createTexture()
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, noiseTexture)
|
||||
this.ctx.texImage2D(
|
||||
this.ctx.TEXTURE_2D,
|
||||
0,
|
||||
this.ctx.RGBA,
|
||||
1, 1,
|
||||
0,
|
||||
this.ctx.RGBA,
|
||||
this.ctx.UNSIGNED_BYTE,
|
||||
new Uint8Array([0, 0, 0, 0])
|
||||
)
|
||||
|
||||
let noiseImage = new Image()
|
||||
noiseImage.addEventListener("load", () => {
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
|
||||
this.ctx.texImage2D(
|
||||
this.ctx.TEXTURE_2D,
|
||||
0,
|
||||
this.ctx.RGBA,
|
||||
this.ctx.RGBA,
|
||||
this.ctx.UNSIGNED_BYTE,
|
||||
noiseImage
|
||||
)
|
||||
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
|
||||
})
|
||||
noiseImage.src = noiseUrl
|
||||
|
||||
this.glitch = {
|
||||
program: glitchProgram,
|
||||
@@ -81,12 +124,20 @@ export class Glitcher {
|
||||
uGlitchPosition: this.ctx.getUniformLocation(glitchProgram, "uGlitchPosition"),
|
||||
uGlitchWidth: this.ctx.getUniformLocation(glitchProgram, "uGlitchWidth"),
|
||||
uImageRatio: this.ctx.getUniformLocation(glitchProgram, "uImageRatio"),
|
||||
glitchPositionBuffer: glitchPositionBuffer
|
||||
uWindowSize: this.ctx.getUniformLocation(glitchProgram, "uWindowSize"),
|
||||
uVideoSampler: this.ctx.getUniformLocation(glitchProgram, "uVideoSampler"),
|
||||
uNoiseSampler: this.ctx.getUniformLocation(glitchProgram, "uNoiseSampler"),
|
||||
uRandom: this.ctx.getUniformLocation(glitchProgram, "uRandom"),
|
||||
glitchPositionBuffer: glitchPositionBuffer,
|
||||
videoFrameTexture: videoFrameTexture,
|
||||
noiseTexture: noiseTexture
|
||||
}
|
||||
|
||||
console.log(this.glitch)
|
||||
}
|
||||
|
||||
clearImage(){
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.imageTexture)
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
|
||||
this.ctx.texImage2D(
|
||||
this.ctx.TEXTURE_2D,
|
||||
0,
|
||||
@@ -192,14 +243,39 @@ export class Glitcher {
|
||||
|
||||
this.canvas.width = resize.width
|
||||
this.canvas.height = resize.height
|
||||
this.videoCanvas.width = this.canvas.width
|
||||
this.videoCanvas.height = this.canvas.height
|
||||
this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
|
||||
updateVideoTexture(){
|
||||
let vctx = this.videoCanvas.getContext("2d")
|
||||
vctx.clearRect(0, 0, this.videoCanvas.width, this.videoCanvas.height)
|
||||
vctx.drawImage(this.video, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
|
||||
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
|
||||
this.ctx.texImage2D(
|
||||
this.ctx.TEXTURE_2D,
|
||||
0,
|
||||
this.ctx.RGBA,
|
||||
this.ctx.RGBA,
|
||||
this.ctx.UNSIGNED_BYTE,
|
||||
this.videoCanvas
|
||||
)
|
||||
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
|
||||
this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.LINEAR);
|
||||
}
|
||||
|
||||
render(){
|
||||
if(!this.ctx){
|
||||
throw new Error("Glitcher not initialized, please run init()")
|
||||
}
|
||||
|
||||
this.updateVideoTexture()
|
||||
|
||||
this.ctx.clearColor(0.0, 0.0, 0.0, 0.0)
|
||||
this.ctx.clearDepth(1.0)
|
||||
this.ctx.enable(this.ctx.DEPTH_TEST)
|
||||
@@ -233,7 +309,8 @@ export class Glitcher {
|
||||
|
||||
this.ctx.activeTexture(this.ctx.TEXTURE0)
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
|
||||
|
||||
|
||||
this.ctx.uniform2f(this.base.uWindowSize, this.canvas.width, this.canvas.height)
|
||||
this.ctx.uniform1i(this.base.uImageSampler, 0)
|
||||
|
||||
this.ctx.drawArrays(
|
||||
@@ -254,8 +331,17 @@ export class Glitcher {
|
||||
0, // (stride) how many bytes to get from one set of values to the next
|
||||
0, // Start offset
|
||||
)
|
||||
|
||||
this.ctx.enableVertexAttribArray(this.glitch.aVertexPosition)
|
||||
|
||||
this.ctx.activeTexture(this.ctx.TEXTURE0)
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
|
||||
this.ctx.uniform1i(this.glitch.uVideoSampler, 0)
|
||||
|
||||
this.ctx.activeTexture(this.ctx.TEXTURE1)
|
||||
this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
|
||||
this.ctx.uniform1i(this.glitch.uNoiseSampler, 1)
|
||||
|
||||
this.ctx.uniform2f(this.glitch.uWindowSize, this.canvas.width, this.canvas.height)
|
||||
if(this.canvas.width > this.canvas.height){
|
||||
this.ctx.uniform2f(this.glitch.uImageRatio, 1.0, this.canvas.width/this.canvas.height)
|
||||
} else {
|
||||
@@ -263,6 +349,9 @@ export class Glitcher {
|
||||
}
|
||||
|
||||
for(let glitch of this.glitches) {
|
||||
this.ctx.uniform4f(this.glitch.uRandom,
|
||||
Math.random(), Math.random(), Math.random(), Math.random()
|
||||
)
|
||||
this.ctx.uniform2f(this.glitch.uGlitchPosition, glitch.x, glitch.y)
|
||||
this.ctx.uniform1f(this.glitch.uGlitchWidth, glitch.width)
|
||||
this.ctx.drawArrays(
|
||||
|
||||
Reference in New Issue
Block a user