CODEWITHSUNDEEP
three.js
Startec
Startec

Reputation: 13206

Three.js: BufferAttribute or Float32Attribute?

This example shows 500 transparent triangles being rendered. The code uses new THREE.Float32Attribute( triangles * 3 * 4, 4 );

Am I correct that the latest and greatest way is to use a THREE.BufferAttribute instead of the Float32Attribute?


Also, The transparent property is set in the THREE.RawShaderMaterial however, opacity is not set anywhere.

I would think that this would be because the color values are set in a loop, with the fourth color value standing for opacity but all of the triangles are consistently transparent (without any varying as I can tell).

I am just not perceiving things correctly here?

Upvotes: 1

Views: 4885

Answers (1)

WestLangley
WestLangley

Reputation: 104793

Yes. In this RawShaderMaterial example, you could write it like so:

var colors = new Float32Array( triangles * 3 * 4 );

for ( var i = 0, l = triangles * 3 * 4; i < l; i += 4 ) {

    colors[ i     ] = Math.random();
    colors[ i + 1 ] = Math.random();
    colors[ i + 2 ] = Math.random();
    colors[ i + 3 ] = Math.random();

}

geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4 ) );

colors[ i + 3 ] contains the alpha value, and is passed to the fragment shader as a varying:

varying vec4 vColor;

three.js r.73

Upvotes: 2

Related Questions