diff --git a/demo/3dt.html b/demo/3dt.html index 8bdf00a..879078d 100644 --- a/demo/3dt.html +++ b/demo/3dt.html @@ -26,11 +26,13 @@ + 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; + col *= texture(generated, vec3(uv.xy, mouse.y)).rgb; float dist = distance(uv, mouse.xy); float circle = smoothstep(.025, .026, dist) * .5 + .5; @@ -49,6 +51,26 @@ updateButton.addEventListener('click', () => { const shader = document.querySelector('repa-shader'); shader.render(fsinput.value); }); + +setTimeout(() => { + // generate texture data + const generated3DT = document.querySelector('repa-texture[name="generated"]'); + const size = 32; + const t3data = new Uint8Array(size * size * size * 4); + for (let i = 0; i < size; i++) { + for (let j = 0; j < size; j++) { + for (let k = 0; k < size; k++) { + let index = i * size * size + j * size + k; + t3data[index*4] = i * 4 % 255; + t3data[index*4+1] = j * 4 % 255; + t3data[index*4+2] = k * 4 % 255; + t3data[index*4+3] = 255; + } + } + } + + generated3DT.content = t3data; +}, 100); diff --git a/src/repa-shader.js b/src/repa-shader.js index e584e41..0b89058 100644 --- a/src/repa-shader.js +++ b/src/repa-shader.js @@ -304,6 +304,10 @@ class RepaShader extends HTMLElement { return (format && this._gl[format.toUpperCase().replaceAll('-', '_')]) || this._gl.RGBA; } + _getType(type) { + return (type && this._gl[type.toUpperCase().replaceAll('-', '_')]) || this._gl.UNSIGNED_BYTE; + } + _collectTextures() { this._textures = []; this._textures3d = []; @@ -464,9 +468,12 @@ class RepaShader extends HTMLElement { // update if needed if (t.texElement.shouldUpdate) { const format = this._getFormat(t.texElement.format); + const internalFormat = this._getFormat(t.texElement.internalFormat); + const type = this._getType(t.texElement.dataType); + this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, t.texElement.flipY); - this._gl.texImage2D(this._gl.TEXTURE_2D, 0, format, t.texElement.width, t.texElement.height, 0, format, this._gl.UNSIGNED_BYTE, t.texElement.update()); + this._gl.texImage2D(this._gl.TEXTURE_2D, 0, internalFormat, t.texElement.width, t.texElement.height, 0, format, type, t.texElement.update()); } this._gl.uniform1i(this._uniLocation[t.texElement.name], i + this.mrt); @@ -480,9 +487,12 @@ class RepaShader extends HTMLElement { // update if needed if (t.texElement.shouldUpdate) { const format = this._getFormat(t.texElement.format); + const internalFormat = this._getFormat(t.texElement.internalFormat); + const type = this._getType(t.texElement.dataType); + this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, 0); - this._gl.texImage3D(this._gl.TEXTURE_3D, 0, format, t.texElement.width, t.texElement.height, t.texElement.depth, 0, format, this._gl.UNSIGNED_BYTE, t.texElement.update()); + this._gl.texImage3D(this._gl.TEXTURE_3D, 0, internalFormat, t.texElement.width, t.texElement.height, t.texElement.depth, 0, format, type, t.texElement.update()); } this._gl.uniform1i(this._uniLocation[t.texElement.name], i + this.mrt + this._textures.length); diff --git a/src/repa-texture.js b/src/repa-texture.js index b716750..38040cf 100644 --- a/src/repa-texture.js +++ b/src/repa-texture.js @@ -86,29 +86,8 @@ class RepaTexture extends HTMLElement { this._forceUpdate = true; } else if (this.textContent) { this.simpleContent(JSON.parse(this.textContent)); - } else if (this.t3d) { // TODO 3d texture experiment - let size = 32; - this._width = size; - this._height = size; - this._depth = size; - - let t3data = new Uint8Array(size * size * size); - - for (let i = 0; i < size; i++) { - for (let j = 0; j < size; j++) { - for (let k = 0; k < size; k++) { - let index = i * size * size + j * size + k; - t3data[index] = (i * j * k) % 255; - } - } - } - - this._content = t3data; - this._forceUpdate = true; - this._format = 'luminance'; - this.ready = true; } else { - this.logger.error('Texture content cannot be loaded!'); + this.logger.warn('Texture content cannot be loaded!'); } } @@ -388,6 +367,14 @@ class RepaTexture extends HTMLElement { return this._format || this.getAttribute('format') || 'rgba'; } + get internalFormat() { + return this._internalFormat || this.getAttribute('internal-format') || this.format; + } + + get dataType() { + return this._dataType || this.getAttribute('data-type') || 'unsigned-byte'; + } + get name() { if (!this._name) { let name = this.getAttribute('name');