From 58d0e4a41698b81851b778873b912c1b94cc79c7 Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 19 May 2024 13:22:05 +0200 Subject: [PATCH] Add shaders everywhere! --- assets/shaders/noise.frag | 12 +++++-- components/AnimatedBackground.vue | 56 +++++++++++++++++++------------ components/GameBoard.vue | 17 +++++----- components/MarketCards.vue | 4 +++ components/PlayerListElement.vue | 2 ++ components/PlayerSlot.vue | 2 +- pages/index.vue | 1 - 7 files changed, 59 insertions(+), 35 deletions(-) diff --git a/assets/shaders/noise.frag b/assets/shaders/noise.frag index e6ed781..d23eb3d 100644 --- a/assets/shaders/noise.frag +++ b/assets/shaders/noise.frag @@ -8,10 +8,13 @@ precision mediump float; uniform vec2 u_resolution; uniform vec2 u_mouse; +uniform vec3 u_color_start; +uniform vec3 u_color_end; +uniform vec2 u_offset; uniform float u_time; void main(){ - vec2 st=gl_FragCoord.xy/min(u_resolution.x,u_resolution.x)*2.; + vec2 st=(gl_FragCoord.xy+u_offset)/u_resolution; vec2 q=vec2(0.); q.x=fbm(st); @@ -25,6 +28,9 @@ void main(){ float f=fbm(st+r); - f=mix(.5,1.,f); - gl_FragColor=vec4(0.,.1+f*.7,0.,1.); + + + vec3 color=mix(u_color_start,u_color_end,f*.3); + + gl_FragColor=vec4(color,1.); } \ No newline at end of file diff --git a/components/AnimatedBackground.vue b/components/AnimatedBackground.vue index b7fbc1c..fc1fbee 100644 --- a/components/AnimatedBackground.vue +++ b/components/AnimatedBackground.vue @@ -8,8 +8,19 @@ declare const webglUtils: { resizeCanvasToDisplaySize: (e: HTMLCanvasElement | OffscreenCanvas) => any } +export interface Props { + colorStart?: [number, number, number] + colorEnd?: [number, number, number] +} + declare const resolveLygiaAsync: (source: string) => Promise +const props = withDefaults(defineProps(), { + colorStart: () => [0, .3, 0], + colorEnd: () => [0, 1, 0] +}) + +const targetFramerate = 1000 / 60 async function main(canvas: HTMLCanvasElement) { // Get A WebGL context /** @type {HTMLCanvasElement} */ @@ -29,8 +40,10 @@ async function main(canvas: HTMLCanvasElement) { const positionAttributeLocation = gl.getAttribLocation(program, "a_position"); // look up uniform locations + const offset = gl.getUniformLocation(program, "u_offset"); const resolutionLocation = gl.getUniformLocation(program, "u_resolution"); - const mouseLocation = gl.getUniformLocation(program, "u_mouse"); + const colorStart = gl.getUniformLocation(program, "u_color_start"); + const colorEnd = gl.getUniformLocation(program, "u_color_end"); const timeLocation = gl.getUniformLocation(program, "u_time"); // Create a buffer to put three 2d clip space points in @@ -49,48 +62,51 @@ async function main(canvas: HTMLCanvasElement) { 1, 1, ]), gl.STATIC_DRAW); - let mouseX = 0; - let mouseY = 0; - + const gl2 = gl function render(time: number) { - if (!gl) { return } time *= 0.001; // convert to seconds - webglUtils.resizeCanvasToDisplaySize(gl.canvas); + webglUtils.resizeCanvasToDisplaySize(gl2.canvas); // Tell WebGL how to convert from clip space to pixels - gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); + gl2.viewport(0, 0, gl2.canvas.width, gl2.canvas.height); // Tell it to use our program (pair of shaders) - gl.useProgram(program); + gl2.useProgram(program); // Turn on the attribute - gl.enableVertexAttribArray(positionAttributeLocation); + gl2.enableVertexAttribArray(positionAttributeLocation); // Bind the position buffer. - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl2.bindBuffer(gl2.ARRAY_BUFFER, positionBuffer); // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) - gl.vertexAttribPointer( + gl2.vertexAttribPointer( positionAttributeLocation, 2, // 2 components per iteration - gl.FLOAT, // the data is 32bit floats + gl2.FLOAT, // the data is 32bit floats false, // don't normalize the data 0, // 0 = move forward size * sizeof(type) each iteration to get the next position 0, // start at the beginning of the buffer ); - gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height); - gl.uniform2f(mouseLocation, mouseX, mouseY); - gl.uniform1f(timeLocation, time); + const bounds = canvas.getBoundingClientRect() + const aspectRatio = Math.max(window.screen.width, window.screen.height) * devicePixelRatio - gl.drawArrays( - gl.TRIANGLES, + gl2.uniform2f(offset, bounds.left, -bounds.bottom); + // console.log(canvas.getBoundingClientRect().left * window.devicePixelRatio) + gl2.uniform2f(resolutionLocation, aspectRatio, aspectRatio); + gl2.uniform3f(colorStart, props.colorStart[0], props.colorStart[1], props.colorStart[2]); + gl2.uniform3f(colorEnd, props.colorEnd[0], props.colorEnd[1], props.colorEnd[2]); + gl2.uniform1f(timeLocation, time); + gl2.drawArrays( + gl2.TRIANGLES, 0, // offset 6, // num vertices to process ); - - requestAnimationFrame(render); + setTimeout(() => { + requestAnimationFrame(render); + }, targetFramerate); } requestAnimationFrame(render); } @@ -98,7 +114,6 @@ async function main(canvas: HTMLCanvasElement) { onMounted(() => { if (!canvas.value) { return } - console.log("e") main(canvas.value); }) @@ -110,7 +125,6 @@ onMounted(() => {