Transparent vertex colors in bufferattribute?

Questions
, ,
1

I am trying to render a geometry using buffergeometry. The geometry itself is rendered using BufferAttribute as such:

var geometry = new THREE.BufferGeometry();
geometry.addAttribute(‘position’, new THREE.BufferAttribute(positions, 3));
geometry.addAttribute(‘normal’, new THREE.BufferAttribute(normals, 3, true));
geometry.addAttribute(‘color’, new THREE.BufferAttribute(colors, 3, true));

Now assuming the geometry is a cube with 6 faces labeled A to F. How can I cause the vertex colors of only a particular face, say face A to be rendered transparent and other faces to be set to opaque or visible at any time? I searched and found other similar questions but non specify doing this for buffer attribute. Please also note that the final geometry is a mesh created using MeshPhongMaterial.

var material = new THREE.MeshPhongMaterial({
vertexColors: THREE.VertexColors,
});
var mesh = new THREE.Mesh(geometry, material);

2

There is no way to achieve this effect with build in materials since vertex colors are always RGB values (without alpha). More information in the following issue at GitHub:

You can still achieve your intended result by an additional buffer attribute that controls the opacity per face. It’s then necessary to enhance the shader code of MeshPhongMaterial e.g. via Material.onBeforeCompile() so the new attribute is actually used.

1 Like
3

Is there any example code on how to do this ? I am not very familiar with this:

It’s then necessary to enhance the shader code of MeshPhongMaterial e.g. via Material.onBeforeCompile() so the new attribute is actually used.

4

Yes, it’s webgl_materials_modified.

1 Like
5

Sorry I am not so familiar with webgl and this is properly not the right place but how do I change the color property ? I tried doing this but it did not render my geometry in the red color . It was always white no matter what numbers i gave in the vec4:

var phongShader = THREE.ShaderLib['phong'];

var material = new THREE.MeshPhongMaterial();
var fs = phongShader.fragmentShader;
        fs.replace(
            'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
            
                ['gl_FragColor = vec4( 0,0,1,0.5 );'
            
        ].join('\n'));
 material.onBeforeCompile = function (shader) {
            shader.uniforms.reflectivity = { value: 0.5 };
            shader.fragmentShader = fs;
            shader.vertexShader = phongShader.vertexShader;

        };
6

It was implemented as vertexAlphas in r127 :tada:

1 Like
7

Hello everyone,

I am using vertex colors and trying to handle opacity by vertex alphas #21530. Some of objects are full black as a result. Is there any example of usage for this feature?

        const objBufferGeo = new THREE.BufferGeometry();

        objBufferGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices),3)) 

        const count = objBufferGeo.attributes.position.length / 3;

        const objMaterial = new THREE.MeshBasicMaterial( {
            color: 0xffffff,
            vertexColors: THREE.VertexColors,
            transparent : true,
            vertexAlphas:true,
            side:THREE.DoubleSide
          })

        objBufferGeo.setAttribute('color',new THREE.BufferAttribute(new Float32Array(count * 3),4)) // Item size 4 for alpha channel?
        
        for ( let i = 0; i < count; i++ ) {
            let color = colors[i]
            let r = color >> 16 & 0xFF
            let g = color >> 8 & 0xFF
            let b = color & 0xFF
            let a = 0.1 // hardcoded to test opacity
            objBufferGeo.attributes.color.setXYZW( i, r / 255, g / 255, b / 255, a) // setXYZ same result
          }
1 Like
8

^You’ll need count * 4 here to allocate RGBA components for each vertex.

1 Like