Three.js 中的强光 material 混合模式？

Question

我目前正在使用右下方的 MeshPhongMaterial provided by Three.js to create a simple scene with basic water. I would like for the water material to have the Hard Light blending mode that can be found in applications such as Photoshop. How can I achieve the Hard Light 混合模式？

上图的右半部分在 Three.js 中设置为 Hard Light in Photoshop. I am trying to recreate that Hard Light 混合模式。

我遇到的一个线索是完全重新实现 MeshPhongMaterial 的片段和顶点着色器，但这需要我一些时间，因为我对此很陌生。

在 Three.js 中为 material 实现 Hard Light 混合模式的方法是什么？

/* * Scene config **/ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor(0xffffff); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.set(0, 500, 1000); camera.lookAt(scene.position); /* * Scene lights **/ var spotlight = new THREE.SpotLight(0x999999, 0.1); spotlight.castShadow = true; spotlight.shadowDarkness = 0.75; spotlight.position.set(0, 500, 0); scene.add(spotlight); var pointlight = new THREE.PointLight(0x999999, 0.5); pointlight.position.set(75, 50, 0); scene.add(pointlight); var hemiLight = new THREE.HemisphereLight(0xffce7a, 0x000000, 1.25); hemiLight.position.y = 75; hemiLight.position.z = 500; scene.add(hemiLight); /* * Scene objects */ /* Water */ var waterGeo = new THREE.PlaneGeometry(1000, 1000, 50, 50); var waterMat = new THREE.MeshPhongMaterial({ color: 0x00aeff, emissive: 0x0023b9, shading: THREE.FlatShading, shininess: 60, specular: 30, transparent: true }); for (var j = 0; j < waterGeo.vertices.length; j++) { waterGeo.vertices[j].x = waterGeo.vertices[j].x + ((Math.random() * Math.random()) * 30); waterGeo.vertices[j].y = waterGeo.vertices[j].y + ((Math.random() * Math.random()) * 20); } var waterObj = new THREE.Mesh(waterGeo, waterMat); waterObj.rotation.x = -Math.PI / 2; scene.add(waterObj); /* Floor */ var floorGeo = new THREE.PlaneGeometry(1000, 1000, 50, 50); var floorMat = new THREE.MeshPhongMaterial({ color: 0xe9b379, emissive: 0x442c10, shading: THREE.FlatShading }); for (var j = 0; j < floorGeo.vertices.length; j++) { floorGeo.vertices[j].x = floorGeo.vertices[j].x + ((Math.random() * Math.random()) * 30); floorGeo.vertices[j].y = floorGeo.vertices[j].y + ((Math.random() * Math.random()) * 20); floorGeo.vertices[j].z = floorGeo.vertices[j].z + ((Math.random() * Math.random()) * 20); } var floorObj = new THREE.Mesh(floorGeo, floorMat); floorObj.rotation.x = -Math.PI / 2; floorObj.position.y = -75; scene.add(floorObj); /* * Scene render **/ var count = 0; function render() { requestAnimationFrame(render); var particle, i = 0; for (var ix = 0; ix < 50; ix++) { for (var iy = 0; iy < 50; iy++) { waterObj.geometry.vertices[i++].z = (Math.sin((ix + count) * 2) * 3) + (Math.cos((iy + count) * 1.5) * 6); waterObj.geometry.verticesNeedUpdate = true; } } count += 0.05; renderer.render(scene, camera); } render();

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

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

Answer 1

我不认为你会得到你想要的效果。

第一张图片是怎么生成的？我假设您刚刚在 photoshop 中制作了模糊的椭圆并选择了 "hard light"?

如果你想在 three.js 中使用相同的东西，你需要生成一个模糊椭圆并在 three.js[=11= 中使用 post 处理效果将其应用到二维中]

您可以通过在 three.js 中制作第二个场景来生成这样的椭圆形，添加灯光并将它们照射在没有波浪的黑色平面上，该平面与原始场景中水的位置相同.将其渲染到渲染目标。您可能只想要那个场景中的聚光灯和点光源。在您当前的场景中，请务必移除聚光灯。将其渲染到另一个渲染目标。

完成后使用实现硬光的post处理效果组合场景

// pseudo code
vec3 partA = texture2D(sceneTexture, texcoord);
vec3 partB = texture2D(lightTexture, texcoord);
vec3 line1 = 2.0 * partA * partB;
vec3 line2 = 1.0 - (1.0 - partA) * (1.0 - partB);
gl_FragCoord = vec4(mix(line2, line1, step(0.5, partA)), 1);

Answer 2

多亏了，我最终按照以下方式完成了它。查看下面的代码片段以查看它的实际效果。

