福野泰介の一日一創

「Life Game by WebGL」src on GitHub forked from aadebdeb/WebGL_LifeGame
「WebGLでライフゲームを作る」を元に、window.devicePixelRatio を使って、dot by dotでライフゲームが全画面で動くように改造しました。クリックでフルスクリーン表示します。ウィンドウサイズを変更するたびに、テクスチャーとCanvasのサイズを変更しているので、メモリリークもしていないはず。

ライフゲームのコア部分のGLSLによるプログラムはこちら。

precision mediump float; uniform sampler2D aTexture; uniform vec2 uResolution; varying vec2 vTextureCoordinate; void main() { vec2 scale = 1.0 / uResolution; bool isAlive = texture2D(aTexture, gl_FragCoord.xy * scale).g < 0.5 ? false : true; int sum = 0; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2(-1.0, 1.0)) * scale).g < 0.5 ? 0 : 1; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2( 0.0, 1.0)) * scale).g < 0.5 ? 0 : 1; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2( 1.0, 1.0)) * scale).g < 0.5 ? 0 : 1; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2(-1.0, 0.0)) * scale).g < 0.5 ? 0 : 1; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2( 1.0, 0.0)) * scale).g < 0.5 ? 0 : 1; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2(-1.0, -1.0)) * scale).g < 0.5 ? 0 : 1; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2( 0.0, -1.0)) * scale).g < 0.5 ? 0 : 1; sum += texture2D(aTexture, (gl_FragCoord.xy + vec2( 1.0, -1.0)) * scale).g < 0.5 ? 0 : 1; gl_FragColor = ((isAlive && (sum == 2 || sum == 3)) || (!isAlive && sum == 3)) ? vec4(0.0, 1.0, 0.0, 1.0) : vec4(0.0, 0.0, 0.0, 1.0); }

一つ前の状態がaTextureに入っていて8方向の状態を調べて次の状態を返す。まさにライフゲームのアルゴリズム通りです。C言語や、JavaScriptをやっている人ならそんなに苦労せず書けるはず。

※「precision mediump float」は精度をどう扱うかを示す精度修飾子、lowpでも良さそう（他にhighpが選択可能）。

圧倒的なGPUパワーを使いこなしましょう！

links
- WebGLでライフゲームを作る
- ライフゲーム発明者コンウェイ氏、COVID-19により亡くなる 非WebGL 重かった
- シミュレーション入門 / こどもパソコン IchigoJam でつくるライフゲーム
- Armマシン語でライフゲーム - IchigoJamとRaspberry Pi用IchigoJam RPi(beta)で動く！
- ライフゲームVRにちょうどいいルールを発見！ DNA開発環境発表に想う生命とプログラミング
- WebGL で高速に動作するライフゲーム！ 膨大なプリセットパターンがすごい！ - WebGL 総本山
- deck.gl でライフゲームを作った。 – GUNMA GIS GEEK
- Golgi: ブラウザ上で動く「細胞」風ライフゲームシミュレータ - まめめも
- lifegame 2012年一日一創 非WebGL
- lifegamecb 2012年一日一創 チェックボックス
- lifeart 2012年一日一創 RGBレイヤー