threejs着色器为照片中的颜色添加光线

时间:2018-02-08 10:56:33

标签: javascript three.js glsl

如标题,我想根据图片中的颜色为纹理添加光效。实际上,它的夜景图片纹理的世界地图使用了三个.js,图片中的光线是白色,另一个是黑色。我希望通过vertexShader和fragmentShader,GLSL在白色地方添加灯光效果。

相对理想的效果,如第一张图片,第二张是我的测试演示。

我想要的完美效果是the perfect effect I want

我的threejs申请书my threejs application

我的代码是这样的:

<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
varying vec3 vecPos;
varying vec3 vecNormal;

void main() {
  vUv = uv;
  vecPos = (modelViewMatrix * vec4(position, 1.0)).xyz;
  vecNormal = (modelViewMatrix * vec4(normal, 0.0)).xyz;
  gl_Position = projectionMatrix * vec4(vecPos, 1.0);
}

<script id="fragmentShader" type="x-shader/x-fragment">
precision highp float;

varying vec2 vUv;
varying vec3 vecPos;
varying vec3 vecNormal;

uniform float lightIntensity;
uniform sampler2D textureSampler;

struct PointLight {
  vec3 color;
  vec3 position;
  float distance;
};

uniform PointLight pointLights[NUM_POINT_LIGHTS];

void main(void) {
  vec4 addedLights = vec4(0.0, 0.0, 0.0, 1.0);
  for(int l = 0; l < NUM_POINT_LIGHTS; l++) {
      vec3 lightDirection = normalize(vecPos - pointLights[l].position);
      addedLights.rgb += clamp(dot(-lightDirection, vecNormal), 0.0, 1.0) * pointLights[l].color * lightIntensity;
  }
  gl_FragColor = texture2D(textureSampler, vUv) * addedLights;
}

然后,结果显示如下:
the result by the code above

我把所有的纹理都严肃地渲染了,但是光线的位置太弱而且很差,我可以判断原始图片纹理中的颜色和R G B并改变gl_FragColor的系数,我没能做到。

尽管如此,它可能很难看,因为我猜全程可能都是错误的。

谁能帮助我,非常感谢你!

0 个答案:

没有答案