Hi,
I’m making a terrain renderer, and I’m using 16bit grayscale pngs as displacement maps. When I load them using THREE.ImageUtils.loadTexture, it works, but I get noticable rounding errors. So I tried to modifiy it like this:
function loadDEM(path, mapping, callback) {
var image = new Image(), texture = new THREE.Texture(image, mapping);
texture.type = THREE.UnsignedShortType;
image.onload = function() {
texture.needsUpdate = true;
if (callback) {
callback(this);
}
}
image.crossOrigin = "anonymous";
image.src = path;
return texture;
}
Just added texture.type = THREE.UnsignedShortType, and now I get these errors in console and terrain is flat.
WebGL: INVALID_ENUM: texImage2D: invalid texture type index.html:1
WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size
So how can I use 16bit images?
This is the actual terrain tile:
Like all image formats in browsers it’s up to the browser what image formats are supported and what the browser does with them.😭 For example Chrome and Firefox support webp but Safari does not.
Also Safari supports (or used to support) TIFF files as😂 )
<img>tags and it would load and display floating point TIFFs but I’m 99%% it did not support uploading those floating point TIFFs as floating point textures as there is no conformance test for it (not that Apple has ever cared about passing the conformance testsCurrently though the WebGL2 spec explicitly disallows 16 int formats from images🙄