3D-Textur in WebGL / three.js mit 2D-Texturumgehung?
Ich möchte einige 3D-Texturen für Objekte verwenden, die ich in WebGL rendere. Ich verwende derzeit die folgende Methode in einem Fragment-Shader, wie am vorgeschlagenUnterschiede zwischen WebGL und OpenGL:
// tex is a texture with each slice of the cube placed horizontally across the texture.
// texCoord is a 3d texture coord
// size is the size if the cube in pixels.
vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size) {
float sliceSize = 1.0 / size; // space of 1 slice
float slicePixelSize = sliceSize / size; // space of 1 pixel
float sliceInnerSize = slicePixelSize * (size - 1.0); // space of size pixels
float zSlice0 = min(floor(texCoord.z * size), size - 1.0);
float zSlice1 = min(zSlice0 + 1.0, size - 1.0);
float xOffset = slicePixelSize * 0.5 + texCoord.x * sliceInnerSize;
float s0 = xOffset + (zSlice0 * sliceSize);
float s1 = xOffset + (zSlice1 * sliceSize);
vec4 slice0Color = texture2D(tex, vec2(s0, texCoord.y));
vec4 slice1Color = texture2D(tex, vec2(s1, texCoord.y));
float zOffset = mod(texCoord.z * size, 1.0);
return mix(slice0Color, slice1Color, zOffset);
}
Das Problem ist, dass die größte 3D-Textur, die ich verwenden kann, 64x64x64 ist (da die maximale 2D-Texturbreite 4096 = 64 * 64 ist). Ich würde gerne versuchen, größere Texturen zu verwenden, wenn dies möglich ist. Daher würde ich gerne sehen, ob jemand Vorschläge für die Verwendung von 3D-Texturen mit höherer Auflösung mit einer ähnlichen Problemumgehung hat. Vermutlich sollte ich in der Lage sein, die 2D-Textur so zu organisieren, dass die 3D-Schnitte horizontal UND vertikal angeordnet sind, aber mein Google-Fu konnte bisher keine brauchbare Lösung finden.