如gman所述：

我创建了一个 WebGLRenderTarget 来渲染场景。
WebGLRenderTarget然后作为纹理传递给ShaderMaterial的制服，连同window.innerWidth、window.innerHeight 和 color.
相对于当前片段的各个纹理坐标是通过将 gl_FragCoord 除以 window 的宽度和高度来计算的。
片段现在可以从 WebGLRenderTarget 纹理中采样屏幕上的内容，并将其与对象的 color 结合以输出正确的 gl_FragColor.

到目前为止效果很好。我目前正在研究的唯一一件事是创建一个单独的场景，其中只包含混合所需的对象，也许是克隆的对象。我认为那会更高效。目前我正在切换要在渲染循环中混合的对象的可见性，在它被发送到 WebGLRenderTarget 之前和之后。对于具有更多对象的更大场景，这可能没有多大意义并且会使事情复杂化。

var conf = {
  'Color A': '#cc6633',
  'Color B': '#0099ff'
};

var GUI = new dat.GUI();

var A_COLOR = GUI.addColor(conf, 'Color A');

A_COLOR.onChange(function(val) {

  A_OBJ.material.uniforms.color = {
    type: "c",
    value: new THREE.Color(val)
  };

  A_OBJ.material.needsUpdate = true;

});

var B_COLOR = GUI.addColor(conf, 'Color B');

B_COLOR.onChange(function(val) {

  B_OBJ.material.uniforms.color = {
    type: "c",
    value: new THREE.Color(val)
  };

  B_OBJ.material.needsUpdate = true;

});

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0x888888);
renderer.setSize(window.innerWidth, window.innerHeight);

var target = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {format: THREE.RGBFormat});

document.body.appendChild(renderer.domElement);

camera.position.set(0, 0, 50);
camera.lookAt(scene.position);

var A_GEO = new THREE.PlaneGeometry(20, 20);
var B_GEO = new THREE.PlaneGeometry(20, 20);

var A_MAT = new THREE.ShaderMaterial({
  uniforms: {
    color: {
      type: "c",
      value: new THREE.Color(0xcc6633)
    }
  },
  vertexShader: document.getElementById('vertexShaderA').innerHTML,
  fragmentShader: document.getElementById('fragmentShaderA').innerHTML
});

var B_MAT = new THREE.ShaderMaterial({
  uniforms: {
    color: {
      type: "c",
      value: new THREE.Color(0x0099ff)
    },
    window: {
      type: "v2",
      value: new THREE.Vector2(window.innerWidth, window.innerHeight)
    },
    target: {
      type: "t",
      value: target
    }
  },
  vertexShader: document.getElementById('vertexShaderB').innerHTML,
  fragmentShader: document.getElementById('fragmentShaderB').innerHTML
});

var A_OBJ = new THREE.Mesh(A_GEO, A_MAT);
var B_OBJ = new THREE.Mesh(B_GEO, B_MAT);

A_OBJ.position.set(-5, -5, 0);
B_OBJ.position.set(5, 5, 0);

scene.add(A_OBJ);
scene.add(B_OBJ);

function render() {
  requestAnimationFrame(render);

  B_OBJ.visible = false;
  renderer.render(scene, camera, target, true);

  B_OBJ.visible = true;
  renderer.render(scene, camera);
}

render();

body { margin: 0 }
canvas { display: block }

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

<script type="x-shader/x-vertex" id="vertexShaderA">
  uniform vec3 color;
  
  void main() {
  
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    
  }
</script>

<script type="x-shader/x-fragment" id="fragmentShaderA">
  uniform vec3 color;
  
  void main() {
  
    gl_FragColor = vec4(color, 1.0);
    
  }
</script>

<script type="x-shader/x-vertex" id="vertexShaderB">
  uniform vec3 color;
  
  void main() {
  
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    
  }
</script>

<script type="x-shader/x-fragment" id="fragmentShaderB">
  uniform vec3 color;
  uniform vec2 window;
  uniform sampler2D target;
  
  void main() {

    vec2 targetCoords = gl_FragCoord.xy / window.xy;
  
    vec4 a = texture2D(target, targetCoords);
    vec4 b = vec4(color, 1.0);
    
    vec4 multiply = 2.0 * a * b;
    vec4 screen = 1.0 - 2.0 * (1.0 - a) * (1.0 - b);
    
    gl_FragColor = vec4(mix(screen, multiply, step(0.5, a)));    
    
  }
</script>

Three.js 中的强光 material 混合模式？

Hard Light material blending mode in Three.js?

javascript

shader

glsl

webgl

three.js