2
如果設備支持OES_texture_float，則應將FLOAT紋理存儲爲32位浮點值according to the spec。但是，在某些設備上，紋理顯示爲半浮點數。WebGL：OES_texture_float是否需要存儲爲32位浮點數？某些設備似乎只存儲爲半浮點數
以下代碼創建一個包含值Pi的1x1浮動紋理。片段着色器對紋理進行採樣並將結果與Pi的32位浮點和16位浮點（即，半浮點）表示進行比較。着色器在32位返回綠色，在16位返回紅色。
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<canvas width="100" height="100"></canvas>
<script>
"use strict";
const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl");
if (!gl.getExtension("OES_texture_float")) {
throw new Error("float textures not supported");
}
const program = gl.createProgram();
function addShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
gl.attachShader(program, shader);
}
addShader(gl.VERTEX_SHADER, `
precision highp float;
attribute vec2 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
void main() {
gl_Position = vec4(a_Position, 0.0, 1.0);
v_TexCoord = a_TexCoord;
}
`);
addShader(gl.FRAGMENT_SHADER, `
precision highp float;
uniform sampler2D u_Tex;
void main() {
float v = texture2D(u_Tex, vec2(0.5)).r;
gl_FragColor = vec4(
float(v == 3.140625), // Pi as float16
float(v == 3.1415927), // Pi as float32
0.0,
1.0);
}
`);
gl.linkProgram(program);
gl.useProgram(program);
function createAttrib(name, data) {
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
const loc = gl.getAttribLocation(program, name);
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
}
createAttrib("a_Position", new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]));
createAttrib("a_TexCoord", new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));
gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, 1, 1, 0, gl.LUMINANCE, gl.FLOAT, new Float32Array([Math.PI]));
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.uniform1i(gl.getUniformLocation(program, "u_Tex"), 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
</script>
</body>
</html>
代碼可以在這裏運行：https://jsfiddle.net/a6bfL168/2/
當在iPhone 5和iPad的空氣測試，都顯示綠色。 在iPhone 6和iPhone SE上測試時，兩者都顯示紅色。 （注意：運行iOS 10的所有設備。）
如果用不同的值（例如100000）重複此測試，則採樣紋理元素的值爲65504，這是半浮點數的最大可表示整數;另一塊紋理將紋理存儲（或採樣）爲半浮點數的證據。
這是一個錯誤？這會成爲GPU硬件的限制嗎？我是否misreading the spec？似乎規範的目的不僅僅是接受浮動紋理，而是存儲而不是完全精確。
耶！這解決了它。我曾認爲頂部的'precision highp float;'語句也覆蓋了'sampler2D'，但現在你指出了它，顯然它們是不同的類型。謝謝！ – cambecc