OpenGL_JS-Phongmaterials

OpenGL_JS-Phongmaterials

  • lamp vertex shader
export let vs_lamp = `#version 300 es layout (location = 0) in vec3 aPos; uniform mat4 model; uniform mat4 view; uniform mat4 projection; void main() { gl_Position = projection * view * model * vec4(aPos, 1.0); }` Copy code
  • lamp fragment shader
export let fs_lamp = `#version 300 es precision mediump float; out vec4 FragColor; void main() { FragColor = vec4(1.0);//set alle 4 vector values to 1.0 }` Copy code
  • material vertex shader (lighting model)
export let vs_materials = `#version 300 es layout (location = 0) in vec3 aPos; layout (location = 1) in vec3 aNormal; out vec3 FragPos; out vec3 Normal; uniform mat4 model; uniform mat4 view; uniform mat4 projection; void main() { FragPos = vec3(model * vec4(aPos, 1.0));//Model matrix *apos is the coordinates in world space Normal = mat3(transpose(inverse(model))) * aNormal; gl_Position = projection * view * vec4(FragPos, 1.0); }` Copy code
  • material fragment shader (lighting model)
export let fs_materials = `#version 300 es precision mediump float; out vec4 FragColor; struct Material { vec3 ambient; vec3 diffuse; vec3 specular; float shininess; }; struct Light { vec3 position; vec3 ambient; vec3 diffuse; vec3 specular; }; in vec3 FragPos; in vec3 Normal; uniform vec3 viewPos; uniform Material material; uniform Light light; void main() { //ambient vec3 ambient = light.ambient * material.ambient; //diffuse vec3 norm = normalize(Normal); vec3 lightDir = normalize(light.position-FragPos);//light is also the coordinate in world space float diff = max(dot(norm, lightDir), 0.0); vec3 diffuse = light.diffuse * (diff * material.diffuse); //specular vec3 viewDir = normalize(viewPos-FragPos);//viewPos is also the coordinates in world space vec3 reflectDir = reflect(-lightDir, norm); float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess); vec3 specular = light.specular * (spec * material.specular); vec3 result = ambient + diffuse + specular; FragColor = vec4(result, 1.0); }` Copy code
  • Two models lamp and lighting
lightingShader = new Shader(gl, vs_materials, fs_materials); = lampShader new new Shader (GL, vs_lamp, fs_lamp); duplicated code
  • createVertexArray bindVertexArray
  • createBuffer bindBuffer bufferData vertexAttribPointer enableVertexAttribArray
gl.enable(gl.DEPTH_TEST); let vertices = new Float32Array ([ - 0.5 , - 0.5 , - 0.5 , 0.0 , 0.0 , - 1.0 , 0.5 , - 0.5 , - 0.5 , 0.0 , 0.0 , - 1.0 , 0.5 , 0.5 , - 0.5 , 0.0 , 0.0 , - 1.0 , 0.5 , 0.5 , - 0.5 , 0.0 , 0.0 , -1.0 , - 0.5 , 0.5 , - 0.5 , 0.0 , 0.0 , - 1.0 , - 0.5 , - 0.5 , - 0.5 , 0.0 , 0.0 , - 1.0 , - 0.5 , - 0.5 , 0.5 , 0.0 , 0.0 , 1.0 , 0.5 , - 0.5 , 0.5 , 0.0 , 0.0 , 1.0 , 0.5 , 0.5 , 0.5 , 0.0 , 0.0 , 1.0 , 0.5 , 0.5 , 0.5 , 0.0 , 0.0 , 1.0 , - 0.5 , 0.5 , 0.5 , 0.0 , 0.0 , 1.0 , - 0.5 , - 0.5 , 0.5 , 0.0 , 0.0 , 1.0 , - 0.5 , 0.5 , 0.5 , - 1.0 , 0.0 , 0.0 , - 0.5 , 0.5 , - 0.5 , - 1.0 , 0.0 , 0.0 , - 0.5 , - 0.5 , - 0.5 , - 1.0 , 0.0 , 0.0 , - 0.5 , - 0.5 , - 0.5 , - 1.0 , 0.0 , 0.0 , - 0.5 , - 0.5 , 0.5 , - 1.0 , 0.0 , 0.0 , - 0.5 , 0.5 , 0.5 , - 1.0 , 0.0 , 0.0 , 0.5 , 0.5 , 0.5 , 1.0 , 0.0 , 0.0 , 0.5 , 0.5 , - 0.5 , 1.0 , 0.0 , 0.0 , 0.5 , - 0.5 , - 0.5 , 1.0 , 0.0 , 0.0 , 0.5 ,- -0.5, -0.5 , 1.0 , 0.0 , 0.0 , 0.5 , -0.5 , 0.5 , 1.0 , 0.0 , 0.0 , 0.5 , 0.5 , 0.5 , 1.0 , 0.0 , 0.0 , - 0.5 , - 0.5 , - 0.5 , 0.0 , - 1.0 , 0.0 , 0.5 , - 0.5 , - 0.5 , 0.0 , - 1.0 , 0.0 , 0.5 , - 0.5 , 0.5 , 0.0 , - 1.0 , 0.0 , 0.5 , - 0.5 , 0.5 , 0.0 , -1.0 , 0.0 , - 0.5 , - 0.5 , 0.5 , 0.0 , - 1.0 , 0.0 , - 0.5 , - 0.5 , - 0.5 , 0.0 , - 1.0 , 0.0 , - 0.5 , 0.5 , - 0.5 , 0.0 , 1.0 , 0.0 , 0.5 , 0.5 , - 0.5 , 0.0 , 1.0 , 0.0 , 0.5 , 0.5 , 0.5 , 0.0 , 1.0 , 0.0 , 0.5 , 0.5 , 0.5 , 0.0 , 1.0 , 0.0 , - 0.5 , 0.5 , 0.5 , 0.0 , 1.0 , 0.0 , - 0.5 , 0.5 , - 0.5 , 0.0 , 1.0 , 0.0 ]); cubeVAO = gl.createVertexArray(); let VBO = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, VBO); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); gl.bindVertexArray(cubeVAO); gl.vertexAttribPointer( 0 , 3 , gl.FLOAT, false , 6 * sizeFloat, 0 ); gl.enableVertexAttribArray( 0 ); gl.vertexAttribPointer( 1 , 3 , gl.FLOAT, false , 6 * sizeFloat, ( 3 * sizeFloat)); gl.enableVertexAttribArray( 1 ); //----------------------------------------- - gl.createVertexArray(); gl.bindVertexArray(lightVAO); gl.bindBuffer(gl.ARRAY_BUFFER, VBO); gl.vertexAttribPointer( 0 , 3 , gl.FLOAT, false , 6 * sizeFloat, 0 ); gl.enableVertexAttribArray( 0 ); requestAnimationFrame(render); Copy code
  • drawCall lighting
