What's the blending equation of THREE.NormalBlending?

Question

I can't find it in the document. Could anyone tell me what's the equation?

I thought it is equal to the following THREE.CustomBlending:

    blending: THREE.CustomBlending,
    blendEquation: THREE.AddEquation,
    blendSrc: THREE.SrcAlphaFactor,
    blendDst: THREE.OneMinusSrcAlphaFactor

But I get a different result when I change the material from NormalBlending to the above CustomBlending.

Here is the link about default CustomBlending.

Answer 1

Looking at the source code the various Three.js blending modes are different depending on whether or not the material is marked as using premultiplied alpha or not

So, if the material is considered pre-multiplied then it should be the same as

blending: THREE.CustomBlending,
blendEquation: THREE.AddEquation,
blendSrc: THREE.OneFactor,
blendDst: THREE.OneMinusSrcAlphaFactor

Otherwise it's

blending: THREE.CustomBlending,
blendEquation: THREE.AddEquation,
blendSrc: THREE.SrcAlphaFactor,
blendSrcAlpha: THREE.OneFactor,
blendDst: THREE.OneMinusSrcAlphaFactor

"use strict";

const nonPremultipledBlend = {
  blending: THREE.CustomBlending,
  blendEquation: THREE.AddEquation,
  blendSrc: THREE.SrcAlphaFactor,
  blendSrcAlpha: THREE.OneFactor,
  blendDst: THREE.OneMinusSrcAlphaFactor,
};

const premultipledBlend = {
  blending: THREE.CustomBlending,
  blendEquation: THREE.AddEquation,
  blendSrc: THREE.OneFactor,
  blendDst: THREE.OneMinusSrcAlphaFactor,
};


const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
const camera = new THREE.OrthographicCamera(-1.5, 1.5, 1, -1, -1, 1);
camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry(.5, .5);
[
  { color: 0xFF8080, x: -.6,  y:    0, z: 0.2, },
  { color: 0x008040, x: -.30, y: -.25, z: 0.1, },
  { color: 0x008040, x: -.90, y: -.25, z: 0.1, blend: nonPremultipledBlend, },
  { color: 0xFF8080, x:  .6,  y:    0, z: 0.2, },
  { color: 0x008040, x:  .30, y: -.25, z: 0.1, pre: true, },
  { color: 0x008040, x:  .90, y: -.25, z: 0.1, pre: true, blend: premultipledBlend, },
].forEach(info => {
  const material = new THREE.MeshBasicMaterial({
    color: info.color,
    transparent: true,
    opacity: .5,
  });
  if (info.pre) {
    material.premultipliedAlpha = info.pre;
  }
  if (info.blend) {
    Object.assign(material, info.blend);
  }
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  mesh.position.x = info.x;
  mesh.position.y = info.y;
  mesh.position.z = info.z;
});
renderer.render(scene, camera);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>