在同一网格WEBGL上添加两个纹理

时间:2018-12-06 16:21:25

标签: javascript html5 canvas webgl textures

我需要在同一网格上添加两个纹理。我有一个带有纹理的八面体,我想在其上面添加第二个纹理。我该如何实现?出现第一个纹理,但第二个没有。我在.js文件中创建了两个不同的纹理,并为它们两个启用了两个不同的纹理插槽。我确实绑定了纹理,并将纹理插槽作为片段着色器中的一个统一传递。我认为我的HTML文件是错误的,因此我要附加HTML文件的代码。

<script id="shader-fs" type="x-shader/x-fragment">
     precision mediump float;

     varying vec2 vTextureCoord;
     varying vec3 vLightWeighting;

     uniform sampler2D uSampler; 
     uniform sampler2D uSampler1;

     void main(void) {
         vec3 c;
         vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
         vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t));           

        c = textureColor.rgb * textureColor.a + textureColor1.rgb * textureColor1.a * (1.0 - textureColor.a);
        gl_FragColor= vec4(c, 1.0);
     }
    </script>

    <script id="shader-vs" type="x-shader/x-vertex">
     attribute vec3 aVertexPosition;
     attribute vec3 aVertexNormal;
     attribute vec2 aTextureCoord; 

     uniform mat4 uMVMatrix;
     uniform mat4 uPMatrix;
     uniform mat3 uNMatrix;

     uniform vec3 uLightingDirection;
     uniform vec3 uDirectionalColor;

     varying vec2 vTextureCoord;
     varying vec3 vLightWeighting;

     void main(void) {
         gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 0.5);
         vTextureCoord = aTextureCoord; 

         vec3 transformedNormal = uNMatrix * aVertexNormal; 
         float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
         vLightWeighting = uDirectionalColor * directionalLightWeighting;
     }
    </script>

0 个答案:

没有答案