Question

THREE.WebGLRenderer 105

我试图将THREE.BufferGeometry与自定义着色器结合使用，该着色器可在15个纹理之间切换，以渲染带有字符的图像，而每个图像每个字符包含4个顶点。使用基本的着色器，一切看起来都很牢固。使用msdf-bmfont准备纹理。

统一的片段（如我在浏览器控制台中所见）：

color: {type: "c", value: Color}
opacity: {type: "f", value: 1}
texture0: {type: "t", value: Texture}
texture1: {type: "t", value: Texture}
texture2: {type: "t", value: Texture}
texture3: {type: "t", value: Texture}
texture4: {type: "t", value: Texture}
texture5: {type: "t", value: Texture}
texture6: {type: "t", value: Texture}
texture7: {type: "t", value: Texture}
texture8: {type: "t", value: Texture}
texture9: {type: "t", value: Texture}
texture10: {type: "t", value: Texture}
texture11: {type: "t", value: Texture}
texture12: {type: "t", value: Texture}
texture13: {type: "t", value: Texture}
texture14: {type: "t", value: Texture}

着色器片段：

        attribute vec2 uv;
        attribute float page;
        attribute vec4 position;
        uniform mat4 projectionMatrix;
        uniform mat4 modelViewMatrix;
        varying vec2 vUv;
        varying float vPage;
        void main() {
          vUv = uv;
          vPage = page;
          gl_Position = projectionMatrix * modelViewMatrix * position;
        }

片段着色器看起来像这样，并已转换为int，由@pailhead建议：

      precision highp float;
      precision highp int;
      uniform float opacity;
      uniform vec3 color;
      uniform sampler2D texture0; 
uniform sampler2D texture1; 
uniform sampler2D texture2; 
uniform sampler2D texture3; 
uniform sampler2D texture4; 
uniform sampler2D texture5; 
uniform sampler2D texture6; 
uniform sampler2D texture7; 
uniform sampler2D texture8; 
uniform sampler2D texture9; 
uniform sampler2D texture10; 
uniform sampler2D texture11; 
uniform sampler2D texture12; 
uniform sampler2D texture13; 
uniform sampler2D texture14; 

      varying float vPage; // varying cannot be int
      varying vec2 vUv;

      void main() {
        vec4 sampleColor = vec4(0.0, 0.0, 0.0, 0.0);
        int iPage = int(vPage);

        if ( iPage == 0) {
          sampleColor = texture2D(texture0, vUv);
        }

        else if ( iPage == 1) {
          sampleColor = texture2D(texture1, vUv);
        }

        else if ( iPage == 2) {
          sampleColor = texture2D(texture2, vUv);
        }

        else if ( iPage == 3) {
          sampleColor = texture2D(texture3, vUv);
        }

        else if ( iPage == 4) {
          sampleColor = texture2D(texture4, vUv);
        }

        else if ( iPage == 5) {
          sampleColor = texture2D(texture5, vUv);
        }

        else if ( iPage == 6) {
          sampleColor = texture2D(texture6, vUv);
        }

        else if ( iPage == 7) {
          sampleColor = texture2D(texture7, vUv);
        }

        else if ( iPage == 8) {
          sampleColor = texture2D(texture8, vUv);
        }

        else if ( iPage == 9) {
          sampleColor = texture2D(texture9, vUv);
        }

        else if ( iPage == 10) {
          sampleColor = texture2D(texture10, vUv);
        }

        else if ( iPage == 11) {
          sampleColor = texture2D(texture11, vUv);
        }

        else if ( iPage == 12) {
          sampleColor = texture2D(texture12, vUv);
        }

        else if ( iPage == 13) {
          sampleColor = texture2D(texture13, vUv);
        }

        else if ( iPage == 14) {
          sampleColor = texture2D(texture14, vUv);
        }
       else {
          sampleColor = vec4(1.0, 1.0, 0.0, 1.0);
        }
        gl_FragColor = sampleColor * vec4(color, opacity);
         if (gl_FragColor.a < 0.0001) discard;
      }

首先，我很惊讶我不得不floor()个vPage值（WebGL着色器语言没有round()），否则我注意到图像只是闪烁，不断地在2个纹理之间跳转每个字符。现在，我什至要转换为 int 。在对着色器进行了这些修改之后，每次在每个占位符上为字符添加一些混乱的结果时，都会重新加载页面，这意味着vPage没有正确传递，我怀疑，因为每次都相同（我在浏览器控制台中进行了检查）。

是由于浏览器页面刷新之间遗留了某些东西吗？如果可以，该如何避免这种奇怪的行为？

What is seen in the browser

非常感谢您的帮助。

THREE.BufferGeometry显示输出翻倍，重新加载浏览器页面时不同

0 个答案: