Fix issue with transparency on some devices

posts/2023-08-25_wasm-game-of-life-2.md

@@ -6,6 +6,7 @@ resources:
 - wasm-life-2/game.wat
 - wasm-life-2/vertex.glsl
 - wasm-life-2/fragment.glsl
+unlisted: true
 ---
 
 This post is part 2 of my Webassembly Game of Life series, read part 1

scripts/wasm-life-2/controller.js

@@ -47,6 +47,15 @@ export async function setup(params, wasmModule) {
   gameState.width = Math.floor(parseInt(canvas.width) / pixelSize)
   gameState.height = Math.floor(parseInt(canvas.height) / pixelSize)
 
+  const texture = gl.createTexture()
+  gl.activeTexture(gl.TEXTURE0)
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.pixelStorei( gl.UNPACK_ALIGNMENT, 1 )
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
   initialize()
   onThemeChange()
   drawBoard()
@@ -84,12 +93,17 @@ export async function onThemeChange() {
   const {gl, shader} = gameState
 
   const drawColorString = getComputedStyle(gameState.canvas).getPropertyValue('color')
-  const [_match, ...colorValues] = /rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/.exec(drawColorString)
-  const drawColor = colorValues.map(n => parseFloat(n) / 255)
+  const drawColor = parseColorString(drawColorString)
+
+  const backgroundColorString = getComputedStyle(gameState.canvas).getPropertyValue('--background')
+  const backgroundColor = parseColorString(backgroundColorString)
 
   const drawColorLocation = gl.getUniformLocation(shader, "drawColor")
   gl.uniform3fv(drawColorLocation, drawColor)
 
+  const backgroundColorLocation = gl.getUniformLocation(shader, "backgroundColor")
+  gl.uniform3fv(backgroundColorLocation, backgroundColor)
+
   drawBoard()
 }
 
@@ -159,20 +173,22 @@ function drawBoard() {
   const boardLength = gameExports.getBoardLength()
   const boardData = (new Uint8Array(wasmBuffer)).slice(boardPointer, boardPointer + boardLength)
 
-  const texture = gl.createTexture()
-  gl.activeTexture(gl.TEXTURE0)
-  gl.bindTexture(gl.TEXTURE_2D, texture)
-  gl.pixelStorei( gl.UNPACK_ALIGNMENT, 1 )
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.ALPHA, width, height, 0, gl.ALPHA, gl.UNSIGNED_BYTE, boardData)
+  gl.drawArrays(gl.TRIANGLES, 0, 6)
+}
 
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+function parseColorString(string) {
+  const rgbMatch = /rgb\(([0-9]+), ?([0-9]+), ?([0-9]+)\)/i.exec(string)
+  if (rgbMatch)
+    return rgbMatch.slice(1).map(n => parseInt(n, 10) / 255)
 
+  const hexMatch = /^\#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(string)
+  if (hexMatch)
+    return hexMatch.slice(1).map(n => parseInt(n, 16) / 255)
 
+  const shortHexMatch = /^\#([0-9a-f]){3}$/i.exec(string)
+  if (shortHexMatch)
+    return shortHexMatch.slice(1).map(n => parseInt(n, 16) / 16)
 
-  gl.clearColor(1, 1, 1, 0)
-  gl.clear(gl.COLOR_BUFFER_BIT)
-  gl.drawArrays(gl.TRIANGLES, 0, 6)
+  throw new Error(`Cannot parse color string "${string}"`)
 }

scripts/wasm-life-2/fragment.glsl

@@ -2,9 +2,13 @@ precision highp float;
 varying vec2 texCoords;
 uniform sampler2D textureSampler;
 uniform vec3 drawColor;
+uniform vec3 backgroundColor;
 
 void main() {
   vec4 textureColor = texture2D(textureSampler, texCoords);
+  float alphaValue = textureColor.a;
 
-  gl_FragColor = vec4(drawColor, textureColor.a * 255.0);
+  vec3 resultColor = mix(backgroundColor, drawColor, alphaValue * 255.0);
+
+  gl_FragColor = vec4(resultColor, 1);
 }