javascript - THREE.NormalBlending 的混合方程是什么？

Question

我在文档中找不到它。谁能告诉我方程式是什么？

我认为它等于以下 THREE.CustomBlending:

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

但是当我将 Material 从 NormalBlending 更改为上面的 CustomBlending 时，我得到了不同的结果。

这是 link关于默认 CustomBlending。

Answer 1

Looking at the source code Three.js 的各种混合模式根据 Material 是否标记为使用预乘 alpha 而不同

因此，如果 Material 被认为是预乘的，那么它应该与

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

否则就是

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>