dyuri/repa-shader
1
0
Fork 0
mirror of https://github.com/dyuri/repa-shader.git synced 2025-12-16 11:14:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

texture content setting refactor, 3d shader example

Browse Source
This commit is contained in:
Gyuri Horák 2023-04-05 14:01:47 +02:00
parent 96f41ea6b3
commit 0d5187a310
Signed by: dyuri
GPG Key ID: 4993F07B3EAE8D38
6 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.md
View File

@ -4,3 +4,5 @@
- format - format
- inner format - inner format
- data from external script - data from external script
- jsdoc

44
demo/3dt.fs Normal file
View File

@ -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);
}

0
demo/index.html → demo/simple.html
View File

19
index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>&lt;repa-shader&gt; demo</title>
</head>
<body>
<h1>repa-shader demos</h1>
<ul>
<li><a href="demo/simple.html">simple</a></li>
<li><a href="demo/canvas.html">canvas texture</a></li>
<li><a href="demo/video.html">video texture</a></li>
<li><a href="demo/audio.html">audio texture</a></li>
<li><a href="demo/orientation.html">device orientation uniform</a></li>
<li><a href="demo/mrt.html">multi render target</a></li>
<li><a href="demo/3dt.html">3d (volumetric) texture</a></li>
</ul>
</body>
</html>

1
src/repa-shader.js
View File

@ -383,7 +383,6 @@ class RepaShader extends HTMLElement {
const msg = this._gl.getProgramInfoLog(program); const msg = this._gl.getProgramInfoLog(program);
this.logger.error("Program link error: ", msg); this.logger.error("Program link error: ", msg);
// TODO error callback // TODO error callback
program = null;
return; return;
} }

19
src/repa-texture.js
View File

@ -85,7 +85,7 @@ class RepaTexture extends HTMLElement {
this.ready = true; this.ready = true;
this._forceUpdate = true; this._forceUpdate = true;
} else if (this.textContent) { } else if (this.textContent) {
this.content = JSON.parse(this.textContent); this.simpleContent(JSON.parse(this.textContent));
} else if (this.t3d) { // TODO 3d texture experiment } else if (this.t3d) { // TODO 3d texture experiment
let size = 32; let size = 32;
this._width = size; this._width = size;
@ -241,23 +241,24 @@ class RepaTexture extends HTMLElement {
return !this.t3d && this.type !== 'raw'; return !this.t3d && this.type !== 'raw';
} }
setContent(data) { simpleContent(data) {
this._format = 'luminance';
this._width = data[0].length; this._width = data[0].length;
this._height = data.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) => { data.forEach((row, y) => {
this._content.set(row, y * this._width); content.set(row, y * this._width);
}); });
this.content = content;
} }
set content(data) { set content(data) {
this.ready = true; this.ready = true;
this._type = 'raw';
this._format = 'luminance';
this._forceUpdate = true; this._forceUpdate = true;
this.setContent(data); this._content = data;
} }
get content() { get content() {
@ -306,9 +307,9 @@ class RepaTexture extends HTMLElement {
analyser.getByteFrequencyData(this._freqData); analyser.getByteFrequencyData(this._freqData);
analyser.getByteTimeDomainData(this._timeData); analyser.getByteTimeDomainData(this._timeData);
this.setContent([this._freqData, this._timeData]); this.simpleContent([this._freqData, this._timeData]);
} else { } 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; return this._content;