Multiply blend mode in ThreeJs and jsfiddle differs

Questions
,
1

Hi,
I’m quite new in ThreeJs and have a question about blend mode, and the multiply blend mode in particular.
I have a scene were i want to have two planes with textures on top of each other.
The first plane will work as a sheet of “paper” with a texture.
The second plane will be some kind of transparent plastic and will cover a smaller area of the “paper” sheet. This plane have a black and white texture to control the blending and an emissive material. This plane is set to blend mode multiply.

In the ThreeJs editor it works quite well. But when i try to achieve the same results in jsfiddle the blend mode makes the “paper” plane also transparent and the background is visible through both the planes.
I guess this has to be something with the depth write but i can’t understand how to solve it.

I have exported the json files from the ThreeJs editor and used those values inside of the jsfiddle, so they should look the same. But i guess i am missing something in the WebGLRenderer or something.

Jsfiddle:
https://jsfiddle.net/skyLuhx5/3/

image
image1332×611 44.2 KB

ThreeJs editor:

ThreeJs-editor
ThreeJs-editor1200×885 86.2 KB

2

Try setting the texture’s colorSpace like this:

texture1.colorSpace = THREE.SRGBColorSpace;

You may also need to adjust the renderer’s outputColorSpace, depending on your needs:

renderer.outputColorSpace = THREE.SRGBColorSpace; // Or just remove this line

https://jsfiddle.net/0ov7sjgf/

3

I don’t think you understood the question, perhaps I explained it poorly.
It’s not the colors that are wrong.
The background of the html document is visible through both planes in jsfiddle. But this does not happen in the Threejs editor.
See the circled part in the image below.
Top: jsfiddle
Bottom: Threejs editor

Threejseditor-vs-jsfiddle
Threejseditor-vs-jsfiddle750×900 75.2 KB

4

Sorry about the confusion,

Not sure if this is the effect you’re looking for, but If you set the material2 opacity to 1 (or remove it), you’ll get the same result as the editor (no transparency).

5

Thanks! But not exactly the effect i’m looking for.
I want material2 to have a slight transparency, because the real material i’m trying to simulate is slightly transparent. It’s a transparent plastic film that has a print on it.
The multiply blend mode works, but i would like to tone down the effect a little bit, there’s too much contrast with just using multiply blend mode and opacity set to 1.
I just don’t get it why both planes get transparent.

6

I recommend using MeshPhysicalMaterial for this effect. This article might be helpful:

For an even more realistic result, you might consider modeling it in a 3D editor like Blender. You can bake lighting, environment reflections, and other details into a texture. Then, export it as a GLB/GLTF file to use with three.js.

1 Like
7

Not sure exactly whats going in there… but changing to this:

blending: THREE.NormalBlending, // 4,

yields:

image
image1279×1170 227 KB

AdditiveBlending and NormalBlending work but MultiplyBlending shows through to the background…

Maybe some interaction w the alpha channel?

Also if you export from the threejs editor as a zip file… does the standalone app show the same difference?

2 Likes
8

Do you need to change the blending mode for a reason? You can use the following material setup to achieve the effect you’re after…

THREE.MeshStandardMaterial( {
	map: texture1,
 	color: 0xffffff,
	roughness: 1,
	metalness: 0,
	emissive: 0,
	envMapIntensity: 1,
    opacity: 1,
	transparent: true,
} );


const material2 = new THREE.MeshStandardMaterial({
	map: texture2,
	color: 0xffffff,
	roughness: 0.5,
	metalness: 0.2,
	emissive: 0xff0000,
	envMapIntensity: 1
    opacity: 0.5,
	transparent: true,
    depthWrite: false,
    depthTest:false,
 } );
1 Like