glslkit-webgl 0.1.0.pre

data/sample/generated/cube_shaders.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+# 自動生成 (rake glslkit:embed)。手で編集しない。
+# 再生成するには: bundle exec rake glslkit:embed[shaders_dir,out_dir]
+#
+# MANIFESTのgenerated_atが1970-01-01なのはバグではない。生成の
+# 冪等性(同じ入力から同じ出力になること)のための固定値であり、
+# 実行時刻を使うと同じ入力でも実行のたびにgit diffが出てしまう。
+# 再現性はstages.*.digest(実データから計算される)が担保している。
+
+module CubeShaders
+  VERTEX = <<'GLSLKIT_VERTEX_SRC'.freeze
+#version 300 es
+layout(location = 0) in vec3 a_position;
+layout(location = 1) in vec2 a_uv;
+uniform mat4 u_mvp;
+out vec2 v_uv;
+void main() {
+  v_uv = a_uv;
+  gl_Position = u_mvp * vec4(a_position, 1.0);
+}
+GLSLKIT_VERTEX_SRC
+
+  FRAGMENT = <<'GLSLKIT_FRAGMENT_SRC'.freeze
+#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+out vec4 frag_color;
+void main() {
+  frag_color = texture(u_texture, v_uv);
+}
+GLSLKIT_FRAGMENT_SRC
+
+  MANIFEST = {"schema_version"=>1,
+ "generated_at"=>"1970-01-01T00:00:00Z",
+ "generator"=>"glslkit/0.1.0.pre",
+ "programs"=>
+  {"cube"=>
+    {"digest"=>
+      "a3743db5891346c02adf840ae7246c1b7e911c4511eab0290dcc81a7e80eb08a",
+     "stages"=>
+      {"vertex"=>
+        {"path"=>"cube.vert",
+         "digest"=>
+          "8f1de9ac637f6872e2563399c33af571bc74741e651726eb2ece6e69c03ce433",
+         "url"=>"cube.vert"},
+       "fragment"=>
+        {"path"=>"cube.frag",
+         "digest"=>
+          "92a077871371847d2a1cd568bc082d5bc2e840293e1c0cecb0ae39559e114dc1",
+         "url"=>"cube.frag"}},
+     "attributes"=>
+      [{"name"=>"a_position", "type"=>"vec3", "location"=>0, "array_size"=>1},
+       {"name"=>"a_uv", "type"=>"vec2", "location"=>1, "array_size"=>1}],
+     "uniforms"=>
+      [{"name"=>"u_mvp",
+        "type"=>"mat4",
+        "array_size"=>1,
+        "setter"=>"uniformMatrix4fv",
+        "matrix"=>true,
+        "sampler"=>false,
+        "components"=>16,
+        "element_count"=>16,
+        "stages"=>["vertex"]},
+       {"name"=>"u_texture",
+        "type"=>"sampler2D",
+        "array_size"=>1,
+        "setter"=>"uniform1iv",
+        "matrix"=>false,
+        "sampler"=>true,
+        "components"=>1,
+        "element_count"=>1,
+        "stages"=>["fragment"]}],
+     "uniform_blocks"=>[],
+     "outputs"=>[{"name"=>"frag_color", "type"=>"vec4", "location"=>nil}]}}}.freeze
+
+  SOURCE_MAPS = {
+    vertex: {"version"=>1, "files"=>["cube.vert"], "segments"=>[[2, 0, 2]]},
+    fragment: {"version"=>1, "files"=>["cube.frag"], "segments"=>[[2, 0, 2]]}
+  }.freeze
+end

data/sample/generated/neon_shaders.rb

