Wie kann ich WebGL verwenden, um eine RGBA-Textur basierend auf Fließkommazahlen zu erstellen?

Question

Ich habe ein TIFF aus Fließpunkten, nicht RGBA-Werte, so dass es als transparent angezeigt wird. Ich habe C++ verwendet, um die Gleitkommawerte zu erhalten, und jetzt habe ich eine Matrix dieser Werte. Wie kann ich sie mithilfe von WebGL in RGBA konvertieren und daraus eine Textur erstellen?

Answer 1

Um Gleitkommazahlen in eine Textur in WebGL laden Sie zu überprüfen und aktivieren Punkt Texturen Floating

var ext = gl.getExtension("OES_texture_float"); 
if (!ext) { 
    // Sorry, your browser/GPU/driver doesn't support floating point textures 
} 

Danach Sie hochladen können Punktdaten

var data = new Float32Array(width * height * 4); // 

var texture = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0 gl.RGBA, gl.FLOAT, data); 

floating Aber Sie können diese Textur nicht filtern, daher müssen Sie sie auf

setzen

Wenn Sie in der Lage sein wollen, die Sie filtern müssen überprüfen und ermöglichen, dass zu

var ext = gl.getExtensions("OES_texture_float_linear"); 
if (!ext) { 
    // sorry, can't filter floating point textures 
} 

zu einer Gleitkomma-Textur-Rendering ist auch eine optionale Funktion (eine eine Gleitkomma-Texturen als Framebuffer-Befestigung verwendet wird). Dafür würden Sie die Textur anhängen und überprüfen, ob es funktioniert

var fb = gl.createFramebuffer(); 
gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); 
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) { 
    // sorry, you can't render to a floating point texture 
} 

Answer 2

Zugegeben, ich habe das nicht wirklich direkt mit Gleitpunkten für eine Textur versucht, aber ich habe es mit Uint8-Werten gemacht, um eine leere Textur zu erstellen.

const texture = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.FLOAT, new Float32Array(putFloatingPointArrayHere)); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
gl.bindTexture(gl.TEXTURE_2D, null);