在 webgl2 + twgljs 中渲染到纹理

如何解决在 webgl2 + twgljs 中渲染到纹理

我正在尝试渲染为 RGBA32F 纹理，然后显示它。我对 OpenGL 有一些经验，但这是我第一次使用 webgl。纹理需要是 RGBA32F，因为后面需要存储 4 个浮点数。

将纹理渲染到屏幕只是一种“调试”方法，而不是最终结果中会做的事情。

似乎纹理总是用 0 填充。

这是我的代码

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf8">

    <title>WebGL Ocean</title>
    <style>
      body {
          margin: 0;
          font-family: monospace;
      }
      canvas {
          display: block;
          width: 100vw;
          height: 100vh;
      }
      #b {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
  <script id="vs" type="notjs">
#version 300 es

precision mediump float;

in vec4 position;
in vec2 texCoord0;
    
out vec2 texCoordV;
    
void main() {
  
  gl_Position = position;
  texCoordV = texCoord0;
}

  </script>
  <script id="h0kfs" type="notjs">
#version 300 es

precision mediump float;

layout (location = 0) out vec4 h0k; 

void main(void) {

    h0k = vec4(1.0,1.0,1.0);

}

  </script>

  <script id="drawTex" type="notjs">
    #version 300 es
    precision mediump float;
    uniform sampler2D tex;
    in vec2 texCoordV;
    out vec4 outColor;
    void main() {
        vec4 colors;

        colors = texture(tex,texCoordV * 512.0);
        outColor = colors;
    }
  </script>

  <script type="module">
    import * as twgl from './twgl-full.module.js';
    const gl = document.querySelector("#c").getContext("webgl2");
    const ext = gl.getExtension("EXT_color_buffer_float");
    if (!ext) {
        console.log("sorry,can't render to floating point textures");
    }
    
    //h0k
    const programInfo = twgl.createProgramInfo(gl,["vs","h0kfs"]);

    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER,fb);

    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D,texture);
    const width = 512;
    const height = 512;
    const level = 0;
    gl.texImage2D(gl.TEXTURE_2D,level,gl.RGBA32F,width,height,gl.RGBA,gl.FLOAT,null);
    
    gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,texture,level);
    
    gl.viewport(0,height);

    gl.drawBuffers([
    gl.COLOR_ATTACHMENT0,]);

    const arrays = {
      position: [-1,-1,1,0],texcoord: [0,1],};

    
    const bufferInfo = twgl.createBufferInfoFromArrays(gl,arrays);
    gl.useProgram(programInfo.program);
    twgl.setBuffersAndAttributes(gl,programInfo,bufferInfo);
    twgl.drawBufferInfo(gl,bufferInfo);

    const prgInfo2 = twgl.createProgramInfo(gl,"drawTex"]);
    const uniforms2={
        tex: texture
    }

    function render(){
        twgl.resizeCanvasTodisplaySize(gl.canvas);
        gl.viewport(0,gl.canvas.width,gl.canvas.height);
        gl.useProgram(prgInfo2.program);
        gl.bindFramebuffer(gl.FRAMEBUFFER,null);
        twgl.setUniforms(prgInfo2,uniforms2);
        twgl.setBuffersAndAttributes(gl,prgInfo2,bufferInfo);
        twgl.drawBufferInfo(gl,bufferInfo);

        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);

    
  </script>
</html>

所有出现在屏幕上的都是黑色的。我不确定问题出在哪里。我猜是在渲染纹理或尝试对纹理进行采样时，但我无法真正理解问题出在哪里。