@@ -0,0 +1,162 @@
+# frozen_string_literal: true
+
+# 自動生成 (rake glslkit:embed)。手で編集しない。
+# 再生成するには: bundle exec rake glslkit:embed[shaders_dir,out_dir]
+#
+# MANIFESTのgenerated_atが1970-01-01なのはバグではない。生成の
+# 冪等性(同じ入力から同じ出力になること)のための固定値であり、
+# 実行時刻を使うと同じ入力でも実行のたびにgit diffが出てしまう。
+# 再現性はstages.*.digest(実データから計算される)が担保している。
+
+module NeonShaders
+  VERTEX = <<'GLSLKIT_VERTEX_SRC'.freeze
+#version 300 es
+layout(location = 0) in vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+GLSLKIT_VERTEX_SRC
+
+  FRAGMENT = <<'GLSLKIT_FRAGMENT_SRC'.freeze
+#version 300 es
+precision highp float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+out vec4 frag_color;
+
+#define PI 3.14159265359
+
+
+mat2 rotate2d(float angle) {
+  float c = cos(angle), s = sin(angle);
+  return mat2(c, -s, s, c);
+}
+
+float sdTorus(vec3 p, vec2 t) {
+  vec2 q = vec2(length(p.xz) - t.x, p.y);
+  return length(q) - t.y;
+}
+
+vec3 palette(float t) {
+  return 0.55 + 0.45 * cos(6.28318 * (vec3(0.02, 0.18, 0.38) * t + vec3(0.0, 0.18, 0.42)));
+}
+
+float scene(vec3 p) {
+  p.xz *= rotate2d(u_time * 0.32);
+  p.xy *= rotate2d(sin(u_time * 0.27) * 0.55);
+
+  float angle = atan(p.z, p.x);
+  float pulse = 0.10 * sin(angle * 7.0 + u_time * 2.4);
+  float portal = sdTorus(p, vec2(1.25, 0.17 + pulse));
+
+  vec3 orb = p;
+  orb.xz *= rotate2d(-u_time * 0.7);
+  orb -= vec3(1.25, sin(u_time * 1.8) * 0.22, 0.0);
+  float satellite = length(orb) - 0.11;
+  return min(portal, satellite);
+}
+
+vec3 normalAt(vec3 p) {
+  vec2 e = vec2(0.0015, 0.0);
+  float d = scene(p);
+  return normalize(vec3(
+    scene(p + e.xyy) - d,
+    scene(p + e.yxy) - d,
+    scene(p + e.yyx) - d
+  ));
+}
+
+float raymarch(vec3 origin, vec3 direction, out vec3 point) {
+  float distanceTravelled = 0.0;
+  for (int i = 0; i < 96; i++) {
+    point = origin + direction * distanceTravelled;
+    float distanceToScene = scene(point);
+    if (distanceToScene < 0.001 || distanceTravelled > 12.0) break;
+    distanceTravelled += distanceToScene * 0.72;
+  }
+  return distanceTravelled;
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy * 2.0 - u_resolution) / u_resolution.y;
+  float vignette = max(0.0, 1.0 - dot(uv, uv) * 0.28);
+
+  vec3 origin = vec3(0.0, 0.0, 4.2);
+  vec3 direction = normalize(vec3(uv, -1.8));
+  vec3 point;
+  float travelled = raymarch(origin, direction, point);
+
+  vec3 color = vec3(0.006, 0.008, 0.025);
+  float rays = pow(max(0.0, 1.0 - length(uv)), 5.0);
+  color += vec3(0.12, 0.03, 0.30) * rays;
+
+  if (travelled < 12.0) {
+    vec3 normal = normalAt(point);
+    vec3 light = normalize(vec3(0.7, 1.2, 2.0));
+    float diffuse = max(dot(normal, light), 0.0);
+    float rim = pow(1.0 - max(dot(normal, -direction), 0.0), 2.4);
+    float bands = 0.5 + 0.5 * sin(atan(point.z, point.x) * 9.0 - u_time * 3.0);
+    vec3 neon = palette(bands + u_time * 0.06);
+    color += neon * (0.18 + diffuse * 0.65 + rim * 2.4);
+    color += pow(max(dot(reflect(-light, normal), -direction), 0.0), 32.0);
+  }
+
+  float glowDistance = abs(length(uv) - 0.47 - sin(atan(uv.y, uv.x) * 7.0 + u_time) * 0.018);
+  color += palette(u_time * 0.07 + length(uv)) * 0.012 / max(glowDistance, 0.008);
+
+  color *= vignette;
+  color = pow(color, vec3(0.82));
+  frag_color = vec4(color, 1.0);
+}
+GLSLKIT_FRAGMENT_SRC
+
+  MANIFEST = {"schema_version"=>1,
+ "generated_at"=>"1970-01-01T00:00:00Z",
+ "generator"=>"glslkit/0.1.0.pre",
+ "programs"=>
+  {"neon"=>
+    {"digest"=>
+      "b7fb9408aaff4ba38dd6a9be7429fb99962e9878a085e5e034bf1d9f8b3ea5a7",
+     "stages"=>
+      {"vertex"=>
+        {"path"=>"neon.vert",
+         "digest"=>
+          "9cf045b60aee6e157a1b7b83b2ce299dd479f8d2d16d2418914db2fedeb37627",
+         "url"=>"neon.vert"},
+       "fragment"=>
+        {"path"=>"neon.frag",
+         "digest"=>
+          "71c73491886569fc5546df1510755b3023a784aec25b635f31cdcc76facece27",
+         "url"=>"neon.frag"}},
+     "attributes"=>
+      [{"name"=>"a_position", "type"=>"vec2", "location"=>0, "array_size"=>1}],
+     "uniforms"=>
+      [{"name"=>"u_time",
+        "type"=>"float",
+        "array_size"=>1,
+        "setter"=>"uniform1fv",
+        "matrix"=>false,
+        "sampler"=>false,
+        "components"=>1,
+        "element_count"=>1,
+        "stages"=>["fragment"]},
+       {"name"=>"u_resolution",
+        "type"=>"vec2",
+        "array_size"=>1,
+        "setter"=>"uniform2fv",
+        "matrix"=>false,
+        "sampler"=>false,
+        "components"=>2,
+        "element_count"=>2,
+        "stages"=>["fragment"]}],
+     "uniform_blocks"=>[],
+     "outputs"=>[{"name"=>"frag_color", "type"=>"vec4", "location"=>nil}]}}}.freeze
+
+  SOURCE_MAPS = {
+    vertex: {"version"=>1, "files"=>["neon.vert"], "segments"=>[[2, 0, 2]]},
+    fragment: {"version"=>1,
+ "files"=>["neon.frag", "common/sdf.glsl", "common/color.glsl"],
+ "segments"=>[[2, 0, 2], [10, 1, 2], [20, 2, 2], [24, 0, 12]]}
+  }.freeze
+end

data/sample/generated-broken/neon-broken_shaders.rb

@@ -0,0 +1,162 @@
+# frozen_string_literal: true
+
+# 自動生成 (rake glslkit:embed)。手で編集しない。
+# 再生成するには: bundle exec rake glslkit:embed[shaders_dir,out_dir]
+#
+# MANIFESTのgenerated_atが1970-01-01なのはバグではない。生成の
+# 冪等性(同じ入力から同じ出力になること)のための固定値であり、
+# 実行時刻を使うと同じ入力でも実行のたびにgit diffが出てしまう。
+# 再現性はstages.*.digest(実データから計算される)が担保している。
+
+module NeonBrokenShaders
+  VERTEX = <<'GLSLKIT_VERTEX_SRC'.freeze
+#version 300 es
+layout(location = 0) in vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+GLSLKIT_VERTEX_SRC
+
+  FRAGMENT = <<'GLSLKIT_FRAGMENT_SRC'.freeze
+#version 300 es
+precision highp float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+out vec4 frag_color;
+
+#define PI 3.14159265359
+
+
+mat2 rotate2d(float angle) {
+  float c = cos(angle), s = sin(angle)
+  return mat2(c, -s, s, c);
+}
+
+float sdTorus(vec3 p, vec2 t) {
+  vec2 q = vec2(length(p.xz) - t.x, p.y);
+  return length(q) - t.y;
+}
+
+vec3 palette(float t) {
+  return 0.55 + 0.45 * cos(6.28318 * (vec3(0.02, 0.18, 0.38) * t + vec3(0.0, 0.18, 0.42)));
+}
+
+float scene(vec3 p) {
+  p.xz *= rotate2d(u_time * 0.32);
+  p.xy *= rotate2d(sin(u_time * 0.27) * 0.55);
+
+  float angle = atan(p.z, p.x);
+  float pulse = 0.10 * sin(angle * 7.0 + u_time * 2.4);
+  float portal = sdTorus(p, vec2(1.25, 0.17 + pulse));
+
+  vec3 orb = p;
+  orb.xz *= rotate2d(-u_time * 0.7);
+  orb -= vec3(1.25, sin(u_time * 1.8) * 0.22, 0.0);
+  float satellite = length(orb) - 0.11;
+  return min(portal, satellite);
+}
+
+vec3 normalAt(vec3 p) {
+  vec2 e = vec2(0.0015, 0.0);
+  float d = scene(p);
+  return normalize(vec3(
+    scene(p + e.xyy) - d,
+    scene(p + e.yxy) - d,
+    scene(p + e.yyx) - d
+  ));
+}
+
+float raymarch(vec3 origin, vec3 direction, out vec3 point) {
+  float distanceTravelled = 0.0;
+  for (int i = 0; i < 96; i++) {
+    point = origin + direction * distanceTravelled;
+    float distanceToScene = scene(point);
+    if (distanceToScene < 0.001 || distanceTravelled > 12.0) break;
+    distanceTravelled += distanceToScene * 0.72;
+  }
+  return distanceTravelled;
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy * 2.0 - u_resolution) / u_resolution.y;
+  float vignette = max(0.0, 1.0 - dot(uv, uv) * 0.28);
+
+  vec3 origin = vec3(0.0, 0.0, 4.2);
+  vec3 direction = normalize(vec3(uv, -1.8));
+  vec3 point;
+  float travelled = raymarch(origin, direction, point);
+
+  vec3 color = vec3(0.006, 0.008, 0.025);
+  float rays = pow(max(0.0, 1.0 - length(uv)), 5.0);
+  color += vec3(0.12, 0.03, 0.30) * rays;
+
+  if (travelled < 12.0) {
+    vec3 normal = normalAt(point);
+    vec3 light = normalize(vec3(0.7, 1.2, 2.0));
+    float diffuse = max(dot(normal, light), 0.0);
+    float rim = pow(1.0 - max(dot(normal, -direction), 0.0), 2.4);
+    float bands = 0.5 + 0.5 * sin(atan(point.z, point.x) * 9.0 - u_time * 3.0);
+    vec3 neon = palette(bands + u_time * 0.06);
+    color += neon * (0.18 + diffuse * 0.65 + rim * 2.4);
+    color += pow(max(dot(reflect(-light, normal), -direction), 0.0), 32.0);
+  }
+
+  float glowDistance = abs(length(uv) - 0.47 - sin(atan(uv.y, uv.x) * 7.0 + u_time) * 0.018);
+  color += palette(u_time * 0.07 + length(uv)) * 0.012 / max(glowDistance, 0.008);
+
+  color *= vignette;
+  color = pow(color, vec3(0.82));
+  frag_color = vec4(color, 1.0);
+}
+GLSLKIT_FRAGMENT_SRC
+
+  MANIFEST = {"schema_version"=>1,
+ "generated_at"=>"1970-01-01T00:00:00Z",
+ "generator"=>"glslkit/0.1.0.pre",
+ "programs"=>
+  {"neon-broken"=>
+    {"digest"=>
+      "623464715d1428d30dc76fde676b3d68e8362d199b2992afdbec9d755a1ac478",
+     "stages"=>
+      {"vertex"=>
+        {"path"=>"neon-broken.vert",
+         "digest"=>
+          "9cf045b60aee6e157a1b7b83b2ce299dd479f8d2d16d2418914db2fedeb37627",
+         "url"=>"neon-broken.vert"},
+       "fragment"=>
+        {"path"=>"neon-broken.frag",
+         "digest"=>
+          "ed19c9ae89d14241a3e5f0ec39dbed94a70b4666e5eeb468d9d618b388194a15",
+         "url"=>"neon-broken.frag"}},
+     "attributes"=>
+      [{"name"=>"a_position", "type"=>"vec2", "location"=>0, "array_size"=>1}],
+     "uniforms"=>
+      [{"name"=>"u_time",
+        "type"=>"float",
+        "array_size"=>1,
+        "setter"=>"uniform1fv",
+        "matrix"=>false,
+        "sampler"=>false,
+        "components"=>1,
+        "element_count"=>1,
+        "stages"=>["fragment"]},
+       {"name"=>"u_resolution",
+        "type"=>"vec2",
+        "array_size"=>1,
+        "setter"=>"uniform2fv",
+        "matrix"=>false,
+        "sampler"=>false,
+        "components"=>2,
+        "element_count"=>2,
+        "stages"=>["fragment"]}],
+     "uniform_blocks"=>[],
+     "outputs"=>[{"name"=>"frag_color", "type"=>"vec4", "location"=>nil}]}}}.freeze
+
+  SOURCE_MAPS = {
+    vertex: {"version"=>1, "files"=>["neon-broken.vert"], "segments"=>[[2, 0, 2]]},
+    fragment: {"version"=>1,
+ "files"=>["neon-broken.frag", "common/sdf.glsl", "common/color.glsl"],
+ "segments"=>[[2, 0, 2], [10, 1, 2], [20, 2, 2], [24, 0, 12]]}
+  }.freeze
+end

