heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Add shaders everywhere!

Browse Source
This commit is contained in:
legonzaur
2024-05-19 13:22:05 +02:00
parent 1fc3378083
commit 58d0e4a416
7 changed files with 59 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/shaders/noise.frag
+9 -3
View File
@@ -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.);
}
components/AnimatedBackground.vue
+34 -20
View File
@@ -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<string>
const props = withDefaults(defineProps<Props>(), {
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
);
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(() => {
<style scoped>
#background {
z-index: -1;
left: 0;
position: absolute;
height: 100%;
components/GameBoard.vue
+8 -9
View File
@@ -62,13 +62,17 @@ function showWinnerScreen() {
<MarketCards></MarketCards>
</div>
<div id="player_list">
<AnimatedBackground />
<PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
</PlayerListElement>
</div>
<div id="current_player"
:class="(goStore.current_game?.current_turn && (goStore.current_game?.current_turn === goStore.self?.team)) ? 'self' : ''">
<PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
<!-- <AnimatedBackground></AnimatedBackground> -->
<div id="current_player">
<template v-for="p in current_players">
<AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
:color-end="goStore.self == p ? [.0, 1, 1] : undefined" />
<PlayerSlot :player="p"></PlayerSlot>
</template>
</div>
</div>
<ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
@@ -95,14 +99,9 @@ function showWinnerScreen() {
isolation: isolate;
}
#current_player.self {
/* background-image: url('/images/bg-grass.png'); */
}
#market {
grid-area: market;
background-image: url("/images/bg-sand.png");
padding: 10px;
}
#current_player {
components/MarketCards.vue
+4
View File
@@ -7,10 +7,12 @@ const isTurn = computed(() => goStore.self && goStore.current_game?.started && (
const clientStore = useClientSideStore()
const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
</script>
<template>
<div id="market">
<AnimatedBackground :color-end="[1, 1, 0]" :color-start="[.3, .3, 0]"></AnimatedBackground>
<CardPreview :tilted="false" :card_id="undefined"></CardPreview>
<div class="separator"></div>
<CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
@@ -60,6 +62,8 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
z-index: 2;
position: relative;
gap: 2px;
padding: 10px;
;
}
.separator {
components/PlayerListElement.vue
+2
View File
@@ -18,6 +18,7 @@ const props = defineProps<Props>()
<template>
<div :class="`player_list_element ${goStore.self === props.player ? 'self' : ''}`">
<AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" />
<div class="button" id="player_list_buttons">
<div class="main_button" @click="show('main')">
<div class="tooltip">Board</div>
@@ -119,6 +120,7 @@ const props = defineProps<Props>()
"button player";
border-bottom: 5px solid black;
min-height: 200px;
position: relative;
}
.player_list_element.self {
components/PlayerSlot.vue
+1 -1
View File
@@ -92,7 +92,7 @@ function check_for_guard(player: Player) {
</script>
<template>
<div :class="`player ${isPlayerTurn ? 'turn' : ''} ${discard_unwrapped ? 'discard_unwrapped' : ''}`">
<div class="player" :class="{ turn: isPlayerTurn, discard_unwrapped, self: isSelf }">
<template v-if="!hide_stack_and_discard">
<div class="stack">
pages/index.vue
-1
View File
@@ -15,7 +15,6 @@ import goStore, { setReady } from "@/netcode";
<label for="ready">Ready</label>
</template>
</div>
<AnimatedBackground></AnimatedBackground>
<LoginView v-if="goStore.context === 'login'"></LoginView>
<GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
<LobbyView v-if="goStore.context == 'lobby'"></LobbyView>