@bigmistqke/view.gl 0.1.0

package/dev/pix_sim.ts

@@ -0,0 +1,549 @@
+import { FramebufferOptions } from 'src/types'
+import { createFramebuffer } from 'src/utils'
+import { view } from 'view.gl'
+import { attribute, compile, glsl, uniform } from 'view.gl/tag'
+
+export const MATERIALS = {
+  SAND: {
+    color: [1, 0.8, 0], // Yellow sand
+    id: 1,
+  },
+  WATER: {
+    color: [0, 0.5, 1], // Blue water
+    id: 2,
+  },
+  STONE: {
+    color: [0.5, 0.5, 0.5], // Gray stone
+    id: 3,
+  },
+} as const
+
+const MATERIAL_SIZE = Object.keys(MATERIALS).length
+
+let playing = false
+let currentMaterial = MATERIALS.SAND.id
+
+const canvas = document.createElement('canvas')
+const gl = canvas.getContext('webgl2', { antialias: false })!
+if (!gl) {
+  throw new Error('WebGL not supported')
+}
+
+// Create UI container
+const container = document.createElement('div')
+container.style.cssText = 'display: flex; flex-direction: column; align-items: center; gap: 10px;'
+
+// Create material buttons
+const buttonContainer = document.createElement('div')
+buttonContainer.style.cssText = 'display: flex; gap: 10px; margin-bottom: 10px;'
+
+Object.entries(MATERIALS).forEach(([name, material]) => {
+  const button = document.createElement('button')
+  button.textContent = name.toLowerCase()
+  button.style.cssText = `
+    padding: 5px 10px;
+    font-size: 14px;
+    font-family: times new roman;
+    cursor: pointer;
+    background: ${
+      currentMaterial === material.id
+        ? `rgb(${material.color.map(c => Math.floor(c * 255)).join(',')})`
+        : 'transparent'
+    };
+    border-color: ${name === 'SAND' ? 'black' : 'white'};
+    border: 2px solid rgb(${material.color.map(c => Math.floor(c * 255)).join(',')});
+    border-radius: 2px;
+  `
+  button.onclick = () => {
+    currentMaterial = material.id
+    // Update all button borders
+    buttonContainer.querySelectorAll('button').forEach((btn, idx) => {
+      btn.style.background =
+        idx === material.id - 1
+          ? `rgb(${material.color.map(c => Math.floor(c * 255)).join(',')})`
+          : 'transparent'
+    })
+  }
+  buttonContainer.appendChild(button)
+})
+
+container.appendChild(canvas)
+container.appendChild(buttonContainer)
+document.body.append(container)
+
+function spray() {
+  return Math.floor(Math.random() * 8) * (Math.random() < 0.5 ? 1 : -1)
+}
+
+canvas.addEventListener('mousedown', event => {
+  const rect = canvas.getBoundingClientRect()
+  const controller = new AbortController()
+  // playing = false
+  window.addEventListener(
+    'mousemove',
+    event => {
+      const x = Math.floor((event.clientX - rect.left + spray()) * (canvas.width / rect.width))
+      const y = Math.floor((rect.bottom - event.clientY + spray()) * (canvas.height / rect.height))
+
+      const dimensions = [8, 8] as const
+
+      // Encode selected material using bit encoding
+      const data = new Uint8Array(
+        (function* () {
+          for (let i = 0; i < dimensions[0] * dimensions[1]; i++) {
+            yield (currentMaterial & 1) * 255 // Red channel (bit 0)
+            yield ((currentMaterial >> 1) & 1) * 255 // Green channel (bit 1)
+            yield ((currentMaterial >> 2) & 1) * 255 // Blue channel (bit 2)
+            yield 255 // Alpha channel
+          }
+        })(),
+      )
+
+      // Update both read and write textures
+      gl.bindTexture(gl.TEXTURE_2D, read.texture)
+      gl.texSubImage2D(
+        gl.TEXTURE_2D,
+        0,
+        Math.max(0, Math.min(WIDTH - dimensions[0], x)),
+        Math.max(0, Math.min(HEIGHT - dimensions[1], y)),
+        dimensions[0],
+        dimensions[1],
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        data,
+      )
+
+      gl.bindTexture(gl.TEXTURE_2D, write.texture)
+      gl.texSubImage2D(
+        gl.TEXTURE_2D,
+        0,
+        Math.max(0, Math.min(WIDTH - dimensions[0], x)),
+        Math.max(0, Math.min(HEIGHT - dimensions[1], y)),
+        dimensions[0],
+        dimensions[1],
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        data,
+      )
+
+      render()
+    },
+    controller,
+  )
+  window.addEventListener(
+    'mouseup',
+    () => {
+      controller.abort()
+      // playing = true
+      // animate()
+    },
+    controller,
+  )
+})
+
+canvas.width = 256 * 2
+canvas.height = 256 * 2
+const WIDTH = canvas.width
+const HEIGHT = canvas.height
+
+// --- Shaders ---
+
+// Vertex shader (simple fullscreen quad)
+const vertex = glsl`#version 300 es
+${attribute.vec2('a_vertex')}
+out vec2 v_uv;
+void main() {
+  v_uv = a_vertex * 0.5 + 0.5;
+  gl_Position = vec4(a_vertex, 0, 1);
+}`
+
+// Fragment shader for sand simulation step
+const stepFragment = glsl`#version 300 es
+precision highp float;
+in vec2 v_uv;
+${uniform.sampler2D('u_texture')}
+${uniform.vec2('u_texelSize')}
+out vec4 fragColor;
+
+// Material constants (like enums)
+const int MAT_EMPTY = 0;
+const int MAT_SAND = 1;
+const int MAT_WATER = 2;
+const int MAT_STONE = 3;
+
+// Direction constants
+const vec2 DIR_UP = vec2(0.0, 1.0);
+const vec2 DIR_DOWN = vec2(0.0, -1.0);
+const vec2 DIR_LEFT = vec2(-1.0, 0.0);
+const vec2 DIR_RIGHT = vec2(1.0, 0.0);
+
+// Helper function to decode material from RGB
+int getMaterial(vec4 color) {
+  return int(color.r + color.g * 2.0 + color.b * 4.0);
+}
+
+// Helper function to encode material to RGB
+vec4 encodeMaterial(int material) {
+  return vec4(
+    float(material & 1),
+    float((material >> 1) & 1),
+    float((material >> 2) & 1),
+    1.0
+  );
+}
+
+void main() {
+  // Sample the current state
+  vec4 current = texture(u_texture, v_uv);
+  
+  // Check boundaries
+  bool atBottom = v_uv.y - u_texelSize.y < 0.0;
+  bool atLeft = v_uv.x - u_texelSize.x < 0.0;
+  bool atRight = v_uv.x + u_texelSize.x > 1.0;
+  bool atTop = v_uv.y + u_texelSize.y > 1.0;
+  
+  // Default: keep current state
+  fragColor = current;
+
+  int material = getMaterial(current);
+
+  int below = getMaterial(texture(u_texture, v_uv + DIR_DOWN * u_texelSize));
+  int above = getMaterial(texture(u_texture, v_uv + DIR_UP * u_texelSize));
+  int aboveLeft = getMaterial(texture(u_texture, v_uv + (DIR_UP + DIR_LEFT) * u_texelSize));
+  int aboveRight = getMaterial(texture(u_texture, v_uv + (DIR_UP + DIR_RIGHT) * u_texelSize));
+  int belowLeft = getMaterial(texture(u_texture, v_uv + (DIR_DOWN + DIR_LEFT) * u_texelSize));
+  int belowRight = getMaterial(texture(u_texture, v_uv + (DIR_DOWN + DIR_RIGHT) * u_texelSize));
+  
+  // Physics simulation using switch
+  switch (material) {
+    case MAT_EMPTY:{
+      // Empty cell - check what can fall/flow into it
+      
+      // Check for sand from above (highest priority - sand is denser)
+      bool sandDirectlyAbove = !atTop && above == MAT_SAND;
+      if (sandDirectlyAbove) {
+        fragColor = encodeMaterial(MAT_SAND);
+        break;
+      }
+      
+      // Check for sand sliding from diagonal
+      bool sandAboveLeft = !atTop && !atRight && aboveLeft == MAT_SAND;
+      bool sandAboveRight = !atTop && !atLeft && aboveRight == MAT_SAND;
+      
+      if (sandAboveLeft) {
+        vec4 left = texture(u_texture, v_uv + DIR_LEFT * u_texelSize);
+        bool leftBlocked = getMaterial(left) != MAT_EMPTY;
+        bool canSlideFromLeft = leftBlocked || atBottom;
+        if (canSlideFromLeft) {
+          fragColor = encodeMaterial(MAT_SAND);
+          break;
+        }
+      }
+      
+      if (sandAboveRight) {
+        vec4 right = texture(u_texture, v_uv + DIR_RIGHT * u_texelSize);
+        bool rightBlocked = getMaterial(right) != MAT_EMPTY;
+        bool canSlideFromRight = rightBlocked || atBottom;
+        if (canSlideFromRight) {
+          fragColor = encodeMaterial(MAT_SAND);
+          break;
+        }
+      }
+      
+      // Check for water from above
+      bool waterDirectlyAbove = !atTop && above == MAT_WATER;
+      if (waterDirectlyAbove) {
+        fragColor = encodeMaterial(MAT_WATER);
+        break;
+      }
+      
+      // Check for water sliding from diagonal
+      bool waterAboveLeft = !atTop && !atRight && aboveLeft == MAT_WATER;
+      bool waterAboveRight = !atTop && !atLeft && aboveRight == MAT_WATER;
+      
+      if (waterAboveLeft) {
+        vec4 left = texture(u_texture, v_uv + DIR_LEFT * u_texelSize);
+        bool sandToLeft = getMaterial(left) == MAT_SAND;
+        if (!sandToLeft) {
+          fragColor = encodeMaterial(MAT_WATER);
+          break;
+        }
+      }
+      
+      if (waterAboveRight) {
+        vec4 right = texture(u_texture, v_uv + DIR_RIGHT * u_texelSize);
+        bool sandToRight = getMaterial(right) == MAT_SAND;
+        if (!sandToRight) {
+          fragColor = encodeMaterial(MAT_WATER);
+          break;
+        }
+      }
+      
+      // Check for water flowing horizontally
+      vec4 left = texture(u_texture, v_uv + DIR_LEFT * u_texelSize);
+      vec4 right = texture(u_texture, v_uv + DIR_RIGHT * u_texelSize);
+      int matLeft = getMaterial(left);
+      int matRight = getMaterial(right);
+      
+      bool waterToLeft = !atRight && matLeft == MAT_WATER;
+      bool waterToRight = !atLeft && matRight == MAT_WATER;
+      
+      if (!waterToLeft && !waterToRight) break;
+      
+      // Random choice for symmetric flow
+      float rand = fract(sin(dot(v_uv * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);
+      bool preferLeft = rand < 0.5;
+      
+      if (
+        waterToLeft && waterToRight ||
+        waterToLeft ||
+        waterToRight
+      ) {
+        fragColor = encodeMaterial(MAT_WATER);
+        break;
+      } 
+    }
+      
+    case MAT_SAND: {
+      // Sand particle - check if it should fall
+      bool canFallThrough = below == MAT_EMPTY || below == MAT_WATER;
+      bool canFallDown = !atBottom && canFallThrough;
+      
+      if (canFallDown) {
+        fragColor = encodeMaterial(MAT_EMPTY);
+        break;
+      }
+      
+      // Check diagonal falling
+      bool canFallThroughLeft = belowLeft == MAT_EMPTY || belowLeft == MAT_WATER;
+      bool canFallThroughRight = belowRight == MAT_EMPTY || belowRight == MAT_WATER;
+      
+      bool canFallDownLeft = !atBottom && !atLeft && canFallThroughLeft;
+      bool canFallDownRight = !atBottom && !atRight && canFallThroughRight;
+      
+      if (canFallDownLeft || canFallDownRight) {
+        fragColor = encodeMaterial(MAT_EMPTY);
+        break;
+      }
+      
+      // Sand stays in place
+      break;
+    }
+      
+    case MAT_WATER: {
+      // Water - check if being displaced by sand first
+      bool sandFallingFromAbove = !atTop && above == MAT_SAND;
+      if (sandFallingFromAbove) {
+        fragColor = encodeMaterial(MAT_SAND);
+        break;
+      }
+      
+      // Check sand sliding into water from diagonals
+      bool sandFromAboveLeft = !atTop && !atRight && aboveLeft == MAT_SAND;
+      bool sandFromAboveRight = !atTop && !atLeft && aboveRight == MAT_SAND;
+      
+      if (sandFromAboveLeft) {
+        vec4 left = texture(u_texture, v_uv + DIR_LEFT * u_texelSize);
+        bool leftNotEmpty = getMaterial(left) != MAT_EMPTY;
+        bool sandCanSlideIn = leftNotEmpty || atBottom;
+
+        if (sandCanSlideIn) {
+          fragColor = encodeMaterial(MAT_SAND);
+          break;
+        }
+      }
+      
+      if (sandFromAboveRight) {
+        vec4 right = texture(u_texture, v_uv + DIR_RIGHT * u_texelSize);
+        bool rightNotEmpty = getMaterial(right) != MAT_EMPTY;
+        bool sandCanSlideIn = rightNotEmpty || atBottom;
+        
+        if (sandCanSlideIn) {
+          fragColor = encodeMaterial(MAT_SAND);
+          break;
+        }
+      }
+      
+      // Normal water physics - falling
+      bool canFallDown = !atBottom && below == MAT_EMPTY;
+      bool canFlowDownLeft = !atBottom && !atLeft && belowLeft == MAT_EMPTY;
+      bool canFlowDownRight = !atBottom && !atRight && belowRight == MAT_EMPTY;
+
+      if (canFallDown || canFlowDownLeft || canFlowDownRight) {
+        fragColor = encodeMaterial(MAT_EMPTY);
+        break;
+      }
+      
+      // Horizontal spreading
+      vec4 left = texture(u_texture, v_uv + DIR_LEFT * u_texelSize);
+      vec4 right = texture(u_texture, v_uv + DIR_RIGHT * u_texelSize);
+      int matLeft = getMaterial(left);
+      int matRight = getMaterial(right);
+      
+      bool canFlowLeft = !atLeft && matLeft == MAT_EMPTY;
+      bool canFlowRight = !atRight && matRight == MAT_EMPTY;
+      
+      if (!canFlowLeft && !canFlowRight) {
+        break;
+      }
+      
+      // Random horizontal movement for fluid behavior
+      float rand = fract(sin(dot(v_uv * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);
+      bool preferLeft = rand < 0.5;
+      
+      if (
+        canFlowLeft && preferLeft || 
+        canFlowRight && !preferLeft ||
+        canFlowLeft || 
+        canFlowDownRight
+      ) {
+        fragColor = encodeMaterial(MAT_EMPTY);
+        break;
+      }
+    
+    }
+      
+    case MAT_STONE:
+      // Stone doesn't move
+      break;
+      
+    default:
+      // Unknown material - keep as is
+      break;
+  }
+}`
+
+// Fragment shader for rendering the state texture to screen
+const renderFragment = glsl`#version 300 es
+precision mediump float;
+in vec2 v_uv;
+${uniform.sampler2D('u_texture')}
+${uniform.vec3('u_palette', { size: MATERIAL_SIZE })}
+out vec4 fragColor;
+
+// Material constants (must match stepFragment)
+const int MAT_EMPTY = 0;
+const int MAT_SAND = 1;
+const int MAT_WATER = 2;
+const int MAT_STONE = 3;
+
+// Helper function to decode material from RGB
+int getMaterial(vec4 color) {
+  return int(color.r + color.g * 2.0 + color.b * 4.0);
+}
+
+void main() {
+  vec4 texel = texture(u_texture, v_uv);
+  int material = getMaterial(texel);
+  
+  if (material == MAT_EMPTY) {
+    fragColor = vec4(0.0, 0.0, 0.0, 1.0); // Black background
+  } else if (material > 0 && material <= ${MATERIAL_SIZE}) {
+    fragColor = vec4(u_palette[material - 1], 1.0);
+  } else {
+    fragColor = vec4(1.0, 0.0, 1.0, 1.0); // Magenta for unknown materials
+  }
+}`
+
+// --- Create programs ---
+const { program: stepProgram, schema: stepSchema } = compile(gl, vertex, stepFragment)
+const stepView = view(gl, stepProgram, stepSchema)
+
+const { program: renderProgram, schema: renderSchema } = compile(gl, vertex, renderFragment)
+const renderView = view(gl, renderProgram, {
+  ...renderSchema,
+  attributes: {
+    ...renderSchema.attributes,
+    a_vertex: {
+      ...renderSchema.attributes.a_vertex,
+      buffer: stepView.attributes.a_vertex.buffer,
+    },
+  },
+})
+
+gl.useProgram(renderProgram)
+renderView.uniforms.u_palette.set(
+  new Float32Array(Object.values(MATERIALS).flatMap(({ color }) => color)),
+)
+
+gl.useProgram(stepProgram)
+// Setup quad
+stepView.attributes.a_vertex.set(new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]))
+
+// Initialize two framebuffers (with their respective texture) for ping-pong
+const framebufferOptions = {
+  attachment: 'color',
+  width: WIDTH,
+  height: HEIGHT,
+  type: 'UNSIGNED_BYTE',
+  magFilter: 'NEAREST',
+  minFilter: 'NEAREST',
+  internalFormat: 'RGBA',
+  format: 'RGBA',
+} satisfies FramebufferOptions
+
+let read = createFramebuffer(gl, framebufferOptions)
+let write = createFramebuffer(gl, framebufferOptions)
+
+// Initialize state texture (empty)
+const initData = new Uint8Array(
+  (function* () {
+    for (let i = 0; i < WIDTH * HEIGHT; i++) {
+      yield 0 // Red channel (material ID)
+      yield 0 // Green channel
+      yield 0 // Blue channel
+      yield 255 // Alpha channel
+    }
+  })(),
+)
+
+gl.bindTexture(gl.TEXTURE_2D, read.texture)
+gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, WIDTH, HEIGHT, gl.RGBA, gl.UNSIGNED_BYTE, initData)
+
+gl.bindTexture(gl.TEXTURE_2D, write.texture)
+gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, WIDTH, HEIGHT, gl.RGBA, gl.UNSIGNED_BYTE, initData)
+
+function step() {
+  // Run sand simulation step: render to write-framebuffer using read-texture as input
+  gl.bindFramebuffer(gl.FRAMEBUFFER, write.framebuffer)
+  gl.viewport(0, 0, WIDTH, HEIGHT)
+  gl.useProgram(stepProgram)
+
+  gl.activeTexture(gl.TEXTURE0)
+  gl.bindTexture(gl.TEXTURE_2D, read.texture)
+
+  stepView.uniforms.u_texture.set(0)
+  stepView.uniforms.u_texelSize.set(1 / WIDTH, 1 / HEIGHT)
+
+  stepView.attributes.a_vertex.bind()
+  gl.drawArrays(gl.TRIANGLES, 0, 6)
+}
+
+function render() {
+  // Render to screen
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
+  gl.useProgram(renderProgram)
+
+  gl.activeTexture(gl.TEXTURE0)
+  gl.bindTexture(gl.TEXTURE_2D, write.texture)
+
+  renderView.uniforms.u_texture.set(0)
+  renderView.attributes.a_vertex.bind()
+
+  gl.drawArrays(gl.TRIANGLES, 0, 6)
+}
+
+function animate() {
+  if (playing) {
+    step()
+    render()
+    // Swap read and write buffers
+    ;[read, write] = [write, read]
+    requestAnimationFrame(animate)
+  }
+}
+
+// Start animation
+playing = true
+animate()