Three.js - 为片段着色器定义制服

Question

尝试显示图像（有效）和背景颜色（无效）。我为 JavaScript 和 HTML 文件中的顶点/片段着色器添加了其余代码。 也许这可以澄清为什么即使将统一类型更改为 c 而不是 float 作为背景颜色它也不起作用。所以现在，它没有显示颜色，只是图像后面的透明背景。

            window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

    // RENDERER
    // --------------------------------------------
    var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;

    var renderer = new THREE.WebGLRenderer({ clearAlpha: 1, clearColor: 0x222222, antialias: true });
    renderer.setSize( WIDTH, HEIGHT );

    var container = document.createElement( 'div' );
    document.body.appendChild( container );
    container.appendChild( renderer.domElement );

    // SCENE
    // --------------------------------------------
    var scene = new THREE.Scene();

    // CAMERA
    // --------------------------------------------
    var camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
    camera.position.z = 400;
    scene.add(camera);

    // LIGHT
    // --------------------------------------------
    var pointLight = new THREE.PointLight(0xFFFFFF);
    pointLight.position.set( 100, 100, 150);    // pozicija u prostoru
    scene.add(pointLight);


var vertShader = document.getElementById('vertex_shh').innerHTML;
var fragShader = document.getElementById('fragment_shh').innerHTML;

var attributes = {}; // custom attributes

var uniforms = {    // custom uniforms (your textures)

  tOne: { type: "t", value: THREE.ImageUtils.loadTexture( "./resources/images/white-block.png" ) },
  tSec: { type: "c", value: new THREE.Color(0xeeeeee) }

};

var material_shh = new THREE.ShaderMaterial({

  uniforms: uniforms,
  attributes: attributes,
  vertexShader: vertShader,
  fragmentShader: fragShader

});
//And create mesh with that material:

var me = new THREE.Mesh( new THREE.BoxGeometry(80,80,80), material_shh );

me.doubleSided = true;
scene.add(me);


// ANIMATION
// --------------------------------------------
var t = 0;
function animate() 
{
        t += 0.05; 
        me.rotation.set(0, 0.5*Math.sin(t), 0);
        renderer.render( scene, camera );
        requestAnimFrame(animate);
} 

requestAnimFrame(animate);

varying vec2 vUv;

void main()
{
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
}

</script>

<script id="fragment_shh" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D tOne;
uniform sampler2D tSec;

varying vec2 vUv;

void main(void)
{
    vec3 c;
    vec4 Ca = texture2D(tOne, vUv);
    vec4 Cb = texture2D(tSec, vUv);
    c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a);  // blending equation
    gl_FragColor= vec4(c, 1.0);
}
</script>

r71

Answer 1

您对 THREE.Color 使用了无效的统一类型。试试这个代码

var uniforms = {    // custom uniforms (your textures)

    tOne: { type: "t", value: THREE.ImageUtils.loadTexture( "./resources/images/white-block.png" ) },
    tSec: { type: "c", value: new THREE.Color(0xeeeeee) }

};

您可以在此wiki 中找到更多统一类型。

您的片段着色器可能如下所示：

uniform sampler2D tOne;
uniform vec3 tSec;

varying vec2 vUv;

void main(void)
{
    gl_FragColor = texture2D(tOne, vUv) * vec4(tSec, 1.0);
}