0

我正在尝试渲染为 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, 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, 0, 
                  gl.RGBA, gl.FLOAT, null);
    
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
                            gl.TEXTURE_2D, texture, level);
    
    gl.viewport(0, 0, width, height);

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

    const arrays = {
      position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
      texcoord: [0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 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, ["vs", "drawTex"]);
    const uniforms2={
        tex: texture
    }

    function render(){
        twgl.resizeCanvasToDisplaySize(gl.canvas);
        gl.viewport(0, 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>

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

4

0 回答 0