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

3d texture experiment - something works

Browse Source
This commit is contained in:
Gyuri Horák 2023-03-23 12:53:03 +01:00
parent f3ad6b1d50
commit 8ae0907fda
Signed by: dyuri
GPG Key ID: 4993F07B3EAE8D38
2 changed files with 130 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
demo/3dt.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>&lt;repa-shader&gt; demo</title>
<script type="module" src="../src/repa-texture.js"></script>
<script type="module" src="../src/repa-shader.js"></script>
<style>
body {
margin: 0;
padding: 0;
background: repeating-linear-gradient(45deg, #333, #333 10px, #666 10px, #666 20px);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#fsinput {
width: 90vw;
height: 50vh;
}
</style>
</head>
<body>
<repa-shader id="demoshader" fs-input="fsinput" alpha mouse width=512 height=512>
<repa-texture src="avatar.png" name="tex_avatar" wrap="mirrored_repeat"></repa-texture>
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 col = texture(tex_avatar, uv).rgb;
col = texture(test3d, vec3(uv.xy, mouse.x)).rrr;
float dist = distance(uv, mouse.xy);
float circle = smoothstep(.025, .026, dist) * .5 + .5;
vec4 acolor = vec4(col * circle, circle);
outColor = vec4(acolor);
}
</repa-shader>
<div>
<textarea id="fsinput"></textarea>
</div>
<button id="update">Update</button>
<script>
const updateButton = document.getElementById('update');
updateButton.addEventListener('click', () => {
const fsinput = document.getElementById('fsinput');
const shader = document.querySelector('repa-shader');
shader.render(fsinput.value);
});
</script>
</body>
</html>

77
src/repa-shader.js
View File

@ -16,6 +16,7 @@ const CHUNKS = {
#define t time #define t time
#define f frame #define f frame
precision highp float; precision highp float;
precision highp sampler3D;
uniform vec2 resolution; uniform vec2 resolution;
uniform vec3 mouse; uniform vec3 mouse;
uniform vec3 orientation; uniform vec3 orientation;
@ -280,6 +281,55 @@ class RepaShader extends HTMLElement {
texElement: t, texElement: t,
}); });
}); });
// TODO 3d texture experiment
let texture = this._gl.createTexture();
this._gl.bindTexture(this._gl.TEXTURE_3D, texture);
this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_MIN_FILTER, this._gl.NEAREST);
this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_MAG_FILTER, this._gl.NEAREST);
this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_WRAP_S, this._gl.CLAMP_TO_EDGE);
this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_WRAP_T, this._gl.CLAMP_TO_EDGE);
this._gl.texImage3D(
this._gl.TEXTURE_3D, // target
0, // level
this._gl.R8, // format - red8 (1byte)
3, // width
3, // height
3, // depth
0, // border
this._gl.RED, // format - red
this._gl.UNSIGNED_BYTE, // type - unsigned byte
new Uint8Array([
0, 0, 0,
0, 127, 0,
0, 0, 0,
0, 127, 0,
127, 255, 127,
0, 127, 0,
0, 0, 0,
0, 127, 0,
0, 0, 0,
127, 0, 127,
0, 0, 0,
127, 0, 127,
]) // data
);
this._textures3d = [];
this._textures3d.push({
texture,
texElement: {
name: 'test3d',
width: 3,
height: 3,
depth: 3,
},
});
// TODO end of 3d texture experiment
} }
async reset(time) { async reset(time) {
@ -351,6 +401,13 @@ class RepaShader extends HTMLElement {
t.texElement.forceUpdate(); t.texElement.forceUpdate();
}); });
// TODO 3d texture experiment
this._textures3d.forEach((t) => {
this._uniLocation[t.texElement.name] = this._gl.getUniformLocation(this.program, t.texElement.name); // texture
this._uniLocation[t.texElement.name+'_d'] = this._gl.getUniformLocation(this.program, t.texElement.name+'_d'); // dimensions
// TODO
});
this._attLocation = this._gl.getAttribLocation(this.program, 'position'); this._attLocation = this._gl.getAttribLocation(this.program, 'position');
this._mousePosition= [0, 0, 0]; this._mousePosition= [0, 0, 0];
this._orientation = [0, 0, 0]; this._orientation = [0, 0, 0];
@ -408,6 +465,18 @@ class RepaShader extends HTMLElement {
this._gl.uniform2fv(this._uniLocation[t.texElement.name+'_d'], [t.texElement.width || 1, t.texElement.height || 1]); this._gl.uniform2fv(this._uniLocation[t.texElement.name+'_d'], [t.texElement.width || 1, t.texElement.height || 1]);
}); });
// TODO 3d texture experiment
this._textures3d.forEach((t, i) => {
this._gl.activeTexture(this._gl.TEXTURE0 + i + this.mrt + this._textures.length);
this._gl.bindTexture(this._gl.TEXTURE_3D, t.texture);
this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, 0);
// TODO update, etc
this._gl.uniform1i(this._uniLocation[t.texElement.name], i + this.mrt + this._textures.length);
this._gl.uniform3fv(this._uniLocation[t.texElement.name+'_d'], [t.texElement.width || 1, t.texElement.height || 1, t.texElement.depth || 1]);
});
this._gl.drawArrays(this._gl.TRIANGLE_STRIP, 0, 4); this._gl.drawArrays(this._gl.TRIANGLE_STRIP, 0, 4);
// fill buffer // fill buffer
@ -522,6 +591,7 @@ void main() {
} }
get postFS() { get postFS() {
// TODO 3d texture experiment
return `#version 300 es return `#version 300 es
precision mediump float; precision mediump float;
uniform sampler2D drawTexture; uniform sampler2D drawTexture;
@ -564,6 +634,13 @@ void main() {
return ` return `
uniform sampler2D ${t.texElement.name}; uniform sampler2D ${t.texElement.name};
uniform vec2 ${t.texElement.name}_d; uniform vec2 ${t.texElement.name}_d;
`;
}).join('') +
// TODO 3d texture experiment
this._textures3d.map(t => {
return `
uniform sampler3D ${t.texElement.name};
uniform vec3 ${t.texElement.name}_d;
`; `;
}).join(''); }).join('');
} }