Question

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

as 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);

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

Answer 1

首先，你并没有真正检查你是否有扩展

您的代码应该是

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 tutorials吗？你在哪里创建和绑定纹理？你的着色器是什么样的？你使用什么样的属性？

＆＃13;

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();

＆＃13;

canvas { border: 1px solid black; }

＆＃13;

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<canvas></canvas>

＆＃13;

此外，还不清楚你的意思是什么＆＃34;创建纹理作为浮点数＃34;。如果支持这些功能，那么上传图像就会转换为浮点（我们在上面的示例中看到），但输入图像最好是8位图像。如果你真的想要浮点数据，你必须使用二进制数据而不是图像。

＆＃13;

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();

＆＃13;

canvas { border: 1px solid black; }

＆＃13;

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<canvas></canvas>

＆＃13;

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

1 个答案: