From 02d6f00b8e7954a9b238242c4042bcdc33f3e692 Mon Sep 17 00:00:00 2001 From: AryanKoundal Date: Sat, 14 Oct 2023 10:05:57 +0530 Subject: [PATCH] added code for specular light --- src/webgl/p5.RendererGL.js | 33 ++++++++++++++++++- ...mageLight.frag => imageLightDiffused.frag} | 0 src/webgl/shaders/lighting.glsl | 17 ++++++++-- 3 files changed, 47 insertions(+), 3 deletions(-) rename src/webgl/shaders/{imageLight.frag => imageLightDiffused.frag} (100%) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 317e679d25..91d72d0f33 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -76,7 +76,7 @@ const defaultShaders = { pointVert: readFileSync(join(__dirname, '/shaders/point.vert'), 'utf-8'), pointFrag: readFileSync(join(__dirname, '/shaders/point.frag'), 'utf-8'), imageLightVert : readFileSync(join(__dirname, '/shaders/imageLight.vert'), 'utf-8'), - imageLightFrag : readFileSync(join(__dirname, '/shaders/imageLight.frag'), 'utf-8'), + imageLightFrag : readFileSync(join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8'), imageLightSpecularFrag : readFileSync(join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8') }; for (const key in defaultShaders) { @@ -1926,7 +1926,30 @@ p5.RendererGL = class RendererGL extends p5.Renderer { return newGraphic; } + getSpecularTexture(){ + // check if already exits (there are tex of diff resolution so which one to check) + // currently doing the whole array + if(this.specularTextures.length !== 0){ + return this.specularTextures; + } + const graphic = createGraphics(size, size, WEBGL); + let count = Math.log(size)/Math.log(2); + graphic.pixelDensity(1); + for (let w = size; w >= 1; w /= 2) { + graphic.resizeCanvas(w, w); + let currCount = Math.log(w)/Math.log(2); + let roughness = 1-currCount/count; + console.log(roughness); + graphic.shader(myShader); + graphic.clear(); + myShader.setUniform('environmentMap', img); + myShader.setUniform('roughness', roughness); + graphic.noStroke(); + graphic.plane(w, w); + levels.push(graphic.get().drawingContext.getImageData(0, 0, w, w)); + } + } /** * @method activeFramebuffer @@ -2037,8 +2060,16 @@ p5.RendererGL = class RendererGL extends p5.Renderer { if (this.activeImageLight) { // this.activeImageLight has image as a key // look up the texture from the blurryTexture map + // change the name of shader of diffused to prevent confusion let diffusedLight = this.getBlurryTexture(this.activeImageLight); + // change the name of this uniform as diff for diffused and specular shader.setUniform('environmentMap', diffusedLight); + let specularLight = this.getSpecularTexture(); + // shine >= 1 so + let roughness = 1/this._useShininess; + // 0 - 1 + shader.setUniform('lod', roughness*8); + shader.setUniform('environmentMapSpecular', specularLight); } } diff --git a/src/webgl/shaders/imageLight.frag b/src/webgl/shaders/imageLightDiffused.frag similarity index 100% rename from src/webgl/shaders/imageLight.frag rename to src/webgl/shaders/imageLightDiffused.frag diff --git a/src/webgl/shaders/lighting.glsl b/src/webgl/shaders/lighting.glsl index 6925c1bc68..c5f78a8e92 100644 --- a/src/webgl/shaders/lighting.glsl +++ b/src/webgl/shaders/lighting.glsl @@ -40,6 +40,9 @@ uniform float uQuadraticAttenuation; uniform bool uUseImageLight; // storing the texture uniform sampler2D environmentMap; +// make a diffused texture and specular texture differently +uniform sampler2D environmentMapSpecular; +uniform float lod; const float specularFactor = 2.0; const float diffuseFactor = 0.73; @@ -105,18 +108,28 @@ vec2 mapTextureToNormal( vec3 normal ){ vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){ // put the code from the sketch frag here // hardcoded world camera position + // make 2 seperate builds vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0); vec3 worldNormal = normalize(vNormal); vec3 lightDirection = normalize( vViewPosition - worldCameraPosition ); vec3 R = reflect(lightDirection, worldNormal); + // use worldNormal instead of R vec2 newTexCoor = mapTextureToNormal( R ); vec4 texture = texture2D( environmentMap, newTexCoor ); return texture.xyz; } // TODO -vec3 calculateImageSpecular(){ +vec3 calculateImageSpecular( vec3 vNormal, vec3 vViewPosition ){ // not sure what to do here + vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0); + vec3 worldNormal = normalize(vNormal); + vec3 lightDirection = normalize( vViewPosition - worldCameraPosition ); + vec3 R = reflect(lightDirection, worldNormal); + vec2 newTexCoor = mapTextureToNormal( R ); + + vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, lod); + return outColor.xyz; } void totalLight( @@ -193,7 +206,7 @@ void totalLight( if( uUseImageLight ){ totalDiffuse += calculateImageDiffuse(normal, modelPosition); // TODO - totalSpecular += calculateImageSpecular(); + totalSpecular += calculateImageSpecular(normal, modelPosition); } totalDiffuse *= diffuseFactor;