data/sample/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>glslkit-webgl textured cube</title>
+  <style>
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #161923; }
+    canvas { width: min(80vw, 640px); height: min(80vw, 640px); border: 1px solid #3a4055; }
+  </style>
+</head>
+<body>
+  <canvas id="canvas" width="640" height="640"></canvas>
+  <script src="../shim/glslkit-webgl.js" data-entry="./app.rb"></script>
+</body>
+</html>

data/sample/neon-error.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>glslkit-webgl compile error demo</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
+      gap: 20px; padding: 32px 16px;
+      background: radial-gradient(circle at 50% 15%, #1c1430, #05060c 70%);
+      font: 15px/1.6 system-ui, sans-serif; color: #ece9ff;
+    }
+    h1 {
+      font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #b9a6ff;
+      margin: 0; text-align: center;
+    }
+    canvas {
+      width: min(70vw, 480px); height: min(70vw, 480px); border-radius: 14px;
+      box-shadow: 0 0 60px #6b2bff22, inset 0 0 0 1px #ffffff14; background: #0a0a12;
+    }
+    #status { font-size: 13px; color: #8f88b8; min-height: 1.2em; text-align: center; }
+    #panel {
+      width: min(92vw, 640px); border: 1px solid #3a2f66; border-radius: 12px;
+      background: #12101f; padding: 20px 24px; display: none;
+    }
+    #panel.visible { display: block; }
+    #panel h2 {
+      margin: 0 0 14px; font-size: 13px; color: #ff6b81; letter-spacing: .08em;
+      text-transform: uppercase;
+    }
+    .row { display: flex; gap: 12px; margin: 8px 0; font-size: 14px; align-items: baseline; }
+    .row .label {
+      width: 64px; flex: none; color: #8f88b8; font-size: 11px; letter-spacing: .06em;
+      text-transform: uppercase;
+    }
+    .row .value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    #err-file { color: #ffd166; font-weight: 700; font-size: 16px; }
+    /* 抜粋が取得できたときだけ枠を出す(fetch失敗時に空の帯が残らないように)。 */
+    #excerpt.has-content {
+      margin-top: 14px; background: #0a0a12; border-radius: 8px; padding: 10px 0;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
+      color: #a9a3d6; overflow-x: auto;
+    }
+    #excerpt .line { display: block; padding: 1px 14px; white-space: pre; }
+    #excerpt .line.error-line { background: #4a1030; color: #ffb3c6; }
+    details { margin-top: 14px; }
+    summary { cursor: pointer; color: #8f88b8; font-size: 12.5px; }
+    #err-raw-log {
+      white-space: pre-wrap; background: #0a0a12; border-radius: 8px; padding: 12px;
+      margin-top: 8px; font-size: 12px; color: #8f88b8; overflow-x: auto;
+    }
+    button {
+      background: #6b2bff; color: white; border: none; border-radius: 8px; padding: 10px 20px;
+      font: inherit; font-weight: 600; cursor: pointer; margin-top: 18px;
+    }
+    button:hover { background: #7c40ff; }
+  </style>
+</head>
+<body>
+  <h1>glslkit-webgl &middot; compile error &rarr; original file &amp; line</h1>
+  <canvas id="canvas" width="480" height="480"></canvas>
+  <p id="status">読み込み中&hellip;</p>
+
+  <div id="panel">
+    <h2>Shader compile error</h2>
+    <div class="row"><span class="label">stage</span><span class="value" id="err-stage"></span></div>
+    <div class="row"><span class="label">file</span><span class="value" id="err-file"></span></div>
+    <div class="row"><span class="label">line</span><span class="value" id="err-line"></span></div>
+    <div class="row"><span class="label">message</span><span class="value" id="err-message"></span></div>
+    <div id="excerpt"></div>
+    <details>
+      <summary>raw compiler log</summary>
+      <pre id="err-raw-log"></pre>
+    </details>
+    <button id="retry">正常版に切り替えて描画する</button>
+  </div>
+
+  <script src="../shim/glslkit-webgl.js" data-entry="./neon-error.rb"></script>
+</body>
+</html>

data/sample/neon-error.rb

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+# M10d: シェーダのコンパイルエラーが、includeされた元ファイルの名前と行番号を
+# 指したままRubyの例外として上がってくることを見せるデモ。
+#
+# 壊れているのは common/sdf.glsl 側(webgl/sample/shaders-broken/)であり、
+# neon.frag 直下ではない — エラーメッセージが「どのファイルの include 先が
+# 壊れているか」まで教えてくれることが本gemの中核価値なので、あえて
+# include の奥で壊している。
+require_relative "../lib/glslkit/webgl"
+require_relative "error_panel"
+require_relative "generated-broken/neon-broken_shaders"
+require_relative "generated/neon_shaders"
+
+document = JS.global[:document]
+
+set_text = ->(id, value) { document.call(:getElementById, id)[:textContent] = value.to_s }
+set_status = ->(value) { set_text.call("status", value) }
+
+build_program = ->(ctx, shaders, name) {
+  ctx.program(Glslkit::Manifest.parse(shaders::MANIFEST), name,
+    vertex: shaders::VERTEX, fragment: shaders::FRAGMENT,
+    source_maps: {
+      vertex: Glslkit::SourceMap.from_h(shaders::SOURCE_MAPS[:vertex]),
+      fragment: Glslkit::SourceMap.from_h(shaders::SOURCE_MAPS[:fragment])
+    })
+}
+
+fullscreen_triangle = {a_position: {data: [-1.0, -1.0, 3.0, -1.0, -1.0, 3.0], components: 2}}
+
+start_render_loop = ->(ctx, program, geometry) {
+  ctx.viewport
+  program.set(:u_resolution, [ctx.width.to_f, ctx.height.to_f])
+  ctx.loop do |seconds|
+    program.set(:u_time, seconds)
+    ctx.draw(geometry)
+  end
+}
+
+# 壊れた行の前後を、includeされた元ファイル(common/sdf.glsl)自体から
+# fetchして見せる(参考情報。任意)。file:// で開く等でfetchが失敗しても
+# パネル本体(file/line/message/raw_log)の表示は壊さない。
+#
+# M11: 元は .await ベースだったが、spike/09-fetch.htmlの実機確認で
+# 「JS::Object#await は RubyVM#evalAsync/RbValue#callAsync からしか呼べない」
+# ことが判明した。この.rbは webgl/shim/glslkit-webgl.js
+# (JS::RequireRemote.instance.load 経由)でロードされ、evalAsyncされているのは
+# そのロード処理自体であって、ロードされたこのファイルのトップレベルは
+# その対象に含まれない — そのため.awaitは常に失敗し、ここは(rescueで
+# 握り潰されて)一度も動いていなかった可能性が高い。.then + Procに書き換える。
+#
+# M11f: 「参考情報なので握り潰す」自体は変えないが、Glslkit::WebGL.debugが
+# trueのときだけconsoleに理由を出すようにする。M10dの見た目上の不具合が
+# 実は.awaitの失敗だったのに気づけなかった反省(このファイル自身の履歴)。
+debug_warn = ->(reason) { JS.global[:console].call(:warn, "[neon-error] source excerpt skipped: #{reason}") if Glslkit::WebGL.debug }
+
+show_source_excerpt = ->(file, line) do
+  next unless line
+
+  on_response = proc do |response|
+    if response[:ok] == JS::True
+      response.call(:text)
+    else
+      debug_warn.call("fetch #{file} responded with status=#{response[:status]}")
+      nil
+    end
+  end
+  on_text = proc do |text|
+    next if text.nil?
+
+    lines = text.to_s.split("\n", -1)
+    from = [line - 3, 0].max
+    to = [line + 2, lines.length - 1].min
+
+    container = document.call(:getElementById, "excerpt")
+    (from..to).each do |index|
+      line_number = index + 1
+      span = document.call(:createElement, "span")
+      span[:className] = (line_number == line) ? "line error-line" : "line"
+      span[:textContent] = format("%3d| %s", line_number, lines[index])
+      container.call(:appendChild, span)
+    end
+    # fetchが成功して実際に行を追加できたときだけ枠を見せる。file://で開いた
+    # 場合などfetchが失敗すると、ここに到達せず空の帯が残ることはない。
+    container[:className] = "has-content"
+  end
+  on_rejected = proc { |error| debug_warn.call("fetch #{file} rejected: #{error}") }
+  JS.global.fetch(file).call(:then, on_response).call(:then, on_text).call(:catch, on_rejected)
+rescue => e
+  debug_warn.call("synchronous error before fetch: #{e.class}: #{e.message}")
+end
+
+document.call(:getElementById, "retry").call(:addEventListener, "click") do
+  ctx = Glslkit::WebGL.context("#canvas")
+  program = build_program.call(ctx, NeonShaders, "neon")
+  geometry = ctx.geometry(program: program, attributes: fullscreen_triangle)
+
+  document.call(:getElementById, "panel")[:className] = ""
+  set_status.call("正常版で描画中です。")
+  start_render_loop.call(ctx, program, geometry)
+end
+
+begin
+  ctx = Glslkit::WebGL.context("#canvas")
+  build_program.call(ctx, NeonBrokenShaders, "neon-broken")
+  set_status.call("想定外: 壊れているはずのシェーダが正常にコンパイルされました。")
+rescue Glslkit::WebGL::CompileError => error
+  described = NeonErrorPanel.describe(error)
+
+  set_text.call("err-stage", described[:stage])
+  set_text.call("err-file", described[:file])
+  set_text.call("err-line", described[:line])
+  set_text.call("err-message", described[:message])
+  set_text.call("err-raw-log", described[:raw_log])
+  document.call(:getElementById, "panel")[:className] = "visible"
+  set_status.call("意図的に壊したシェーダの読み込みに失敗しました。")
+
+  show_source_excerpt.call(error.file, error.line) if described[:resolved]
+end

data/sample/neon.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>glslkit-webgl neon portal</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; overflow: hidden;
+           background: radial-gradient(circle at 50% 35%, #17112d, #05060c 65%); }
+    canvas { width: min(92vw, 900px); height: min(92vh, 900px); border-radius: 18px;
+             box-shadow: 0 0 80px #753cff33, inset 0 0 0 1px #ffffff18; }
+    aside { position: fixed; left: 24px; bottom: 20px; color: #dcd7ff;
+            font: 500 13px/1.5 system-ui, sans-serif; letter-spacing: .08em; opacity: .7; }
+  </style>
+</head>
+<body>
+  <canvas id="canvas" width="900" height="900"></canvas>
+  <aside>GLSLKIT · RUBY.WASM · WEBGL2</aside>
+  <script src="../shim/glslkit-webgl.js" data-entry="./neon.rb"></script>
+</body>
+</html>

data/sample/neon.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative "../lib/glslkit/webgl"
+require_relative "generated/neon_shaders"
+
+ctx = Glslkit::WebGL.context("#canvas")
+program = ctx.program(Glslkit::Manifest.parse(NeonShaders::MANIFEST), "neon",
+  vertex: NeonShaders::VERTEX, fragment: NeonShaders::FRAGMENT,
+  source_maps: {
+    vertex: Glslkit::SourceMap.from_h(NeonShaders::SOURCE_MAPS[:vertex]),
+    fragment: Glslkit::SourceMap.from_h(NeonShaders::SOURCE_MAPS[:fragment])
+  })
+screen = ctx.geometry(program: program, attributes: {
+  a_position: {data: [-1.0, -1.0, 3.0, -1.0, -1.0, 3.0], components: 2}
+})
+
+ctx.viewport
+program.set(:u_resolution, [ctx.width.to_f, ctx.height.to_f])
+ctx.loop do |seconds|
+  program.set(:u_time, seconds)
+  ctx.draw(screen)
+end

data/sample/shaders/common/color.glsl

@@ -0,0 +1,5 @@
+#pragma once
+
+vec3 palette(float t) {
+  return 0.55 + 0.45 * cos(6.28318 * (vec3(0.02, 0.18, 0.38) * t + vec3(0.0, 0.18, 0.42)));
+}