Режим наложения материала Hard Light в Three.js?

Ответ 1

Я не думаю, что вы получите тот эффект, который вам нужен.

Как вы создаете первое изображение? Я предполагаю, что вы просто сделали нечеткий овал в фотошопе и выбрали "жесткий свет"?

Если вам нужно то же самое в three.js, вам нужно создать нечеткий овал и применить его в 2d, используя эффект пост-обработки в файле three.js

Вы можете создать такой овал, сделав вторую сцену в three.js, добавив свет и сияя их на черной плоскости, у которой нет волн, которые находятся в том же положении, что и вода в исходной сцене. Отнесите это к rendertarget. Вы, вероятно, хотите только прожектора и, возможно, указать свет в этой сцене. На вашей нынешней сцене вы можете точно определить прожектор. Отметьте это для другой цели рендеринга.

Когда вы закончите объединить сцены, используя эффект пост-обработки, который реализует жесткий свет

// 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); 

Ответ 2

Я закончил делать это следующим образом благодаря превосходному ответу gman. Просмотрите фрагмент кода ниже, чтобы увидеть его в действии.

Как описано gman:

• Я создал WebGLRenderTarget, на который визуализируется сцена.
• WebGLRenderTarget затем передается ShaderMaterial в качестве текстуры вместе с window.innerWidth, window.innerHeight и color.
• Соответствующие текстурные координаты относительно текущего фрагмента вычисляются путем деления gl_FragCoord на ширину и высоту окна.
• Теперь фрагмент может отображать то, что находится на экране, из текстуры 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>