时间戳

首页 > 解决方案 > 三.js：internalformat/format/type组合无效和framebuffer不完整

javascript - 三.js：internalformat/format/type组合无效和framebuffer不完整

问题描述

我正在尝试创建一个帧缓冲区对象，该对象将为我的 2**16 个对象中的每一个存储一个浮点数。我似乎遗漏了一些非常基本的东西，因为我得到了两个可能相关的错误。第一个说GL_INVALID_OPERATION : glTexImage2D: invalid internalformat/format/type combination GL_ALPHA/GL_ALPHA/GL_FLOAT。第二个说framebuffer incomplete。

这是我的设置：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js'></script>

  <!-- FBO vert -->
  <script type='x-shader/x-vertex' id='fbo-vertex'>
  precision highp float;

  uniform mat4 projectionMatrix;
  uniform mat4 modelViewMatrix;

  attribute vec2 uv; // x,y offsets of each point in texture
  attribute vec3 position;

  varying vec2 vUv;

  void main() {
    vUv = vec2(uv.x, 1.0 - uv.y);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
  </script>

  <!-- FBO frag -->
  <script type='x-shader/x-fragment' id='fbo-fragment'>
  precision highp float;

  uniform sampler2D posTex;

  varying vec2 vUv;

  void main() {

    // read the supplied x,y,z vert positions
    vec3 pos = texture2D(posTex, vUv).xyz;

    // render the new positional attributes
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
  </script>

  <script>
  var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
  renderer.autoClear = false;

  /**
  * FBO
  **/

  var config = {
    w: 256,
    type: THREE.FloatType,
    format: THREE.AlphaFormat,
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,
  }

  var i = 0,
      data = new Float32Array(config.w**2);
  for (var x=0; x<config.w; x++) {
    for (var y=0; y<config.w; y++) {
      data[i++] = 6.0; // initial point size
    }
  }

  // feed those positions into a data texture
  var dataTex = new THREE.DataTexture(data, config.w, config.w, config.format, config.type);
  dataTex.minFilter = config.minFilter;
  dataTex.magFilter = config.magFilter;
  dataTex.needsUpdate = true;

  // add the data texture with positions to a material for the simulation
  var fboMaterial = new THREE.RawShaderMaterial({
    uniforms: {
      posTex: {
        type: 't',
        value: dataTex,
      },
    },
    vertexShader: document.querySelector('#fbo-vertex').textContent,
    fragmentShader: document.querySelector('#fbo-fragment').textContent,
  });

  THREE.FBO = function(w, simMat) {
    this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(-w/2, w/2, w/2, -w/2, -1, 1);
    this.scene.add(new THREE.Mesh(new THREE.PlaneGeometry(w, w), simMat));
  };

  // create a scene where we'll render the positional attributes
  var fbo = new THREE.FBO(config.w, fboMaterial);

  // create render targets a + b to which the simulation will be rendered
  var renderTargetA = new THREE.WebGLRenderTarget(config.w, config.w, {
    format: config.format,
    type: config.type,
    minFilter: config.minFilter,
    magFilter: config.magFilter,
    wrapS: THREE.RepeatWrapping,
    wrapT: THREE.RepeatWrapping,
    stencilBuffer: false,
  });

  // a second render target lets us store input + output positional states
  renderTargetB = renderTargetA.clone();

  // render the initial data to the render targets
  renderer.setRenderTarget(renderTargetA);
  renderer.render(fbo.scene, fbo.camera);
  renderer.setRenderTarget(null);

  renderer.setRenderTarget(renderTargetB);
  renderer.render(fbo.scene, fbo.camera);
  renderer.setRenderTarget(null);
  </script>
</body>
</html>

我想我可以根据这篇文章将 GL_ALPHA 与 GL_FLOAT 一起使用，但如果其他人知道在哪里可以找到它，我真的很想在规范中找到兼容性矩阵。

如何解决这些错误？

标签： javascriptthree.jswebglframebuffer

解决方案

推荐阅读