Question

I’ve searched all the forums, but haven’t found anyone else with this issue…I’m using a shader on a sphere to 1) create an inner glow and 2) apply a texture of earth. When I do this – the inner glow appears, but the texture doesn’t. In my console when I type: uniforms.texture1.texture.image.src – I receive the correct source location for my texture: *http://localhost:8091/media/world.jpg”

It seems that my shader is aware of the texture, but isn’t displaying it. When I add a new object into the scene (lets say a cube) that has a texture – my sphere all of a sudden assumes the texture of my new cube object. If I add two new objects into the scene (lets say a box with a woodbox texture and a skybox with a star texture) – my sphere tries to assume both the woodbox texture and the stars texture at the same time – thus resulting in a flickering effect (neither of which are the texture I wanted).

My code is as follows:

  var Shaders = {
         'earth' : {
  uniforms: {
    'texture': { type: 't', value: THREE.ImageUtils.loadTexture( "media/world.jpg" ) }
  },
  vertexShader: [
    'varying vec3 vNormal;',
    'varying vec2 vUv;',
    'void main(void) {',
    'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
      'vNormal = normalize( normalMatrix * normal );',
      'vUv = uv;',
    '}'
  ].join('\n'),
  fragmentShader: [
    'uniform sampler2D texture;',
    'varying vec3 vNormal;',
    'varying vec2 vUv;',
    'void main(void) {',
        'vec3 diffuse = texture2D( texture, vUv ).xyz;',
        'float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );',
        'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );',
        'gl_FragColor = vec4(diffuse + atmosphere, 1.0);',
    '}'
  ].join('\n')
}

};

In my initialization of everything (After i setup the lights, camera, scene, etc) – I create my sphere with the following:

var geometry = new THREE.SphereGeometry(250, 40, 40)

var shader = Shaders['earth'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);

material = new THREE.ShaderMaterial({

      uniforms: uniforms,
      vertexShader: shader.vertexShader,
      fragmentShader: shader.fragmentShader

    });

mesh = new THREE.Mesh(
new THREE.SphereGeometry(250, 40, 40), material);
mesh.matrixAutoUpdate = false;
scene.add(mesh);

I’ve tried placing this code in my html head as well (without the quotation marks of course), but this didn’t change anything…. Any help would be greatly appreciated. I’m using r51 of three.js and also tried r52.

Thanks in advance!

Answer 1

Textures are now assigned differently:

{ type: "t", value: 0, texture: map } => { type: "t", value: map }

See the Migration doc on the three.js Wiki: https://github.com/mrdoob/three.js/wiki/Migration.

The current version is now r.52. It’s a good idea to keep up-to-date.

EDIT: Also, rather than cloning your uniforms in this case, just assign them like so:

uniforms = shader.uniforms;