纹理平面上的 OpenGL 光照不起作用
ASD*_*SDF 1 c++ opengl textures lighting opengl-compat
我想照亮纹理平面，但这行不通。实心球上的光很好，但纹理平面上的光不亮。
实心球体上的照明效果良好。
但是，纹理平面上的照明不起作用。（GL_DECAL，GL_REPLACE；我也尝试过GL_MODULATE）
这是我的渲染代码的片段。（完整代码在 GitHub 上）
加载纹理。
sf::Image image;
if (!image.loadFromFile(path))
return false;
glGenTextures(1, &id);
glBindTexture(GL_TEXTURE_2D, id);
glTexImage2D(
GL_TEXTURE_2D, 0, GL_RGBA,
image.getSize().x, image.getSize().y, 0,
GL_RGBA, GL_UNSIGNED_BYTE,
image.getPixelsPtr()
);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
初始化
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClearDepth(1.0f);
glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);
glShadeModel(GL_SMOOTH);
//glEnable(GL_CULL_FACE);
glFrontFace(GL_CCW);
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
glutSetCursor(GLUT_CURSOR_NONE);
light.Init();
camera.SetPin((GLfloat)width / 2, (GLfloat)height/2);
显示回调
adjustPerspective();
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glEnable(GL_LIGHTING);
glPushMatrix();
camera.SetLookAt();
light.On();
// TODO: dsiplay processing
for (auto& obj : display_objs)
{
glPushMatrix();
obj->Draw();
glPopMatrix();
}
glPopMatrix();
// print fps and swap buffers
灯光初始化功能
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE);
glEnable(GL_COLOR_MATERIAL);
// Set lighting intensity and color
glLightfv(GL_LIGHT0, GL_AMBIENT, qaAmbientLight);
glLightfv(GL_LIGHT0, GL_DIFFUSE, qaDiffuseLight);
glLightfv(GL_LIGHT0, GL_POSITION, qaLightPosition);
glLightfv(GL_LIGHT0, GL_SPECULAR, qaSpecularLight);
////////////////////////////////////////////////
glLightf(GL_LIGHT0, GL_SPOT_CUTOFF, 80.0);// set cutoff angle
glLightfv(GL_LIGHT0, GL_SPOT_DIRECTION, dirVector0);
glLightf(GL_LIGHT0, GL_SPOT_EXPONENT, 10.0); // set focusing strength
Light.On() 函数
glPushMatrix();
glTranslatef(2.0, 10.0, 2.0);
//glRotatef(90, 1, 0, 0);
glLightfv(GL_LIGHT0, GL_POSITION, qaLightPosition);
glLightfv(GL_LIGHT0, GL_SPOT_DIRECTION, dirVector0);
glPopMatrix();
glPushMatrix();
glDisable(GL_LIGHTING);
glTranslatef(2.0, 0.0, 2.0);
glRotatef(-90.0, 1.0, 0.0, 0.0);
glutWireCone(tan(80.0 / 180.0 * 3.14159265),10.0,20,20);
glEnable(GL_LIGHTING);
glPopMatrix();
这就是纹理平面绘制函数。
float tile_x = 0.125;
glTranslatef(x, y, z);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, tex.GetId());
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glBegin(GL_QUADS);
// Both of the following cases not work.
glNormal3f(0, -1, 0);
glNormal3f(0, 1, 0);
glTexCoord2f(0.0, 0.0); glVertex3f(0, 0, 0);
glTexCoord2f(height*tile_x, 0.0); glVertex3f(0, 0, width);
glTexCoord2f(height*tile_x, width*tile_x); glVertex3f(height, 0, width);
glTexCoord2f(0.0, width*tile_x); glVertex3f(height, 0, 0);
glEnd();
glDisable(GL_TEXTURE_2D);
glDisable(GL_BLEND);
我改变了矢量方向，改变了glTexEnvf属性，改变了代码的顺序，但没有修复错误。我认为我的代码中有一个根本错误，但我找不到它。为什么会发生这种情况？我该如何解决？
\n\n\n我想照亮纹理平面，但这行不通。实心球上的光很好，但纹理平面上的光不亮。
\n
这是由OpenGL 标准光照模型的Gouraud Shading模型引起的问题。虽然Phong 着色通常是指按片段进行光照计算的技术，但在Gouraud Shading中，光照计算是按顶点进行的。计算出的光根据图元上片段的重心坐标进行插值。
\n\n这意味着在您的情况下，光线是针对地面四边形的角计算的。如此计算的光被插值到其间的所有片段。角点处的法向量与光向量的角度趋向于 90\xc2\xb0。因此，整个地面四边形看起来几乎没有照明。
\n\n由于光线是按顶点计算的，因此会计算比四边形 4 个角更多的位置的光线，并且质量会提高。请注意，球体上的光线看起来几乎完美，因为球体由许多围绕其形状的顶点组成。
\n\n尝试以下代码，将四边形拆分为图块：
\n\nint tiles = 5;\nfloat u_max = height*tile_x;\nfloat v_max = width*tile_x\n\nglBegin(GL_QUADS);\nglNormal3f(0, 1, 0);\n\nfor (int x=0; x < tiles; ++x)\n{\n for (int y=0; y < tiles; ++y)\n {\n x0 = (float)x/(float)tiles;\n x1 = (float)(x+1)/(float)tiles;\n y0 = (float)y/(float)tiles;\n y1 = (float)(y+1)/(float)tiles;\n\n glTexCoord2f(u_max*x0, v_max*y0); glVertex3f(height*x0, 0, widht*y0);\n glTexCoord2f(u_max*x1, v_max*y0); glVertex3f(height*x0, 0, widht*y1);\n glTexCoord2f(u_max*x1, v_max*y1); glVertex3f(height*x1, 0, widht*y1);\n glTexCoord2f(u_max*x0, v_max*y1); glVertex3f(height*x1, 0, widht*y0);\n }\n}\nglEnd();\n当然，您也可以编写自己的着色器并实现每个片段的照明。但是已弃用的固定功能管道 OpenGL 标准光照模型不支持每片段光照。
\n\n查看 WebGL 示例中的差异：
\n\n\r\n
\r\n
int tiles = 5;\nfloat u_max = height*tile_x;\nfloat v_max = width*tile_x\n\nglBegin(GL_QUADS);\nglNormal3f(0, 1, 0);\n\nfor (int x=0; x < tiles; ++x)\n{\n for (int y=0; y < tiles; ++y)\n {\n x0 = (float)x/(float)tiles;\n x1 = (float)(x+1)/(float)tiles;\n y0 = (float)y/(float)tiles;\n y1 = (float)(y+1)/(float)tiles;\n\n glTexCoord2f(u_max*x0, v_max*y0); glVertex3f(height*x0, 0, widht*y0);\n glTexCoord2f(u_max*x1, v_max*y0); glVertex3f(height*x0, 0, widht*y1);\n glTexCoord2f(u_max*x1, v_max*y1); glVertex3f(height*x1, 0, widht*y1);\n glTexCoord2f(u_max*x0, v_max*y1); glVertex3f(height*x1, 0, widht*y0);\n }\n}\nglEnd();\n(function loadscene() {\r\n\r\nvar resize, gl, gouraudDraw, phongDraw, vp_size;\r\nvar bufSphere = {};\r\n\r\nfunction render(delteMS){\r\n\r\n var shading = document.getElementById( "shading" ).value;\r\n var shininess = document.getElementById( "shininess" ).value;\r\n var ambientCol = [0.2, 0.2, 0.2];\r\n var diffuseCol = [0.6, 0.6, 0.6];\r\n var specularCol = [0.8, 0.8, 0.8];\r\n\r\n Camera.create();\r\n Camera.vp = vp_size;\r\n \r\n gl.enable( gl.DEPTH_TEST );\r\n gl.clearColor( 0.0, 0.0, 0.0, 1.0 );\r\n gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );\r\n\r\n gl.disable(gl.CULL_FACE);\r\n \r\n \r\n var progDraw = shading == 0 ? gouraudDraw : phongDraw;;\r\n // set up draw shader\r\n ShaderProgram.Use( progDraw.prog );\r\n ShaderProgram.SetUniformM44( progDraw.prog, "u_projectionMat44", Camera.Perspective() );\r\n ShaderProgram.SetUniformM44( progDraw.prog, "u_viewMat44", Camera.LookAt() );\r\n ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.lightPos", [0.0, 0.0, 0.25] )\r\n ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.ambient", ambientCol )\r\n ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.diffuse", diffuseCol )\r\n ShaderProgram.SetUniformF3( progDraw.prog, "u_lightSource.specular", specularCol )\r\n ShaderProgram.SetUniformF1( progDraw.prog, "u_lightSource.shininess", shininess )\r\n var modelMat = IdentityMat44()\r\n modelMat = RotateAxis( modelMat, -1.5, 0 );\r\n modelMat = RotateAxis( modelMat, CalcAng( delteMS, 17.0 ), 1 );\r\n ShaderProgram.SetUniformM44( progDraw.prog, "u_modelMat44", modelMat );\r\n \r\n // draw scene\r\n VertexBuffer.Draw( bufSphere );\r\n \r\n requestAnimationFrame(render);\r\n}\r\n\r\nfunction resize() {\r\n //vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];\r\n vp_size = [window.innerWidth, window.innerHeight]\r\n canvas.width = vp_size[0];\r\n canvas.height = vp_size[1];\r\n gl.viewport( 0, 0, vp_size[0], vp_size[1] );\r\n}\r\n\r\nfunction initScene() {\r\n\r\n canvas = document.getElementById( "canvas");\r\n gl = canvas.getContext( "experimental-webgl" );\r\n if ( !gl )\r\n return null;\r\n\r\n gouraudDraw = {}\r\n gouraudDraw.prog = ShaderProgram.Create( \r\n [ { source : "gouraud-shader-vs", stage : gl.VERTEX_SHADER },\r\n { source : "gouraud-shader-fs", stage : gl.FRAGMENT_SHADER }\r\n ],\r\n [ "u_projectionMat44", "u_viewMat44", "u_modelMat44", \r\n "u_lightSource.lightDir", "u_lightSource.ambient", "u_lightSource.diffuse", "u_lightSource.specular", "u_lightSource.shininess", ] );\r\n if ( gouraudDraw.prog == 0 )\r\n return; \r\n gouraudDraw.inPos = gl.getAttribLocation( gouraudDraw.prog, "inPos" );\r\n gouraudDraw.inNV = gl.getAttribLocation( gouraudDraw.prog, "inNV" );\r\n gouraudDraw.inCol = gl.getAttribLocation( gouraudDraw.prog, "inCol" );\r\n\r\n phongDraw = {}\r\n phongDraw.prog = ShaderProgram.Create( \r\n [ { source : "phong-shader-vs", stage : gl.VERTEX_SHADER },\r\n { source : "phong-shader-fs", stage : gl.FRAGMENT_SHADER }\r\n ],\r\n [ "u_projectionMat44", "u_viewMat44", "u_modelMat44", \r\n "u_lightSource.lightDir", "u_lightSource.ambient", "u_lightSource.diffuse", "u_lightSource.specular", "u_lightSource.shininess", ] );\r\n if ( phongDraw.prog == 0 )\r\n return;\r\n phongDraw.inPos = gl.getAttribLocation( phongDraw.prog, "inPos" );\r\n phongDraw.inNV = gl.getAttribLocation( phongDraw.prog, "inNV" );\r\n phongDraw.inCol = gl.getAttribLocation( phongDraw.prog, "inCol" );\r\n \r\n // create cube\r\n var layer_size = 16, circum_size = 32;\r\n var rad_circum = 1.0;\r\n var rad_tube = 0.5;\r\n var sphere_pts = [-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0];\r\n var sphere_nv = [0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0];\r\n var sphere_col = [0.8, 0.6, 0.3, 0.8, 0.6, 0.3, 0.8, 0.6, 0.3, 0.8, 0.6, 0.3];\r\n var sphere_inx = [0, 1, 2, 0, 2, 3];\r\n bufSphere = VertexBuffer.Create(\r\n [ { data : sphere_pts, attrSize : 3, attrLoc : gouraudDraw.inPos },\r\n { data : sphere_nv, attrSize : 3, attrLoc : gouraudDraw.inNV },\r\n { data : sphere_col, attrSize : 3, attrLoc : gouraudDraw.inCol } ],\r\n sphere_inx );\r\n \r\n window.onresize = resize;\r\n resize();\r\n requestAnimationFrame(render);\r\n}\r\n\r\nfunction Fract( val ) { \r\n return val - Math.trunc( val );\r\n}\r\nfunction CalcAng( deltaTime, intervall ) {\r\n return Fract( deltaTime / (1000*intervall) ) * 2.0 * Math.PI;\r\n}\r\nfunction CalcMove( deltaTime, intervall, range ) {\r\n var pos = self.Fract( deltaTime / (1000*intervall) ) * 2.0\r\n var pos = pos < 1.0 ? pos : (2.0-pos)\r\n return range[0] + (range[1] - range[0]) * pos;\r\n} \r\nfunction EllipticalPosition( a, b, angRag ) {\r\n var a_b = a * a - b * b\r\n var ea = (a_b <= 0) ? 0 : Math.sqrt( a_b );\r\n var eb = (a_b >= 0) ? 0 : Math.sqrt( -a_b );\r\n return [ a * Math.sin( angRag ) - ea, b * Math.cos( angRag ) - eb, 0 ];\r\n}\r\n\r\nglArrayType = typeof Float32Array !="undefined" ? Float32Array : ( typeof WebGLFloatArray != "undefined" ? WebGLFloatArray : Array );\r\n\r\nfunction IdentityMat44() {\r\n var m = new glArrayType(16);\r\n m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0;\r\n m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0;\r\n m[8] = 0; m[9] = 0; m[10] = 1; m[11] = 0;\r\n m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;\r\n return m;\r\n};\r\n\r\nfunction RotateAxis(matA, angRad, axis) {\r\n var aMap = [ [1, 2], [2, 0], [0, 1] ];\r\n var a0 = aMap[axis][0], a1 = aMap[axis][1]; \r\n var sinAng = Math.sin(angRad), cosAng = Math.cos(angRad);\r\n var matB = new glArrayType(16);\r\n for ( var i = 0; i < 16; ++ i ) matB[i] = matA[i];\r\n for ( var i = 0; i < 3; ++ i ) {\r\n matB[a0*4+i] = matA[a0*4+i] * cosAng + matA[a1*4+i] * sinAng;\r\n matB[a1*4+i] = matA[a0*4+i] * -sinAng + matA[a1*4+i] * cosAng;\r\n }\r\n return matB;\r\n}\r\n\r\nfunction Cross( a, b ) { return [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0], 0.0 ]; }\r\nfunction Dot( a, b ) { return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]; }\r\nfunction Normalize( v ) {\r\n var len = Math.sqrt( v[0] * v[0] + v[1] * v[1] + v[2] * v[2] );\r\n return [ v[0] / len, v[1] / len, v[2] / len ];\r\n}\r\n\r\nvar Camera = {};\r\nCamera.create = function() {\r\n this.pos = [0, 2, 0.0];\r\n this.target = [0, 0, 0];\r\n this.up = [0, 0, 1];\r\n this.fov_y = 90;\r\n this.vp = [800, 600];\r\n this.near = 0.5;\r\n this.far = 100.0;\r\n}\r\nCamera.Perspective = function() {\r\n var fn = this.far + this.near;\r\n var f_n = this.far - this.near;\r\n var r = this.vp[0] / this.vp[1];\r\n var t = 1 / Math.tan( Math.PI * this.fov_y / 360 );\r\n var m = IdentityMat44();\r\n m[0] = t/r; m[1] = 0; m[2] = 0; m[3] = 0;\r\n m[4] = 0; m[5] = t; m[6] = 0; m[7] = 0;\r\n m[8] = 0; m[9] = 0; m[10] = -fn / f_n; m[11] = -1;\r\n m[12] = 0; m[13] = 0; m[14] = -2 * this.far * this.near / f_n; m[15] = 0;\r\n return m;\r\n}\r\nCamera.LookAt = function() {\r\n var mz = Normalize( [ this.pos[0]-this.target[0], this.pos[1]-this.target[1], this.pos[2]-this.target[2] ] );\r\n var mx = Normalize( Cross( this.up, mz ) );\r\n var my = Normalize( Cross( mz, mx ) );\r\n var tx = Dot( mx, this.pos );\r\n var ty = Dot( my, this.pos );\r\n var tz = Dot( [-mz[0], -mz[1], -mz[2]], this.pos ); \r\n var m = IdentityMat44();\r\n m[0] = mx[0]; m[1] = my[0]; m[2] = mz[0]; m[3] = 0;\r\n m[4] = mx[1]; m[5] = my[1]; m[6] = mz[1]; m[7] = 0;\r\n m[8] = mx[2]; m[9] = my[2]; m[10] = mz[2]; m[11] = 0;\r\n m[12] = tx; m[13] = ty; m[14] = tz; m[15] = 1; \r\n return m;\r\n} \r\n\r\nvar ShaderProgram = {};\r\nShaderProgram.Create = function( shaderList ) {\r\n var shaderObjs = [];\r\n for ( var i_sh = 0; i_sh < shaderList.length; ++ i_sh ) {\r\n var shderObj = this.CompileShader( shaderList[i_sh].source, shaderList[i_sh].stage );\r\n if ( shderObj == 0 )\r\n return 0;\r\n shaderObjs.push( shderObj );\r\n }\r\n var progObj = this.LinkProgram( shaderObjs )\r\n if ( progObj != 0 ) {\r\n progObj.attribIndex = {};\r\n var noOfAttributes = gl.getProgramParameter( progObj, gl.ACTIVE_ATTRIBUTES );\r\n for ( var i_n = 0; i_n < noOfAttributes; ++ i_n ) {\r\n var name = gl.getActiveAttrib( progObj, i_n ).name;\r\n progObj.attribIndex[name] = gl.getAttribLocation( progObj, name );\r\n }\r\n progObj.unifomLocation = {};\r\n var noOfUniforms = gl.getProgramParameter( progObj, gl.ACTIVE_UNIFORMS );\r\n for ( var i_n = 0; i_n < noOfUniforms; ++ i_n ) {\r\n var name = gl.getActiveUniform( progObj, i_n ).name;\r\n progObj.unifomLocation[name] = gl.getUniformLocation( progObj, name );\r\n }\r\n }\r\n return progObj;\r\n}\r\nShaderProgram.AttributeIndex = function( progObj, name ) { return progObj.attribIndex[name]; } \r\nShaderProgram.UniformLocation = function( progObj, name ) { return progObj.unifomLocation[name]; } \r\nShaderProgram.Use = function( progObj ) { gl.useProgram( progObj ); } \r\nShaderProgram.SetUniformI1 = function( progObj, name, val ) { if(progObj.unifomLocation[name]) gl.uniform1i( progObj.unifomLocation[name], val ); }\r\nShaderProgram.SetUniformF1 = function( progObj, name, val ) { if(progObj.unifomLocation[name]) gl.uniform1f( progObj.unifomLocation[name], val ); }\r\nShaderProgram.SetUniformF2 = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform2fv( progObj.unifomLocation[name], arr ); }\r\nShaderProgram.SetUniformF3 = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform3fv( progObj.unifomLocation[name], arr ); }\r\nShaderProgram.SetUniformF4 = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform4fv( progObj.unifomLocation[name], arr ); }\r\nShaderProgram.SetUniformM33 = function( progObj, name, mat ) { if(progObj.unifomLocation[name]) gl.uniformMatrix3fv( progObj.unifomLocation[name], false, mat ); }\r\nShaderProgram.SetUniformM44 = function( progObj, name, mat ) { if(progObj.unifomLocation[name]) gl.uniformMatrix4fv( progObj.unifomLocation[name], false, mat ); }\r\nShaderProgram.CompileShader = function( source, shaderStage ) {\r\n var shaderScript = document.getElementById(source);\r\n if (shaderScript)\r\n source = shaderScript.text;\r\n var shaderObj = gl.createShader( shaderStage );\r\n gl.shaderSource( shaderObj, source );\r\n gl.compileShader( shaderObj );\r\n var status = gl.getShaderParameter( shaderObj, gl.COMPILE_STATUS );\r\n if ( !status ) alert(gl.getShaderInfoLog(shaderObj));\r\n return status ? shaderObj : null;\r\n} \r\nShaderProgram.LinkProgram = function( shaderObjs ) {\r\n var prog = gl.createProgram();\r\n for ( var i_sh = 0; i_sh < shaderObjs.length; ++ i_sh )\r\n gl.attachShader( prog, shaderObjs[i_sh] );\r\n gl.linkProgram( prog );\r\n status = gl.getProgramParameter( prog, gl.LINK_STATUS );\r\n if ( !status ) alert("Could not initialise shaders");\r\n gl.useProgram( null );\r\n return status ? prog : null;\r\n}\r\n\r\nvar VertexBuffer = {};\r\nVertexBuffer.Create = function( attributes, indices ) {\r\n var buffer = {};\r\n buffer.buf = [];\r\n buffer.attr = []\r\n for ( var i = 0; i < attributes.length; ++ i ) {\r\n buffer.buf.push( gl.createBuffer() );\r\n buffer.attr.push( { size : attributes[i].attrSize, loc : attributes[i].attrLoc } );\r\n gl.bindBuffer( gl.ARRAY_BUFFER, buffer.buf[i] );\r\n gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( attributes[i].data ), gl.STATIC_DRAW );\r\n }\r\n buffer.inx = gl.createBuffer();\r\n gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, buffer.inx );\r\n gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( indices ), gl.STATIC_DRAW );\r\n buffer.inxLen = indices.length;\r\n gl.bindBuffer( gl.ARRAY_BUFFER, null );\r\n gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null );\r\n return buffer;\r\n}\r\nVertexBuffer.Draw = function( bufObj ) {\r\n for ( var i = 0; i < bufObj.buf.length; ++ i ) {\r\n gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.buf[i] );\r\n gl.vertexAttribPointer( bufObj.attr[i].loc, bufObj.attr[i].size, gl.FLOAT, false, 0, 0 );\r\n gl.enableVertexAttribArray( bufObj.attr[i].loc );\r\n }\r\n gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );\r\n gl.drawElements( gl.TRIANGLES, bufObj.inxLen, gl.UNSIGNED_SHORT, 0 );\r\n for ( var i = 0; i < bufObj.buf.length; ++ i )\r\n gl.disableVertexAttribArray( bufObj.attr[i].loc );\r\n gl.bindBuffer( gl.ARRAY_BUFFER, null );\r\n gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null );\r\n}\r\n\r\ninitScene();\r\n\r\n})();<script id="gouraud-shader-vs" type="x-shader/x-vertex">\r\n precision mediump float;\r\n \r\n attribute vec3 inPos;\r\n attribute vec3 inNV;\r\n attribute vec3 inCol;\r\n \r\n varying vec3 vertPos;\r\n varying vec3 vertNV;\r\n varying vec3 vertCol;\r\n \r\n uniform mat4 u_projectionMat44;\r\n uniform mat4 u_viewMat44;\r\n uniform mat4 u_modelMat44;\r\n\r\n struct TLightSource\r\n {\r\n vec3 lightPos;\r\n vec3 ambient;\r\n vec3 diffuse;\r\n vec3 specular;\r\n float shininess;\r\n };\r\n\r\n uniform TLightSource u_lightSource;\r\n \r\n vec3 Light( vec3 eyeV, vec3 N, vec3 P )\r\n {\r\n vec3 lightCol = u_lightSource.ambient;\r\n vec3 L = normalize( u_lightSource.lightPos-P );\r\n float NdotL = max( 0.0, dot( N, L ) );\r\n lightCol += NdotL * u_lightSource.diffuse;\r\n vec3 H = normalize( eyeV + L );\r\n float NdotH = max( 0.0, dot( N, H ) );\r\n float kSpecular = ( u_lightSource.shininess + 2.0 ) * pow( NdotH, u_lightSource.shininess ) / ( 2.0 * 3.14159265 );\r\n lightCol += kSpecular * u_lightSource.specular;\r\n return lightCol; \r\n }\r\n \r\n void main()\r\n {\r\n vec3 modelNV = mat3( u_modelMat44 ) * normalize( inNV );\r\n vertNV = mat3( u_viewMat44 ) * modelNV;\r\n vec4 modelPos = u_modelMat44 * vec4( inPos, 1.0 );\r\n vec4 viewPos = u_viewMat44 * modelPos;\r\n vertPos = viewPos.xyz / viewPos.w;\r\n vec3 eyeV = normalize( -vertPos );\r\n vec3 normalV = normalize( vertNV ) * sign(vertNV.z);\r\n vertCol = inCol * Light( eyeV, normalV, vertPos );\r\n gl_Position = u_projectionMat44 * viewPos;\r\n }\r\n </script>\r\n \r\n <script id="gouraud-shader-fs" type="x-shader/x-fragment">\r\n precision mediump float;\r\n \r\n varying vec3 vertPos;\r\n varying vec3 vertNV;\r\n varying vec3 vertCol;\r\n \r\n void main()\r\n {\r\n gl_FragColor = vec4( vertCol, 1.0 );\r\n }\r\n </script>\r\n\r\n<script id="phong-shader-vs" type="x-shader/x-vertex">\r\nprecision mediump float;\r\n\r\nattribute vec3 inPos;\r\nattribute vec3 inNV;\r\nattribute vec3 inCol;\r\n\r\nvarying vec3 vertPos;\r\nvarying vec3 vertNV;\r\nvarying vec3 vertCol;\r\n\r\nuniform mat4 u_projectionMat44;\r\nuniform mat4 u_viewMat44;\r\nuniform mat4 u_modelMat44;\r\n\r\nvoid main()\r\n{\r\n vec3 modelNV = mat3( u_modelMat44 ) * normalize( inNV );\r\n vertNV = mat3( u_viewMat44 ) * modelNV;\r\n vertCol = inCol;\r\n vec4 modelPos = u_modelMat44 * vec4( inPos, 1.0 );\r\n vec4 viewPos = u_viewMat44 * modelPos;\r\n vertPos = viewPos.xyz / viewPos.w;\r\n gl_Position = u_projectionMat44 * viewPos;\r\n}\r\n</script>\r\n\r\n<script id="phong-shader-fs" type="x-shader/x-fragment">\r\nprecision mediump float;\r\n\r\nvarying vec3 vertPos;\r\nvarying vec3 vertNV;\r\nvarying vec3 vertCol;\r\n\r\nstruct TLightSource\r\n{\r\n vec3 lightPos;\r\n vec3 ambient;\r\n vec3 diffuse;\r\n vec3 specular;\r\n float shininess;\r\n};\r\n\r\nuniform TLightSource u_lightSource;\r\n\r\nvec3 Light( vec3 eyeV, vec3 N, vec3 P )\r\n{\r\n vec3 lightCol = u_lightSource.ambient;\r\n vec3 L = normalize( u_lightSource.lightPos - P );\r\n float NdotL = max( 0.0, dot( N, L ) );\r\n lightCol += NdotL * u_lightSource.diffuse;\r\n vec3 H = normalize( eyeV + L );\r\n float NdotH = max( 0.0, dot( N, H ) );\r\n float kSpecular = ( u_lightSource.shininess + 2.0 ) * pow( NdotH, u_lightSource.shininess ) / ( 2.0 * 3.14159265 );\r\n lightCol += kSpecular * u_lightSource.specular;\r\n return lightCol; \r\n}\r\n\r\nvoid main()\r\n{\r\n vec3 eyeV = normalize( -vertPos );\r\n vec3 normalV = normalize( vertNV ) * sign(vertNV.z);\r\n vec3 color = vertCol * Light( eyeV, normalV, vertPos );\r\n gl_FragColor = vec4( color, 1.0 );\r\n}\r\n</script>\r\n\r\n<form id="gui" name="inputs"><table><tr>\r\n <td><font color= #CCF>Shading:</font></td> \r\n <td><select id="shading">>\r\n <option value="0">Gouraud</option>\r\n <option value="1">Phong</option>\r\n </select></td>\r\n </tr><tr>\r\n <td><font color= #CCF>Shininess:</font></td>\r\n <td><input type="range" id="shininess" min="0" max="100" value="10"/></td>\r\n</tr></table></form>\r\n<canv
| 归档时间： |
|
| 查看次数： |
2257 次 |
| 最近记录： |