ARTICLE AD BOX
I have an application modified from a code base that was given to me. I currently have 4 brick walls and a cube that moves back and forth in the "room". The cube should be emitting point light but I cannot perceive it at all. I also believe there should be directional light but I cannot see that either, which leads me to believe it is an overall problem with something in the rendering process.
<!DOCTYPE html> <head> <title>WebGL Class</title> </head> <script src="WebGL.js"></script> <script src="Functions.js"></script> <script src="Classes.js"></script> <script src="Objects.js"></script> <body> <canvas id="example" tabindex="0" width="640" height="480" style="border:5px solid black;"></canvas> <script id="vertex-shader" type="x-shader/x-vertex"> #version 300 es // GLSL ES 3.00 in vec3 coordinates; // Vertex position in vec2 textureCoordinates; // Texture coordinates in vec3 normal; // Vertex normal in vec3 tangent; // Vertex tangent in vec3 bitangent; // Vertex bitangent out vec2 vtextureCoordinates; // Texture coordinates out out vec3 vCubeMapCoordinates; // Cubemap coordinates out out vec3 vWorldPosition; // World position out out vec3 vWorldNormal; // World normal out out vec3 vWorldTangent; // World tangent out out vec3 vWorldBitangent; // World bitangent out uniform mat4 uScale; // Scale matrix uniform uniform mat4 uTranslate; // Translate matrix uniform uniform mat4 uXRotate; // X rotation matrix uniform uniform mat4 uYRotate; // Y rotation matrix uniform uniform mat4 uZRotate; // Z rotation matrix uniform uniform mat4 uP_Matrix; // Projection matrix uniform uniform mat4 uView_matrix; // View matrix uniform void main(){ vtextureCoordinates = textureCoordinates; // Pass texture coordinates vCubeMapCoordinates = coordinates; // Pass cubemap coordinates mat4 uRotate = uZRotate * uYRotate * uXRotate; // Combined rotation matrix mat4 modelMatrix = uTranslate * uRotate * uScale; // Model matrix vec4 worldPosition = modelMatrix * vec4(coordinates, 1.0); // World position vWorldPosition = worldPosition.xyz; // Store world position vWorldNormal = mat3(uRotate) * normal; // Store world normal vWorldTangent = mat3(uRotate) * tangent; // Store world tangent vWorldBitangent = mat3(uRotate) * bitangent; // Store world bitangent mat4 VPMatrix = uP_Matrix * uView_matrix; // View projection matrix mat4 MVPMatrix = VPMatrix * modelMatrix; // Model view projection matrix gl_Position = MVPMatrix * vec4(coordinates, 1.0); // Final Clip-space position } </script> <script id="fragment-shader" type="x-shader/x-fragment"> #version 300 es // GLSL ES 3.00 precision mediump float; // Float precision in vec2 vtextureCoordinates; // Texture coordinates in in vec3 vCubeMapCoordinates; // Cubemap coordinates in in vec3 vWorldPosition; // World position in in vec3 vWorldNormal; // World normal in in vec3 vWorldTangent; // World tangent in in vec3 vWorldBitangent; // World bitangent in uniform sampler2D uTexture; // 2D texture sampler uniform samplerCube uCubeMap; // Cubemap sampler uniform sampler2D uNormalMap; // Tangent-space normal map sampler uniform bool uUseSkybox; // Skybox toggle uniform bool uUseReflectionMap; // Reflection toggle uniform bool uUseBlendMap; // Blend toggle uniform float uBlendFactor; // Blend factor uniform float uBumpStrength; // Normal-map intensity uniform vec3 uCameraPosition; // Camera position const int MAX_LIGHTS = 4; uniform int uLightCount; uniform vec4 LightPos[MAX_LIGHTS]; // Light positions/directions uniform vec4 ambientLight[MAX_LIGHTS]; // Ambient light uniform vec4 diffuseLight[MAX_LIGHTS]; // Diffuse light uniform vec4 specularLight[MAX_LIGHTS]; // Specular light uniform vec4 ambientMat; // Ambient Material uniform vec4 diffuseMat; // Diffuse Material uniform vec4 specularMat; // Specular Material uniform float shininess; // Shininess Coefficient out vec4 FragColor; // Fragment color out vec3 getMappedNormal(){ // Convert tangent-space normal map data into a world-space normal vec3 baseNormal = normalize(vWorldNormal); // Normalize the interpolated mesh normal vec3 tangent = vWorldTangent - baseNormal * dot(baseNormal, vWorldTangent); // Re-orthogonalize the tangent against the normal vec3 bitangent = vWorldBitangent - baseNormal * dot(baseNormal, vWorldBitangent); // Re-orthogonalize the bitangent against the normal if(length(tangent) < 0.0001 || length(bitangent) < 0.0001) { return baseNormal; // Fall back to the mesh normal if the UV derivatives are degenerate } tangent = normalize(tangent); // Normalize the tangent vector bitangent = normalize(bitangent); // Normalize the bitangent vector vec3 sampledNormal = texture(uNormalMap, vtextureCoordinates).rgb * 2.0 - 1.0; // Convert the normal map from [0,1] into [-1,1] sampledNormal = normalize(vec3(sampledNormal.xy * uBumpStrength, sampledNormal.z)); // Scale the tangent-space x/y perturbation mat3 TBN = mat3(tangent, bitangent, baseNormal); // Build the tangent-to-world transform return normalize(TBN * sampledNormal); // Transform the tangent-space normal into world space } void main(){ if(uUseSkybox) { FragColor = texture(uCubeMap, normalize(vCubeMapCoordinates)); // Skybox/CubeMap } else { vec3 surfaceNormal = getMappedNormal(); // Build the normal-mapped normal once per fragment vec3 viewDirection = normalize(uCameraPosition - vWorldPosition); // Direction from the fragment to the camera vec4 ambientAccum = vec4(0.0); vec4 diffuseAccum = vec4(0.0); vec4 specularAccum = vec4(0.0); for (int i = 0; i < MAX_LIGHTS; ++i) { if (i >= uLightCount) { break; } vec3 lightDirection; float attenuation = 1.0; if (LightPos[i].w == 0.0) { lightDirection = normalize(LightPos[i].xyz); } else { vec3 lightVector = LightPos[i].xyz - vWorldPosition; float lightDistance = length(lightVector); lightDirection = normalize(lightVector); attenuation = 1.0 / (1.0 + 0.09 * lightDistance + 0.032 * lightDistance * lightDistance); } vec4 ambientProduct = ambientLight[i] * ambientMat; vec4 diffuseProduct = diffuseLight[i] * diffuseMat; vec4 specularProduct = specularLight[i] * specularMat; float Kd = max(dot(surfaceNormal, lightDirection), 0.0); // Diffuse term from the current light vec4 diffuse = Kd * attenuation * diffuseProduct; vec3 viewHalfVector = normalize(lightDirection + viewDirection); // Blinn halfway vector float Ks = pow(max(dot(surfaceNormal, viewHalfVector), 0.0), shininess); // Specular highlight vec4 specular = Ks * attenuation * specularProduct; if (dot(surfaceNormal, lightDirection) < 0.0) { specular = vec4(0.0, 0.0, 0.0, 1.0); } ambientAccum += ambientProduct; diffuseAccum += diffuse; specularAccum += specular; } vec3 ambientDiffuseColor = clamp((ambientAccum + diffuseAccum).rgb, 0.0, 1.0); vec3 specularColor = clamp(specularAccum.rgb, 0.0, 1.0); if(uUseReflectionMap) { vec3 incidentDirection = -viewDirection; // Incident direction vec3 reflectionDirection = reflect(incidentDirection, surfaceNormal); // Reflection direction vec4 reflectionColor = texture(uCubeMap, reflectionDirection); // Sample the reflected cubemap color FragColor = vec4(reflectionColor.rgb * (0.65 + 0.35 * ambientDiffuseColor) + specularColor, reflectionColor.a); // Shade the reflection with ambient/diffuse light and add the specular highlight } else if(uUseBlendMap) { vec3 incidentDirection = -viewDirection; // Incident direction vec3 reflectionDirection = reflect(incidentDirection, surfaceNormal); // Reflection direction vec4 baseTextureColor = texture(uTexture, vtextureCoordinates); // Base texture color vec4 bumpedBaseColor = vec4(baseTextureColor.rgb * ambientDiffuseColor + specularColor, baseTextureColor.a); // Shade the base texture and add the specular highlight on top vec4 reflectionColor = texture(uCubeMap, reflectionDirection); // Calculate Reflection color FragColor = mix(bumpedBaseColor, reflectionColor, uBlendFactor); // Blend the bumped base color with the reflection } else { vec4 baseTextureColor = texture(uTexture, vtextureCoordinates); // Base texture color FragColor = vec4(baseTextureColor.rgb * ambientDiffuseColor + specularColor, baseTextureColor.a); // Shade the base texture and add the specular highlight on top } } } </script> <script> // Get the canvas element from the HTML document var canvas = document.getElementById("example"); // Create a WebGL2 rendering context from the canvas var gl= canvas.getContext('webgl2'); // Instantiate the WebGL helper class var myWebGL= new WebGL(); var MainCamera = new Camera(); var MainLight= new Light(); var RedLight = new Light(); var Lights = [MainLight, RedLight]; MainCamera.position=[0.0,0.0,4.8]; MainLight.lightPosition = [0.3, -1.0, 0.2, 0.0]; //0 infinite, 1 finite MainLight.lightAmbient = [0.05, 0.05, 0.05, 1.0]; MainLight.lightDiffuse = [1.0, 1.0, 1.0, 1.0]; MainLight.lightSpecular = [1.0, 1.0, 1.0, 1.0]; RedLight.lightPosition = [0.0, 0.0, 0.0, 1.0]; RedLight.lightAmbient = [0.05, 0.05, 0.02, 1.0]; RedLight.lightDiffuse = [1.0, 0.2, 0.1, 1.0]; RedLight.lightSpecular = [1.0, 0.5, 0.3, 1.0]; // Normal map generator: https://cpetry.github.io/NormalMap-Online/ var SceneCubeMapTexture = CreateCubeMap(cubeMapFaceSources); //create the cubemap var BrickTexture = CreateImageTexture("Textures/brick.png", gl.REPEAT, gl.LINEAR_MIPMAP_LINEAR, gl.LINEAR); var BrickNormal = CreateImageTexture("Textures/brick_normal.png", gl.REPEAT, gl.LINEAR_MIPMAP_LINEAR, gl.LINEAR); //Objects var Floor = new ReflectiveShape(cubeVertices, cubeIndices, cubeTextureCoordinates,cubeNormals); var BackWall = new ReflectiveShape(cubeVertices, cubeIndices, cubeTextureCoordinates, cubeNormals, BrickTexture, BrickNormal); var LeftWall = new ReflectiveShape(cubeVertices, cubeIndices, cubeTextureCoordinates, cubeNormals, BrickTexture, BrickNormal); var RightWall = new ReflectiveShape(cubeVertices, cubeIndices, cubeTextureCoordinates, cubeNormals, BrickTexture, BrickNormal); var FrontWall = new ReflectiveShape(cubeVertices, cubeIndices, cubeTextureCoordinates, cubeNormals, BrickTexture, BrickNormal); var SceneSkybox = new Skybox(cubeVertices, cubeIndices, cubeTextureCoordinates, SceneCubeMapTexture); //Use the cubemap to create a skybox var Lamp = new ReflectiveShape(cubeVertices, cubeIndices, cubeTextureCoordinates, cubeNormals, null, null); Floor.size = [20, 0.2, 20]; Floor.position = [0, -0.75, 0]; BackWall.size = [20, 4, 0.2]; BackWall.position = [0, 0, -3.5]; BackWall.blendFactor=0.0; LeftWall.size = [0.2, 4, 20]; LeftWall.position = [-3.5, 0, 0]; LeftWall.blendFactor=0.0; RightWall.size = [0.2, 4, 20]; RightWall.position = [3.5, 0, 0]; RightWall.blendFactor=0.0; FrontWall.size = [20, 4, 0.2]; FrontWall.position = [0, 0, 3.5]; FrontWall.blendFactor=0.0; Lamp.position = [0, 0, 0]; Lamp.size = [0.2, 0.2, 0.2]; var lampDirection = 1; setPerspective(myWebGL); function animate(){ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); MainCamera.render(); MainLight.lightPosition[0] = MainCamera.position[0]; MainLight.lightPosition[1] = MainCamera.position[1]; MainLight.lightPosition[2] = MainCamera.position[2]; if (Lamp.position[0] > 3.0) { lampDirection = -1; } else if (Lamp.position[0] < -3.0) { lampDirection = 1; } Lamp.position[0] += 0.01 * lampDirection; RedLight.lightPosition[0] = Lamp.position[0]; RedLight.lightPosition[1] = Lamp.position[1]; RedLight.lightPosition[2] = Lamp.position[2]; for (var i = 0; i < Lights.length; i++) { Lights[i].render(i, Lights.length); } SceneSkybox.render(MainCamera); Floor.render(); FrontWall.render(); BackWall.render(); LeftWall.render(); RightWall.render(); Lamp.render(); window.requestAnimationFrame(animate); } animate(); </script> </body> </html>