如标题,我想根据图片中的颜色为纹理添加光效。实际上,它的夜景图片纹理的世界地图使用了三个.js,图片中的光线是白色,另一个是黑色。我希望通过vertexShader和fragmentShader,GLSL在白色地方添加灯光效果。
相对理想的效果,如第一张图片,第二张是我的测试演示。
我的代码是这样的:
<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;
}
我把所有的纹理都严肃地渲染了,但是光线的位置太弱而且很差,我可以判断原始图片纹理中的颜色和R G B并改变gl_FragColor的系数,我没能做到。
尽管如此,它可能很难看,因为我猜全程可能都是错误的。
谁能帮助我,非常感谢你!