Mesh Shader different opacity on different faces

Questions
1

I have a buffergeometry and would like to set random opacity to different faces. If I understood it correctly, I need to pass a custom attribute to the uniforms, so the fragment shader can “link” the opacity to the right faces. I couldn’t get it to work, maybe someone can give me a hint:

This is the geometry:

	this.octaEderGeometry = new THREE.DodecahedronBufferGeometry(this.params.octaederSize, 1, 1);

	//this.octaEderGeometry = this.octaEderGeometry.toNonIndexed(); // already non indexed
	this.setupAttributes(this.octaEderGeometry);

	this.uniforms = {
		lineWidth: { value: 2 },
		time: { type: "f", value: 0.0 },
		scale: { type: "f", value: 2.0 },
		displacement: { type: "f", value: 8.0 },
		randomValue: { type: "f", value: 1.0 },
		timeSpeed: { type: "f", value: 12.0 },
		displacementHeight: { type: "f", value: 8.0 },
	}

	this.material = new THREE.ShaderMaterial({
		uniforms: this.uniforms,
		vertexShader: this.vertexShaderWireframe(),
		fragmentShader: this.fragmentShaderWireframe(),
		// side: THREE.DoubleSide
	});

	this.material.extensions.derivatives = true;
	this.material.transparency = true;

	var mesh = new THREE.Wireframe(this.octaEderGeometry, this.material);
	mesh.material.transparent = true;

	this.scene.add(mesh);

the vertex shader:

	uniform float timeSpeed;
	uniform float displacementHeight;
	varying vec3 vNormal;
    

	void main() {
		vNormal = normalize( normalMatrix * normal );
		vUv = uv;	

		gl_Position = projectionMatrix *
				  modelViewMatrix *
				  vec4(position,1.0);
		  }

and the fragment shader:

		varying vec2 vUv;
		varying vec3 vNormal;
	
		void main() {
		  gl_FragColor = vec4( vec3( vNormal ), 1. );
		}

for now I’m only coloring by the normals:

41
Bildschirmfoto 2019-07-16 um 20.19.41.jpg1112×1080 97.1 KB

I would pass it something like

geometry.addAttribute('opacity', new THREE.BufferAttribute(tubeDirections32, 3));

?

Thanks a lot!

2

Why not sharing a live example with your code?

In any event, using a custom buffer attribute is the right way. Keep in mind that the vertex shader does always work with vertex data. So if you want to assign an opacity value per face, you need to store a value for each respective face vertex.

I’m afraid this statement does not make sense. I guess you want to say you need to pass an additional attribute to the shader.

This is wrong. Opacity has an item size of one not three.