我正在尝试编写一个抽象WebGL函数的javascript程序,以便我可以使用不同的着色器绘制不同的模型。我创建了一个着色器对象,我最终将其修改为将着色器程序作为参数和模型对象。我遇到的问题是我的模型目前正在屏幕上绘制,但它显示为黑色,而不是应用了预期的phong着色器。我不确定错误是在我的javascript还是在我的着色器程序中。我只想弄清楚完全黑色绘制的对象是否是一个特定的问题,或者它是否可能是许多不同的东西。任何帮助表示赞赏。对不起,如果这个问题太模糊了。
这是我的Shader对象:
function Shader(){
this.program = createProgram(gl, document.getElementById('vertexShader').text,
document.getElementById('fragmentShader').text);
this.vertexPositionLocation = gl.getUniformLocation(this.program, 'vertexPosition');
this.vertexNormalLocation = gl.getUniformLocation(this.program, 'vertexNormal')
gl.enableVertexAttribArray(this.vertexNormalLocation);
gl.enableVertexAttribArray(this.vertexNormalLocation);
this.projectionMatrixLocation = gl.getUniformLocation(this.program, 'projectionMatrix');
this.viewMatrixLocation = gl.getUniformLocation(this.program, 'viewMatrix');
this.modelMatrixLocation = gl.getUniformLocation(this.program, 'modelMatrix');
this.lightPositionLocation = gl.getUniformLocation(this.program, 'lightPosition');
this.lightColorLocation = gl.getUniformLocation(this.program, 'lightColor');
this.modelColorLocation = gl.getUniformLocation(this.program, 'modelColor');
gl.useProgram(this.program);
}
这是我的模型对象:
function Model(model){
this.positionArray = new Float32Array(flatten(model.positions));
this.normalArray = new Float32Array(flatten(model.normals));
this.triangleArray = new Uint16Array(flatten(model.triangles));
//initialize buffer objects
this.normalBuffer = gl.createBuffer();
this.positionBuffer = gl.createBuffer();
this.triangleBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.normalArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.positionArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.triangleBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.triangleArray, gl.STATIC_DRAW);
gl.enable(gl.DEPTH_TEST);
Model.draw = function(shader){
var modelMatrix = new Matrix4();
var viewMatrix = new Matrix4();
var projectionMatrix = new Matrix4();
modelMatrix.rotate(modelRotationX, 1, 0, 0);
modelMatrix.rotate(modelRotationY, 0, 1, 0);
viewMatrix.translate(0, 0, -3);
projectionMatrix.perspective(90, 1, 1, 10);
gl.uniform3f(shader.lightColorLocation, 1.0, 1.0, 1.0);
gl.uniform4f(shader.lightPositionLocation, 0.0, 8.0, 8.0, 1.0);
gl.uniform3f(shader.modelColorLocation, 0.6, 0.0, 0.0);
gl.uniformMatrix4fv(shader.modelMatrixLocation, false, modelMatrix.elements);
gl.uniformMatrix4fv(shader.viewMatrixLocation, false, viewMatrix.elements);
gl.uniformMatrix4fv(shader.projectionMatrixLocation, false, projectionMatrix.elements);
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.vertexAttribPointer(shader.vertexNormalLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(shader.vertexPositionLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0);
}
}
这是我的片段着色器程序:
<script id = "fragmentShader" type="x-shader/x-fragment">
precision mediump float;
varying vec3 fragmentNormal;
varying vec3 fragmentLight;
varying vec3 fragmentView;
uniform vec3 modelColor;
uniform vec3 lightColor;
void main() {
vec3 n = normalize(fragmentNormal);
vec3 l = normalize(fragmentLight);
vec3 v = normalize(fragmentView);
vec3 h = normalize(l + v);
float d = max(dot(l, n), 0.0);
float s = pow(max(dot(h, n), 0.0), 10.0);
vec3 fragmentColor = modelColor * lightColor * d + lightColor * s;
gl_FragColor = vec4(fragmentColor, 1.0);
}
</script>
答案 0 :(得分:0)
所以你看到了模特的轮廓,但它是黑色的?
我要做的第一件事就是添加
gl_FragColor = vec4(1,0,0,1);
片段着色器的底部。你的模型变成了绿色吗?没有?然后你没有使用那个着色器。
其他我接下来试试
gl_FragColor = vec4(lightColor,1);
模型是否会改变灯光的颜色?如果不是,那么您将灯光颜色设置为错误
下一步
gl_FragColor = vec4(modelColor,1);
模型是否会改变模型颜色?如果没有,您将模型颜色设置错误。
接下来我试试
gl_FragColor = vec4(n * .5 + .5,1);
您应该将模型的法线视为颜色。它是黑色然后fragmentNormal
是错误的。
否则请对l
,v
和h
等进行相同操作...