Glsl 基于位置纹理的WebGL法线计算
我试图通过顶点置换在webGL中创建一个带有“水波”的程序水坑。 我遇到的问题是,我听到一种无法解释的噪音 下面是第一个过程顶点着色器,我在其中计算顶点位置,稍后渲染到纹理,然后在第二个过程中使用Glsl 基于位置纹理的WebGL法线计算,glsl,webgl,normals,render-to-texture,Glsl,Webgl,Normals,Render To Texture,我试图通过顶点置换在webGL中创建一个带有“水波”的程序水坑。 我遇到的问题是,我听到一种无法解释的噪音 下面是第一个过程顶点着色器,我在其中计算顶点位置,稍后渲染到纹理,然后在第二个过程中使用 void main() { float damping = 0.5; vNormal = normal; // wave radius float timemod =
void main() {
float damping = 0.5;
vNormal = normal;
// wave radius
float timemod = 0.55;
float ttime = mod(time , timemod);
float frequency = 2.0*PI/waveWidth;
float phase = frequency * 0.21;
vec4 v = vec4(position,1.0);
// Loop through array of start positions
for(int i = 0; i < 200; i++){
float cCenterX = ripplePos[i].x;
float cCenterY = ripplePos[i].y;
vec2 center = vec2(cCenterX, cCenterY) ;
if(center.x == 0.0 && center.y == 0.0)
center = normalize(center);
// wave width
float tolerance = 0.005;
radius = sqrt(pow( uv.x - center.x , 2.0) + pow( uv.y -center.y, 2.0));
// Creating a ripple
float w_height = (tolerance - (min(tolerance,pow(ripplePos[i].z-radius*10.0,2.0)) )) * (1.0-ripplePos[i].z/timemod) *5.82;
// -2.07 in the end to keep plane at right height. Trial and error solution
v.z += waveHeight*(1.0+w_height/tolerance) / 2.0 - 2.07;
vNormal = normal+v.z;
}
vPosition = v.xyz;
gl_Position = projectionMatrix * modelViewMatrix * v;
}
第二个顶点着色器是标准的直通
第二遍fragmentshader是我尝试计算用于灯光计算的法线的地方
void main() {
float w = 1.0 / 200.0;
float h = 1.0 / 200.0;
// Nearest Nieghbours
vec3 p0 = texture2D(rttTexture, vUV).xyz;
vec3 p1 = texture2D(rttTexture, vUV + vec2(-w, 0)).xyz;
vec3 p2 = texture2D(rttTexture, vUV + vec2( w, 0)).xyz;
vec3 p3 = texture2D(rttTexture, vUV + vec2( 0, h)).xyz;
vec3 p4 = texture2D(rttTexture, vUV + vec2( 0, -h)).xyz;
vec3 nVec1 = p2 - p0;
vec3 nVec2 = p3 - p0;
vec3 vNormal = cross(nVec1, nVec2);
vec3 N = normalize(vNormal);
float theZ = texture2D(rttTexture, vUV).r;
//gl_FragColor = vec4(1.,.0,1.,1.);
//gl_FragColor = texture2D(tDiffuse, vUV);
gl_FragColor = vec4(vec3(N), 1.0);
}
结果是:
图像显示法线贴图,我指的是蓝色的不一致性
以下是现场演示:
我很感激任何提示和指点,不仅仅是解决这个问题。但是一般的代码,我是来学习的 看了一眼之后,您的问题似乎是存储x/y位置
gl_FragColor = vec4(vec3(p0*0.5+0.5), 1.0);
无论如何,您不需要存储它们,因为texel位置隐式地给出了x/y值。只要把你的正常点改成这样
vec3 p2 = vec3(1, 0, texture2D(rttTexture, vUV + vec2(w, 0)).z);
与1、0相比,您需要使用与显示的四元网格相对于波高的大小相适应的比例。不管怎样,现在的结果是这样的
高度/z
似乎是由距离中心的距离来缩放的,所以我去寻找一个normalize()
并将其删除
vec3 p = vPosition;
gl_FragColor = vec4(p*0.5+0.5, 1.0);
法线现在看起来像这样
vec3 p2 = vec3(1, 0, texture2D(rttTexture, vUV + vec2(w, 0)).z);
好的,非常感谢您抽出时间,这正是我想要的。你是个救生员:)我真的很欣赏你的解释。