Last active
February 17, 2021 07:52
Star
You must be signed in to star a gist
3d texture
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
https://stackoverflow.com/questions/23006414/3d-texture-in-webgl-three-js-using-2d-texture-workaround/23040903#23040903 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// tex is a texture with each slice of the cube placed in grid in a texture. | |
// texCoord is a 3d texture coord | |
// size is the size if the cube in pixels. | |
// slicesPerRow is how many slices there are across the texture | |
// numRows is the number of rows of slices | |
vec2 computeSliceOffset(float slice, float slicesPerRow, vec2 sliceSize) { | |
return sliceSize * vec2(mod(slice, slicesPerRow), | |
floor(slice / slicesPerRow)); | |
} | |
vec4 sampleAs3DTexture( | |
sampler2D tex, vec3 texCoord, float size, float numRows, float slicesPerRow) { | |
float slice = texCoord.z * size; | |
float sliceZ = floor(slice); // slice we need | |
float zOffset = fract(slice); // dist between slices | |
vec2 sliceSize = vec2(1.0 / slicesPerRow, // u space of 1 slice | |
1.0 / numRows); // v space of 1 slice | |
vec2 slice0Offset = computeSliceOffset(sliceZ, slicesPerRow, sliceSize); | |
vec2 slice1Offset = computeSliceOffset(sliceZ + 1.0, slicesPerRow, sliceSize); | |
vec2 slicePixelSize = sliceSize / size; // space of 1 pixel | |
vec2 sliceInnerSize = slicePixelSize * (size - 1.0); // space of size pixels | |
vec2 uv = slicePixelSize * 0.5 + texCoord.xy * sliceInnerSize; | |
vec4 slice0Color = texture2D(tex, slice0Offset + uv); | |
vec4 slice1Color = texture2D(tex, slice1Offset + uv); | |
return mix(slice0Color, slice1Color, zOffset); | |
return slice0Color; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
canvas { | |
border: 1px solid black; | |
margin: 2px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script> | |
<script id="vshader" type="whatever"> | |
attribute vec4 a_position; | |
varying vec3 v_texcoord; | |
void main() { | |
gl_Position = a_position; | |
v_texcoord = a_position.xyz * 0.5 + 0.5; | |
} | |
</script> | |
<script id="fshader" type="whatever"> | |
precision mediump float; | |
// tex is a texture with each slice of the cube placed in grid in a texture. | |
// texCoord is a 3d texture coord | |
// size is the size if the cube in pixels. | |
// slicesPerRow is how many slices there are across the texture | |
// numRows is the number of rows of slices | |
vec2 computeSliceOffset(float slice, float slicesPerRow, vec2 sliceSize) { | |
return sliceSize * vec2(mod(slice, slicesPerRow), | |
floor(slice / slicesPerRow)); | |
} | |
vec4 sampleAs3DTexture( | |
sampler2D tex, vec3 texCoord, float size, float numRows, float slicesPerRow) { | |
float slice = texCoord.z * size; | |
float sliceZ = floor(slice); // slice we need | |
float zOffset = fract(slice); // dist between slices | |
vec2 sliceSize = vec2(1.0 / slicesPerRow, // u space of 1 slice | |
1.0 / numRows); // v space of 1 slice | |
vec2 slice0Offset = computeSliceOffset(sliceZ, slicesPerRow, sliceSize); | |
vec2 slice1Offset = computeSliceOffset(sliceZ + 1.0, slicesPerRow, sliceSize); | |
vec2 slicePixelSize = sliceSize / size; // space of 1 pixel | |
vec2 sliceInnerSize = slicePixelSize * (size - 1.0); // space of size pixels | |
vec2 uv = slicePixelSize * 0.5 + texCoord.xy * sliceInnerSize; | |
vec4 slice0Color = texture2D(tex, slice0Offset + uv); | |
vec4 slice1Color = texture2D(tex, slice1Offset + uv); | |
return mix(slice0Color, slice1Color, zOffset); | |
return slice0Color; | |
} | |
varying vec3 v_texcoord; | |
uniform float u_size; | |
uniform float u_numRows; | |
uniform float u_slicesPerRow; | |
uniform sampler2D u_texture; | |
void main() { | |
gl_FragColor = sampleAs3DTexture( | |
u_texture, v_texcoord, u_size, u_numRows, u_slicesPerRow); | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var canvas = document.getElementById("c"); | |
var gl = canvas.getContext("webgl"); | |
var program = twgl.createProgramFromScripts( | |
gl, ["vshader", "fshader"], ["a_position"]); | |
gl.useProgram(program); | |
var sizeLoc = gl.getUniformLocation(program, "u_size"); | |
var numRowsLoc = gl.getUniformLocation(program, "u_numRows"); | |
var slicesPerRowLoc = gl.getUniformLocation(program, "u_slicesPerRow"); | |
// make sphere triangles | |
var numDivisionsAround = 32; | |
var numDivisionsDown = 16; | |
var verts = []; | |
for (var v = 0; v < numDivisionsDown; ++v) { | |
var v0 = Math.sin((v + 0) / numDivisionsDown * Math.PI); | |
var v1 = Math.sin((v + 1) / numDivisionsDown * Math.PI); | |
var y0 = Math.cos((v + 0) / numDivisionsDown * Math.PI); | |
var y1 = Math.cos((v + 1) / numDivisionsDown * Math.PI); | |
for (var h = 0; h < numDivisionsAround; ++h) { | |
var a0 = (h + 0) * Math.PI * 2 / numDivisionsAround; | |
var a1 = (h + 1) * Math.PI * 2 / numDivisionsAround; | |
var x00 = Math.sin(a0) * v0; | |
var x10 = Math.sin(a1) * v0; | |
var x01 = Math.sin(a0) * v1; | |
var x11 = Math.sin(a1) * v1; | |
var z00 = Math.cos(a0) * v0; | |
var z10 = Math.cos(a1) * v0; | |
var z01 = Math.cos(a0) * v1; | |
var z11 = Math.cos(a1) * v1; | |
verts.push( | |
x00, y0, z00, | |
x10, y0, z10, | |
x01, y1, z01, | |
x01, y1, z01, | |
x10, y0, z10, | |
x11, y1, z11); | |
} | |
} | |
var vertBuffer = gl.createBuffer(); | |
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer); | |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW); | |
gl.enableVertexAttribArray(0); | |
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); | |
// Make 3D texture | |
var size = 8; | |
var slicesPerRow = 4; | |
var numRows = Math.floor((size + slicesPerRow - 1) / slicesPerRow); | |
var pixels = new Uint8Array(size * slicesPerRow * size * numRows * 4); | |
var pixelsAcross = slicesPerRow * size; | |
for (var slice = 0; slice < size; ++slice) { | |
var row = Math.floor(slice / slicesPerRow); | |
var xOff = slice % slicesPerRow * size; | |
var yOff = row * size; | |
for (var y = 0; y < size; ++y) { | |
for (var x = 0; x < size; ++x) { | |
var offset = ((yOff + y) * pixelsAcross + xOff + x) * 4; | |
pixels[offset + 0] = x / size * 255; | |
pixels[offset + 1] = y / size * 255; | |
pixels[offset + 2] = slice / size * 255; | |
pixels[offset + 3] = 255; | |
} | |
} | |
} | |
// put this in a 2d canvas for debugging | |
var c = document.createElement("canvas"); | |
c.width = size * slicesPerRow; | |
c.height = size * numRows; | |
document.body.appendChild(c); | |
var ctx = c.getContext("2d"); | |
var id = ctx.getImageData(0, 0, c.width, c.height); | |
var numBytes = c.width * c.height * 4; | |
for (var ii = 0; ii < numBytes; ++ii) { | |
id.data[ii] = pixels[ii]; | |
} | |
ctx.putImageData(id, 0, 0); | |
var tex = gl.createTexture(); | |
gl.bindTexture(gl.TEXTURE_2D, tex); | |
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); | |
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); | |
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); | |
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); | |
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size * slicesPerRow, numRows * size, 0, | |
gl.RGBA, gl.UNSIGNED_BYTE, pixels); | |
var log = console.log.bind(console); | |
log("size : " + size); | |
log("numRows : " + numRows); | |
log("slicesPerRow: " + slicesPerRow); | |
gl.uniform1f(sizeLoc, size); | |
gl.uniform1f(numRowsLoc, numRows); | |
gl.uniform1f(slicesPerRowLoc, slicesPerRow); | |
// draw circle | |
gl.enable(gl.DEPTH_TEST); | |
gl.drawArrays(gl.TRIANGLES, 0, verts.length / 3); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment