I am a beginner in three.js. When I set the blendSrc to THREE.OneMinusDstAlphaFactor in a plane mesh material, the mesh is not displayed. Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="container"></div>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
let container, stats;
let camera, scene, renderer;
let mesh1, mesh2;
init();
animate();
function init() {
container = document.getElementById( 'container' );
//
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
camera.position.z = 5;
scene = new THREE.Scene();
var geometry1 = new THREE.PlaneGeometry(1, 1);
var geometry2 = new THREE.PlaneGeometry(1, 1);
var material1 = new THREE.MeshBasicMaterial(
{
color: 0x00ff00,
transparent: true,
opacity: 0.5,
}
);
var material2 = new THREE.MeshBasicMaterial(
{
color: 0xff0000,
transparent: true,
opacity: 0.5,
blending: THREE.CustomBlending,
blendSrc: THREE.OneMinusDstAlphaFactor,
blendDst: THREE.OneFactor,
}
);
mesh1 = new THREE.Mesh( geometry1, material1 );
mesh1.position.x = 0.25;
mesh2 = new THREE.Mesh( geometry2, material2 );
mesh2.position.x = -0.25;
mesh2.position.z = 0.25;
scene.add( mesh1 );
scene.add( mesh2 );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
According to the formula: C_result = C_source * F_source + C_destination * F_destination (ref: https://learnopengl.com/Advanced-OpenGL/Blending), my expected result is that the overlapped area will be displayed as C_result = (1 - Alpha_dst) * (1, 0, 0) + 1 * (0, 1, 0) = 0.5 * (1, 0, 0) + 1 * (0, 1, 0) = (0.5, 1, 0). Did I misunderstand something?