Three.js - Define uniforms for fragment shader

Question

Trying to display an image (which works) and background color (doesn't work). I put in the rest of the code for the JavaScript and the vertex/fragment shader that is in the HTML file. Maybe this could clear up why it's not working even with changing the uniform type to c instead of float for the background color. So right now, it shows no color, just a transparent background behind the image.

            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

Alexander Popov Alexander Popov · Accepted Answer · 2015-09-18T20:45:09

You use invalid uniform type for THREE.Color. Try this code

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) }

};

You can find more uniform types in this wiki.

And your fragment shader may look like this:

uniform sampler2D tOne;
uniform vec3 tSec;

varying vec2 vUv;

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

Three.js - Define uniforms for fragment shader

1 Answers