0

如何使用 OES_texture_float 扩展？并为此创建一个纹理作为浮点纹理？

作为 webGL 1 扩展列表：

  var ext = gl.getExtension("OES_texture_float");
  var linear =  gl.getExtension("OES_texture_float_linear");
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_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, gl.RGBA, gl.FLOAT, image);

如何将浮点图像作为纹理输入？

4

1 回答 1

2

首先，您实际上并没有检查您是否获得了扩展名

您的代码应该类似于

var ext = gl.getExtension("OES_texture_float");
if (!ext) {
   alert("this machine or browser does not support OES_texture_float");
}   
var linear =  gl.getExtension("OES_texture_float_linear");
if (!linear) {
   alert("this machine or browser does not support  OES_texture_float_linear");
}

否则，您没有显示足够的代码来查看还有什么问题。你读过任何webgl 教程吗？你在哪里创建和绑定纹理？你的着色器是什么样的？如果有的话，你使用什么样的属性？

function main() {
  var gl = document.querySelector("canvas").getContext("webgl");
  var ext = gl.getExtension("OES_texture_float");
  if (!ext) {
    alert("this machine or browser does not support OES_texture_float");
    return;
  }   
  var linear = gl.getExtension("OES_texture_float_linear");
  if (!linear) {
    alert("this machine or browser does not support  OES_texture_float_linear");
    return;
  }

  var vs = `
void main() {
  gl_PointSize = 100.0;
  gl_Position = vec4(0, 0, 0, 1);
}
`;

  var fs = `
precision mediump float;
uniform sampler2D u_tex;
void main () {
  gl_FragColor = texture2D(u_tex, gl_PointCoord);
}
`;

  var program = twgl.createProgramFromSources(gl, [vs, fs]);

  // let's use a canvas instead of an image. It should be the same
  var image = document.createElement("canvas"); 
  var ctx = image.getContext("2d");
  for (var i = 20; i > 0; --i) {
    ctx.fillStyle = i % 2 ? "red" : "yellow";
    ctx.beginPath();
    ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, i * 20, 0, Math.PI * 2, false);
    ctx.fill();
  }

  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_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, gl.RGBA, gl.FLOAT, image);

  gl.useProgram(program);
  gl.drawArrays(gl.POINTS, 0, 1);
}
main();
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/twgl.min.js"></script>
<canvas></canvas>

此外，您还不清楚“为此创建一个纹理作为浮点纹理”是什么意思。如果支持这些功能，则上传图像将被转换为浮点数（我们在上面的示例中看到），但输入图像最多是 8 位图像。如果您真的想要浮点数据，则必须使用二进制数据而不是图像。

function main() {
  var gl = document.querySelector("canvas").getContext("webgl");
  var ext = gl.getExtension("OES_texture_float");
  if (!ext) {
    alert("this machine or browser does not support OES_texture_float");
    return;
  }   
  var linear = gl.getExtension("OES_texture_float_linear");
  if (!linear) {
    alert("this machine or browser does not support  OES_texture_float_linear");
    return;
  }

  var vs = `
void main() {
  gl_PointSize = 100.0;
  gl_Position = vec4(0, 0, 0, 1);
}
`;

  var fs = `
precision mediump float;
uniform sampler2D u_tex;
void main () {
  gl_FragColor = texture2D(u_tex, gl_PointCoord) / vec4(32, 16, 32 + 16, 1);
}
`;

  var program = twgl.createProgramFromSources(gl, [vs, fs]);

  // create floating point data directly
  var width = 32;
  var height = 16;
  var data = new Float32Array(width * height * 4);  // RGBA
  for (y = 0; y < height; ++y) {
    for (x = 0; x < width; ++x) {
      var off = (y * width + x) * 4;
      data[off + 0] = x;
      data[off + 1] = y;
      data[off + 2] = x + y;
      data[off + 3] = 1;
    }
  }

  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_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, width, height, 0, gl.RGBA, gl.FLOAT, data);

  gl.useProgram(program);
  gl.drawArrays(gl.POINTS, 0, 1);
}
main();
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/twgl.min.js"></script>
<canvas></canvas>

于 2016-08-25T15:23:10.837 回答