0

Experimenting with three.js and working through the NeHe demos. Number 9 loads a non-transparent JPG. The JPEG is mainly black and acts as a mask. A series of overlapped objects should blend together with only the white areas of the objects being rendered. In OpenGL (old style) the code (in Java) is:

    Texture t = TextureIO.newTexture(getResource(filename), mipmap, null);
    t.setTexParameteri(GL.GL_TEXTURE_MIN_FILTER, GL.GL_LINEAR);
    t.setTexParameteri(GL.GL_TEXTURE_MAG_FILTER, GL.GL_LINEAR);

in three.js I have tried

    var material = new THREE.MeshBasicMaterial({
                    map:starTexture,
                        depthWrite: false,
                    side:THREE.DoubleSide,
                        blending: THREE.NormalBlending
                                    });

And a number of variants. But I get ALMOST but quite the right result. I get mask effect but the rectangular shape of the JPG clips the overlapping series of images.

genpfault
  • 51,148
  • 11
  • 85
  • 139
rkwright
  • 447
  • 6
  • 21
  • take a look at http://threejs.org/examples/#webgl_materials_blending_custom and http://threejs.org/examples/#webgl_materials_blending – gaitat Nov 03 '14 at 19:36
  • Thanks gaitat. I did find that. I am almost there. The answer was AdditiveBlending and settig transparent to true – rkwright Nov 03 '14 at 20:55
  • However, I am still unable to get it 100% correct. If I set a color with MixOperation when I create the mesh, it is fine. If I change the color later with material.setRGB() the mesh gets changed mainly to white and the area of light is much much larger. I'm probably missing some update() call.... – rkwright Nov 04 '14 at 13:22
  • Doh. Final problem was that I didn't read the Color doc carefully enough. The sample code from NeHe was generating rgb values 0.255, but Color.setRGB needs values in the range of 0..1. If you give it out of range values it apparently sets all the colors to white. – rkwright Nov 04 '14 at 15:01
  • I am glad you figured it out and all by yourself. – gaitat Nov 04 '14 at 21:30

0 Answers0