Merge pull request #29 from codewithkyle/webgl-rewrite

WebGL Rewrite

Author: codewithkyle

client/src/components/window/windows/fog-brush/fog-brush.ts

@@ -110,7 +110,6 @@ export default class FogBrush extends SuperComponent<IFogBrush> {
             line.setAttribute('stroke', 'yellow');
             line.setAttribute('stroke-width', "1");
             this.polyPreviewEl.appendChild(line);
-            console.log("line", line);
         }
     }
 

client/src/pages/tabletop-page/tabletop-component/doodle-canvas/doodle-canvas.scss

@@ -1,9 +1,9 @@
 doodle-canvas{
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 0;
+    left: 0;
     pointer-events: none;
-    transform: translate(-50%, -50%);
+    //transform: translate(-50%, -50%);
 
     canvas{
         display: inline-block;

client/src/pages/tabletop-page/tabletop-component/doodle-canvas/doodle-canvas.ts

@@ -126,21 +126,21 @@ export default class DoodleCanvas extends SuperComponent<IDoodleCanvas>{
     }
 
     // @ts-ignore
-    override render(image: HTMLImageElement): void {
-        if (!image) {
+    override render(w:number, h:number): void {
+        if (w == 0 || h == 0) {
             this.w = 0;
             this.h = 0;
             this.canvas.width = this.w;
             this.canvas.height = this.h;
             this.canvas.style.width = `0px`;
             this.canvas.style.height = `0px`;
         } else {
-            this.w = image.width;
-            this.h = image.height;
+            this.w = w;
+            this.h = h;
             this.canvas.width = this.w;
             this.canvas.height = this.h;
-            this.canvas.style.width = `${image.width}px`;
-            this.canvas.style.height = `${image.height}px`;
+            this.canvas.style.width = `${w}px`;
+            this.canvas.style.height = `${h}px`;
         }
         this.renderDoodles();
     }

client/src/pages/tabletop-page/tabletop-component/table-canvas/fog-shader.ts

@@ -0,0 +1,84 @@
+export const fog_mask_vert_shader =
+`#version 300 es
+
+in vec2 a_position;
+
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+
+export const fog_mask_frag_shader =
+`#version 300 es
+precision mediump float;
+
+out vec4 outColor;
+
+void main() {
+    outColor = vec4(1.0, 1.0, 1.0, 1.0);
+}
+`;
+
+export const fog_composite_vert_shader = 
+`#version 300 es
+
+in vec2 a_position;
+in vec2 a_texCoord;
+out vec2 v_texCoord;
+
+uniform vec2 u_resolution;
+uniform vec2 u_translation;
+uniform vec2 u_scale;
+
+void main() {
+    // apply translation
+    vec2 translatedPosition = a_position * u_scale + u_translation;
+
+    // convert pixel coord to normalized device coord
+    vec2 zeroToOne = translatedPosition / u_resolution;
+    vec2 zeroToTwo = zeroToOne * 2.0;
+    vec2 clipSpace = zeroToTwo - 1.0;
+
+    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); // flip y-axis
+    v_texCoord = a_texCoord; // pass tex coords
+}
+`;
+
+export const fog_composite_frag_shader = 
+`#version 300 es
+precision mediump float;
+
+// Varying texture coordinate from the vertex shader
+in vec2 v_texCoord;
+
+// The two texture uniforms: one for the custom image and one for the mask.
+uniform sampler2D u_image;
+uniform sampler2D u_mask;
+uniform vec4 u_color;
+uniform int u_isGM;
+
+// Output color of the fragment.
+out vec4 fragColor;
+
+void main() {
+    // Sample the custom image texture at the given UV coordinates.
+    vec4 imageColor = texture(u_image, v_texCoord);
+    
+    // Sample the mask texture at the same UV coordinates.
+    // Assuming the mask is in grayscale, we only need one channel.
+    float maskValue = texture(u_mask, v_texCoord).r;
+    
+    // Use a threshold to decide if the mask is "white" (revealed).
+    // You can adjust the threshold (here 0.5) as needed.
+    if(maskValue > 0.5) {
+        fragColor = imageColor; // Reveal the image where the mask is white.
+    } else {
+        if (u_isGM == 1) {
+            fragColor = mix(imageColor, u_color, 0.5); // Otherwise, output black.
+        } else {
+            fragColor = u_color;
+        }
+    }
+}
+
+`;

client/src/pages/tabletop-page/tabletop-component/table-canvas/grid-shader.ts

@@ -0,0 +1,55 @@
+export const grid_vert_shader =
+`#version 300 es
+
+in vec2 a_position;
+out vec2 v_clipPos;
+
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_clipPos = a_position;
+}
+`;
+
+export const grid_frag_shader =
+`#version 300 es
+precision highp float;
+
+uniform vec2 u_origin;      // The line's origin in top‐left coords
+uniform vec2 u_resolution;  // (width, height) of the screen
+uniform float u_spacing;    // grid spacing
+uniform vec2 u_offset;
+uniform float u_scale;
+uniform vec4 u_color;
+
+out vec4 outColor;
+
+void main() {
+    // gl_FragCoord is the window coordinate:
+    //    gl_FragCoord.x in [0, W], with 0 at LEFT, W at RIGHT
+    //    gl_FragCoord.y in [0, H], with 0 at BOTTOM, H at TOP
+    
+    // But your "top‐right origin" system wants:
+    //    (0,0) in the TOP‐RIGHT
+    //    x increasing leftward => x = W - gl_FragCoord.x
+    //    y increasing downward => y = H - gl_FragCoord.y
+
+    float worldX = gl_FragCoord.x;
+    float worldY = u_resolution.y - gl_FragCoord.y;
+
+    float cellSize = u_spacing * u_scale;
+
+    // Compare the fragment's coordinate to the origin
+    float distX = mod((worldX - u_origin.x - u_offset.x), cellSize);
+    float distY = mod((worldY - u_origin.y - u_offset.y), cellSize);
+
+    bool onVertical = distX < 1.0;
+    bool onHorizontal = distY < 1.0;
+
+    // If we're within the line width of either axis, draw it
+    if (onVertical || onHorizontal) {
+        outColor = u_color;
+    } else {
+        outColor = vec4(0.0, 0.0, 0.0, 0.0);  // transparent background
+    }
+}
+`;

client/src/pages/tabletop-page/tabletop-component/table-canvas/map-shader.ts

@@ -0,0 +1,35 @@
+export const map_vert_shader =
+`#version 300 es
+in vec2 a_position;
+in vec2 a_texCoord;
+out vec2 v_texCoord;
+
+uniform vec2 u_resolution;
+uniform vec2 u_translation;
+uniform vec2 u_scale;
+
+void main() {
+    // apply translation
+    vec2 translatedPosition = a_position * u_scale + u_translation;
+
+    // convert pixel coord to normalized device coord
+    vec2 zeroToOne = translatedPosition / u_resolution;
+    vec2 zeroToTwo = zeroToOne * 2.0;
+    vec2 clipSpace = zeroToTwo - 1.0;
+
+    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); // flip y-axis
+    v_texCoord = a_texCoord; // pass tex coords
+}
+`;
+export const map_frag_shader =
+`#version 300 es
+precision mediump float;
+
+in vec2 v_texCoord;
+uniform sampler2D u_texture;
+out vec4 outColor;
+
+void main() {
+    outColor = texture(u_texture, v_texCoord);
+}
+`;