let currentFrame = performance.now()/1000 ; deltaTime = (currentFrame-lastFrame) * 1000 ; lastFrame = currentFrame; processInput(); gl.clearColor( 0.1 , 0.1 , 0.1 , 1.0 ); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //-------------------------------------- let lightPos = vec3.fromValues( 0.5 , 0.7 , 2.0 ); camera = new Camera(vec3.fromValues( 0.0 , 0.0 , 3.0 ), vec3.fromValues( 0.0 , 1.0 , 0.0 )); lightingShader.use(gl); setVec3vShader(lightingShader, "light.position" , lightPos); setVec3vShader(lightingShader, "viewPos" , camera.Position); let lightColor = vec3.create(); lightColor[ 0 ] = Math .sin(currentFrame * 2.0 ); lightColor[ 1 ] = Math .sin(currentFrame * 0.7 ); lightColor[ 2 ] = Math .sin(currentFrame * 1.3 ); let diffuseColor = componentProduct3(lightColor, vec3.fromValues( 0.5 , 0.5 , 0.5 )); let ambientColor = componentProduct3(diffuseColor, vec3.fromValues( 0.2 , 0.2 , 0.2 ) ); setVec3vShader(lightingShader, "light.ambient" , ambientColor); setVec3vShader(lightingShader, "light.diffuse" , diffuseColor); lightingShader.setFloat3(gl, "light.specular" , 1.0 , 1.0 , 1.0 ); lightingShader.setFloat3(gl, "material.ambient" , 1.0 , 0.5 , 0.31 ); lightingShader.setFloat3(gl, "material.diffuse" , 1.0 , 0.5 , 0.31 ); lightingShader.setFloat3(gl, "material.specular" , 0.5 , 0.5 , 0.5 ); lightingShader.setFloat(gl, "material.shininess" , 32.0 ); let projection = mat4.create(); mat4.perspective(projection, (camera.Zoom) * Math .PI/180 , canvas.width/canvas.height, 0.1 , 100.0 ); let view = camera.GetViewMatrix(); setMat4vShader(lightingShader, "projection" , projection); setMat4vShader(lightingShader, "view" , view); let model = mat4.create(); setMat4vShader(lightingShader, "model" , model); gl.bindVertexArray(cubeVAO); gl.drawArrays (gl.TRIANGLES, 0 , 36 ); duplicated code
  • drawCall lampShader
lampShader.use(gl); setMat4vShader(lampShader, "projection" , projection); setMat4vShader(lampShader, "view" , view); model = mat4.create(); model = mat4.translate(model, model, lightPos); model = mat4.scale(model, model, vec3.fromValues( 0.2 , 0.2 , 0.2 )); setMat4vShader(lampShader, "model" , model); gl.bindVertexArray(lightVAO); gl.drawArrays(gl.TRIANGLES, 0 , 36 ); requestAnimationFrame(render); Copy code
function setVec3vShader ( shader, uniformName, value ) { gl.uniform3fv(gl.getUniformLocation(shader.programId, uniformName), value); } function setMat4vShader ( shader, uniformName, value ) { gl.uniformMatrix4fv(gl.getUniformLocation(shader.programId, uniformName), false , value); } function componentProduct3 ( a, b ) { return vec3.fromValues(a[ 0 ] * b[ 0 ], a[ 1 ] * b[ 1 ], a[ 2 ] * b[ 2 ]); } //# sourceMappingURL = materials.js.map copy the code