From 4e9f6e24b62d60ba85dd67d57ed124d4452eb733 Mon Sep 17 00:00:00 2001 From: fdai7303 Date: Thu, 6 Jul 2023 09:36:12 +0200 Subject: [PATCH] fixed bug with wrong length calculation; finished exercise 06 --- src/05/vector.ts | 9 +++++---- src/06/phong.ts | 31 ++++++++++++++++++++++++++++++- src/06/raytracing.ts | 19 +++++++++++++++++++ src/06/setup-phong.ts | 4 +++- 4 files changed, 57 insertions(+), 6 deletions(-) diff --git a/src/05/vector.ts b/src/05/vector.ts index 4d20310..ad4cf45 100644 --- a/src/05/vector.ts +++ b/src/05/vector.ts @@ -237,10 +237,11 @@ export default class Vector { * @returns this vector for easier function chaining */ normalize(): Vector { - // TODO: Normalize this vector and return it - this.x = this.x/Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2)); - this.y = this.y/Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2)); - this.z = this.z/Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2)); + // TODO: Normalize this vector and return it# + var length = Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2)); + this.x = this.x/length; + this.y = this.y/length; + this.z = this.z/length; return this; } diff --git a/src/06/phong.ts b/src/06/phong.ts index 87361f2..2c99b79 100644 --- a/src/06/phong.ts +++ b/src/06/phong.ts @@ -31,5 +31,34 @@ export function phong( // TODO: point, and eye (camera) position. // TODO: Return complete phong emission using object color, ambient, // TODO: diffuse and specular terms. - return color; + + //ambient Lighting + var colorAmbient = color.mul(kA); + + //diffuse Lighting + var colorDiffuse = new Vector(0,0,0,0); + for(let i = 0; i < lightPositions.length; i++) { + colorDiffuse = colorDiffuse.add(lightColor.mul(Math.max(0, intersection.normal.dot(lightPositions[i].sub(intersection.point).normalize())))); + } + colorDiffuse = colorDiffuse.mul(kD); + + //specular Lighting + var colorSpecular = new Vector(0,0,0,0); + for(let i = 0; i < lightPositions.length; i++) { + + //reflektionsvektor + var l = lightPositions[i].sub(intersection.point).normalize(); + var n = intersection.normal; + var reflection = n.mul(n.dot(l)*2).sub(l); + + //spekulare berechnung + colorSpecular = + colorSpecular.add(lightColor.mul(Math.pow(Math.max(0, + reflection.dot(cameraPosition.sub(intersection.point).normalize()) + ),shininess))); + } + colorSpecular = colorSpecular.mul(kS); + + //result + return colorAmbient.add(colorDiffuse.add(colorSpecular)); } diff --git a/src/06/raytracing.ts b/src/06/raytracing.ts index 0c6040c..2becece 100644 --- a/src/06/raytracing.ts +++ b/src/06/raytracing.ts @@ -29,4 +29,23 @@ export function raytracePhong(data: Uint8ClampedArray, // TODO: Compute closest intersection with spheres in the scene. // TODO: Compute emission at point of intersection using phong model. // TODO: Set pixel color accordingly. + + var distance = Number.MAX_VALUE; + var light = Ray.makeRay(x, y, camera); + for(let i = 0; i < spheres.length; i++) { + let intersection = spheres[i].intersect(light); + if(intersection != null) { + if(distance > intersection.t) { + distance = intersection.t; + var posInArrayX = x * 4; + var posInArrayY = y * 4 * width; + var phongColor = phong(spheres[i].color, intersection, lightPositions, shininess, camera.origin); + data[0 + posInArrayX + posInArrayY] = phongColor.r*255; + data[1 + posInArrayX + posInArrayY] = phongColor.g*255; + data[2 + posInArrayX + posInArrayY] = phongColor.b*255; + data[3 + posInArrayX + posInArrayY] = 255; + + } + } + } } diff --git a/src/06/setup-phong.ts b/src/06/setup-phong.ts index d07dc8a..765837f 100644 --- a/src/06/setup-phong.ts +++ b/src/06/setup-phong.ts @@ -41,11 +41,13 @@ window.addEventListener('load', () => { raytracePhong(data, camera, spheres, lightPositions, shininess, x, y, canvas.width, canvas.height); // update pixel in HTML context2d - for (let i = 0; i < 4; i ++) + /*for (let i = 0; i < 4; i ++) pixel.data[i] = data[(x + y * canvas.width) * 4 + i]; ctx.putImageData(pixel, x, y); + */ } } + ctx.putImageData(imageData, 0, 0); } const shininessElement =