diff --git a/TODO.md b/TODO.md
index ca8ceb1..43df663 100644
--- a/TODO.md
+++ b/TODO.md
@@ -4,3 +4,5 @@
- format
- inner format
- data from external script
+
+- jsdoc
diff --git a/demo/3dt.fs b/demo/3dt.fs
new file mode 100644
index 0000000..846e76e
--- /dev/null
+++ b/demo/3dt.fs
@@ -0,0 +1,44 @@
+#define STEPSIZE .1
+#define DENSCALE .1
+
+void main() {
+ // Compute the pixel's position in view space.
+ vec2 fragCoord = gl_FragCoord.xy / resolution.xy;
+ vec3 viewPos = vec3((fragCoord * 2.0 - 1.0), 0.5);
+ viewPos.y *= -1.0; // Flip Y axis to match WebGL convention.
+
+ vec3 camPos = vec3(.5 + m.x * .5, .5 + m.y * .5, -.25);
+ vec3 camDir = vec3(1., 1., 1.);
+
+ // Convert the pixel's position to world space.
+ vec3 worldPos = camPos + viewPos * length(camDir);
+
+ // Compute the ray direction in world space.
+ vec3 rayDir = normalize(worldPos - camPos);
+
+ // Initialize the color and transparency values.
+ vec4 color = vec4(0.0);
+ float alpha = 0.0;
+
+ // Perform the ray-marching loop.
+ for (float t = 0.0; t < 2.0; t += STEPSIZE) {
+ // Compute the position along the ray.
+ vec3 pos = camPos + rayDir * t;
+
+ // Sample the density at the current position.
+ float density = texture(test3d, pos).x * DENSCALE;
+
+ // Accumulate the color and transparency values.
+ vec4 sampleColor = vec4(1.0, 0.5, 0.2, 1.0);
+ color += (1.0 - alpha) * sampleColor * density;
+ alpha += (1.0 - alpha) * density;
+
+ // Stop marching if the transparency reaches 1.0.
+ if (alpha >= 1.0) {
+ break;
+ }
+ }
+
+ // Output the final color and transparency.
+ o = vec4(color.rgb, alpha);
+}
diff --git a/demo/index.html b/demo/simple.html
similarity index 100%
rename from demo/index.html
rename to demo/simple.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..df5abde
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+ <repa-shader> demo
+
+
+ repa-shader demos
+
+
+
diff --git a/src/repa-shader.js b/src/repa-shader.js
index 0e58208..e584e41 100644
--- a/src/repa-shader.js
+++ b/src/repa-shader.js
@@ -383,7 +383,6 @@ class RepaShader extends HTMLElement {
const msg = this._gl.getProgramInfoLog(program);
this.logger.error("Program link error: ", msg);
// TODO error callback
- program = null;
return;
}
diff --git a/src/repa-texture.js b/src/repa-texture.js
index 68ff306..b716750 100644
--- a/src/repa-texture.js
+++ b/src/repa-texture.js
@@ -85,7 +85,7 @@ class RepaTexture extends HTMLElement {
this.ready = true;
this._forceUpdate = true;
} else if (this.textContent) {
- this.content = JSON.parse(this.textContent);
+ this.simpleContent(JSON.parse(this.textContent));
} else if (this.t3d) { // TODO 3d texture experiment
let size = 32;
this._width = size;
@@ -241,23 +241,24 @@ class RepaTexture extends HTMLElement {
return !this.t3d && this.type !== 'raw';
}
- setContent(data) {
+ simpleContent(data) {
+ this._format = 'luminance';
this._width = data[0].length;
this._height = data.length;
- this._content = new Uint8Array(this._width * this._height);
+ const content = new Uint8Array(this._width * this._height);
data.forEach((row, y) => {
- this._content.set(row, y * this._width);
+ content.set(row, y * this._width);
});
+
+ this.content = content;
}
set content(data) {
this.ready = true;
- this._type = 'raw';
- this._format = 'luminance';
this._forceUpdate = true;
- this.setContent(data);
+ this._content = data;
}
get content() {
@@ -306,9 +307,9 @@ class RepaTexture extends HTMLElement {
analyser.getByteFrequencyData(this._freqData);
analyser.getByteTimeDomainData(this._timeData);
- this.setContent([this._freqData, this._timeData]);
+ this.simpleContent([this._freqData, this._timeData]);
} else {
- this.setContent([[255, 128, 64, 32, 16, 8, 4, 2], [2, 4, 8, 16, 32, 64, 128, 255]]);
+ this.simpleContent([[255, 128, 64, 32, 16, 8, 4, 2], [2, 4, 8, 16, 32, 64, 128, 255]]);
}
return this._content;