Some questions in material array ( material[] ) about "transparent:true"

Questions
1

Some questions in material array about “transparent:true”

Here is a part of the code. When I set the attribute “transparent:true” , It will consume a lot of performance, causing a drop in frames.

Before I set it true is 60 FPS, then 30 FPS. If all my 5

const mat1 = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide /*transparent:true*/ });
const mat2 = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
const mat3 = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
const mat4 = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
const mat5 = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
const material = [ mat1,mat2,mat3,mat4,mat5 ];
const road = new THREE.Mesh(geometry, material);

16FPS
16FPS1047×593 30.9 KB

30FPS
30FPS1010×558 29.8 KB

60FPS
60FPS972×576 29.4 KB

materials set this attribute true, it is only below 10 PFS

2

In single material , setting transparent:true cause none bad effects, but in the array its bad effect seems to rise exponentially

3

As far as I know, setting transparent to true will result in Two-pass DoubleSided Rendering at material.
Two pass double sided rendering is more expensive than double side rendering
if you don’t want to two-pass double sided rendering set Material.forceSinglePass = true

1 Like
4

Thank you very much.It seems to be the key to my current problem . Your answer helps me very much

5

transparent:true set in material array, seems to amplify the impact at an exponential level.

why？

In single material , impact is very small

6

I don’t know why but three.js recommend 1 mesh : 1 material, 1 mesh : material array is deprecated I think it causes side effect somehow
if you want to get a answer add a jsfiddle or codesandbox for test

1 Like
7

thank you agin, it is difficute for me to add a jsfiddle or codesandbox.I try not to use this usage

1 Like
8

Are there a lot of these “road” meshes? A mesh with 5x materials costs 5x as many draw calls, and that is expensive. If your total number of draw calls are high (>100 for example) you will likely see performance drop as a result.

2 Likes
9

Yes, there are . I download the example from github for studying . Thanks all of you answer my question