vgaNAR6ta/drags-and-nerds
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout du noise

Browse Source
This commit is contained in:
EpicKiwi
2026-04-21 01:08:11 +02:00
parent 3d5bef4153
commit 4a1c77121b
6 changed files with 121 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/glitcher/lib/base.frag
+1
View File
@@ -1,5 +1,6 @@
varying highp vec2 vTextureCoord;
uniform sampler2D uImageSampler;
uniform highp vec2 uWindowSize;
void main() {
gl_FragColor = texture2D(uImageSampler, vTextureCoord);
v1-com-officielle/glitcher/lib/glitch.frag
+8 -1
View File
@@ -1,3 +1,10 @@
uniform highp vec2 uWindowSize;
uniform sampler2D uVideoSampler;
uniform sampler2D uNoiseSampler;
uniform lowp vec4 uRandom;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
gl_FragColor = texture2D(uVideoSampler, gl_FragCoord.xy/uWindowSize.xy)
+ (texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.zw) - 0.75)
* texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.xw);
}
v1-com-officielle/glitcher/lib/glitch.vert
+6 -1
View File
@@ -1,9 +1,13 @@
attribute vec4 aVertexPosition;
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform vec2 uGlitchPosition;
uniform float uGlitchWidth;
uniform lowp vec4 uRandom;
uniform vec2 uImageRatio;
varying highp vec2 vTextureCoord;
void main() {
vec2 vertex = aVertexPosition.xy;
@@ -11,6 +15,7 @@ void main() {
vertex *= 0.001;
vertex *= uGlitchWidth;
vertex += uGlitchPosition;
vertex += uRandom.xy*0.01;
gl_Position = vec4(vertex, -1.0, 1.0);
}
v1-com-officielle/glitcher/lib/glitcher.js
+97 -8
View File
@@ -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(