const vsTextureLight=` attribute highp vec4 aVertexNormal; attribute highp vec4 aVertexPosition; attribute highp vec2 aTextureCoord; uniform highp mat4 uNormalMatrix; uniform highp mat4 uModelViewMatrix; uniform highp mat4 uProjectionMatrix; uniform highp vec3 pointLightColor; uniform highp vec3 pointLightPosition; uniform highp vec3 ambientLight; uniform highp vec3 directionalLightColor; uniform highp vec3 directionalVector; varying highp vec2 vTextureCoord; varying highp vec3 vLighting; void main(void){ vec4 vertexPosition = uModelViewMatrix * aVertexPosition; gl_Position = uProjectionMatrix * vertexPosition; vTextureCoord = aTextureCoord; highp vec4 transformedNormal = uNormalMatrix * aVertexNormal; highp float directionalLightIntensity = max(dot(transformedNormal.xyz, directionalVector),0.0); highp vec3 pointLightToVertex = pointLightPosition - vertexPosition.xyz; highp vec3 pointLightDirection = normalize(pointLightToVertex); float distanceLightToVertex = abs(sqrt(pointLightToVertex.x*pointLightToVertex.x+pointLightToVertex.y*pointLightToVertex.y+pointLightToVertex.z*pointLightToVertex.z)); highp float pointLightIntensity = max(dot(transformedNormal.xyz, pointLightDirection),0.0)/pow(distanceLightToVertex,2.0); vLighting = ambientLight + (directionalLightColor * directionalLightIntensity) + (pointLightColor * pointLightIntensity); }` const setupLighting = (ec) => { //ambient light ec.ambientColor=[0.15,0.15,0] //directional light ec.directionalColor=[0,0,0] ec.directionalVector=[0,0,0] //pointLightPosition ec.pointLightPosition = [0,0,0] ec.pointLightColor = [8,8,8] } const setupTexture = (ec) => { const textureURL= "https://upload.wikimedia.org/wikipedia/commons/7/71/Ardabil_Carpet.jpg" ec.loadTexture(textureURL) const textureURL2 = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Book_shelves_UWI_Library.jpg/1024px-Book_shelves_UWI_Library.jpg" ec.loadTexture(textureURL2) const textureURL3 = "https://upload.wikimedia.org/wikipedia/commons/6/66/Interieur_begane_grond%2C_linker_voorkamer%2C_stucplafond_met_stucornament_-_Baarn_-_20338549_-_RCE.jpg" ec.loadTexture(textureURL3) } const setupWorld = (ec) => { mat4.translate( ec.matrices.modelViewMatrix, ec.matrices.modelViewMatrix, [0,0,-8] ) mat4.invert( ec.matrices.normalMatrix, ec.matrices.modelViewMatrix ) mat4.transpose( ec.matrices.normalMatrix, ec.matrices.normalMatrix ) } const invertNormals = (shape) => { const {normals} = shape for(let i=0;i { const vertices = (()=>{ const verts = [] for(let j=-10;j<=10;j+=1/5){ for(let i=-10;i<=10;i+=1/5){ verts.push(i,0,j-1/5,1) verts.push(i,0,j,1) verts.push(i+1/5,0,j,1) verts.push(i+1/5,0,j,1) verts.push(i,0,j-1/5,1) verts.push(i+1/5,0,j-1/5,1) } } return verts })() const colors = vertices.map(v=>1.0) const textureCoordinates = (()=>{ const tcs = [] for(let i=0;i{ const norms = [] for(let i=0;i { const ec = new EpicCanvas(700,1000,"body") setupLighting(ec) setupWorld(ec) setupTexture(ec) const program = ec.initShaderProgram(vsColorLight,fsColorLight) const programInfo = getProgramInfo(ec.gl,program) const program2 = ec.initShaderProgram(vsTextureLight,fsTextureLight) const programInfo2 = getProgramInfo(ec.gl,program2) const lampshade = Cylinder(ec,5) invertNormals(lampshade) for(let i=0;i { ec.clearColor = [0.,0.,((ec.pointLightPosition[2]+8)+2)/16,1] ec.clearScreen() ec.ambientColor=[0.,0.,0.] drawShape(ec,programInfo,pole) rotateY(pole, -0.01) ec.reloadBufferData(pole) drawShape(ec,programInfo,poleBase) rotateY(poleBase, -0.01) ec.reloadBufferData(poleBase) ec.setTexture(ec.textures[0]) drawShape(ec, programInfo2, floor) ec.setTexture(ec.textures[2]) drawShape(ec,programInfo2,ceiling) ec.ambientColor=[-0.125,-0.125,-0.125] ec.setTexture(ec.textures[1]) drawShape(ec, programInfo2, backWall) drawShape(ec, programInfo2, leftWall) drawShape(ec, programInfo2, rightWall) ec.ambientColor=[-2.5,-2.5,-3.75] drawShape(ec,programInfo,lampshade) rotateY(lampshade, -0.01) ec.reloadBufferData(lampshade) angle += 0.01 ec.pointLightPosition = [Math.cos(angle)*2, -0.12, Math.sin(angle)*2-8] ec.fieldOfView = Math.PI / 3 + Math.sin(time/2000)/2 requestAnimationFrame(draw) } requestAnimationFrame(draw) }

EpicCanvas - lamp shade