From 227fe69e6e056b4a4f8fd9c1e5965330ce7b3a10 Mon Sep 17 00:00:00 2001 From: Garima Date: Sun, 24 Dec 2023 22:46:24 +0530 Subject: [PATCH 01/26] Extending p5.texture for cubemap textures --- src/webgl/p5.Texture.js | 54 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js index 55a4d3ed82..30bcf5fc0e 100644 --- a/src/webgl/p5.Texture.js +++ b/src/webgl/p5.Texture.js @@ -510,12 +510,64 @@ export function checkWebGLCapabilities({ GL, webglVersion }) { : gl.getExtension('OES_texture_half_float'); const supportsHalfFloatLinear = supportsHalfFloat && gl.getExtension('OES_texture_half_float_linear'); + const supportsCubemap = gl.getExtension('OES_texture_cube_map'); return { float: supportsFloat, floatLinear: supportsFloatLinear, halfFloat: supportsHalfFloat, - halfFloatLinear: supportsHalfFloatLinear + halfFloatLinear: supportsHalfFloatLinear, + cubemap: supportsCubemap }; } +export class CubemapTexture extends p5.Texture { + constructor(renderer, faces, settings) { + super(renderer, faces, settings); + } + + glFilter(_filter) { + const gl = this._renderer.GL; + // TODO: Support other filters if needed + return gl.LINEAR; + } + + _getTextureDataFromSource() { + return this.src; + } + + init(faces) { + const gl = this._renderer.GL; + this.glTex = gl.createTexture(); + + this.bindTexture(); + for (let faceIndex = 0; faceIndex < faces.length; faceIndex++) { + // Set up each face of the cubemap + gl.texImage2D( + gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, + 0, + this.glFormat, + this.glFormat, + this.glDataType, + faces[faceIndex] + ); + } + + // Set parameters for the cubemap + gl.texParameteri(gl.TEXTURE_CUBE_MAP + , gl.TEXTURE_MAG_FILTER, this.glMagFilter); + gl.texParameteri(gl.TEXTURE_CUBE_MAP + , gl.TEXTURE_MIN_FILTER, this.glMinFilter); + gl.texParameteri(gl.TEXTURE_CUBE_MAP + , gl.TEXTURE_WRAP_S, this.glWrapS); + gl.texParameteri(gl.TEXTURE_CUBE_MAP + , gl.TEXTURE_WRAP_T, this.glWrapT); + + this.unbindTexture(); + } + + update() { + // Custom update logic, if needed + } +} + export default p5.Texture; From 917de2fd8b5a16e3e4859c3d0c84554f77549356 Mon Sep 17 00:00:00 2001 From: Garima Date: Thu, 28 Dec 2023 21:51:15 +0530 Subject: [PATCH 02/26] Added vertex and fragment shaders for cubemaps --- src/webgl/shaders/cubeFragment.glsl | 23 +++++++++++++++++++++++ src/webgl/shaders/cubeVertex.glsl | 13 +++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 src/webgl/shaders/cubeFragment.glsl create mode 100644 src/webgl/shaders/cubeVertex.glsl diff --git a/src/webgl/shaders/cubeFragment.glsl b/src/webgl/shaders/cubeFragment.glsl new file mode 100644 index 0000000000..52c606eedc --- /dev/null +++ b/src/webgl/shaders/cubeFragment.glsl @@ -0,0 +1,23 @@ +#version 330 core +out vec4 FragColor; +in vec3 localPos; + +uniform sampler2D equirectangularMap; + +const vec2 invAtan = vec2(0.1591, 0.3183); + +vec2 SampleSphericalMap(vec3 v) +{ + vec2 uv = vec2(atan(v.z, v.x), asin(v.y)); + uv *= invAtan; + uv += 0.5; + return uv; +} + +void main() +{ + vec2 uv = SampleSphericalMap(normalize(localPos)); + vec3 color = texture(equirectangularMap, uv).rgb; + + FragColor = vec4(color, 1.0); +} diff --git a/src/webgl/shaders/cubeVertex.glsl b/src/webgl/shaders/cubeVertex.glsl new file mode 100644 index 0000000000..b24ccd7f6d --- /dev/null +++ b/src/webgl/shaders/cubeVertex.glsl @@ -0,0 +1,13 @@ +#version 330 core +layout (location = 0) in vec3 aPos; + +out vec3 localPos; + +uniform mat4 projection; +uniform mat4 view; + +void main() +{ + localPos = aPos; + gl_Position = projection * view * vec4(localPos, 1.0); +} From 5139c0a658c7511f819392873209b8ee8e20c7c0 Mon Sep 17 00:00:00 2001 From: Garima Date: Thu, 28 Dec 2023 21:53:41 +0530 Subject: [PATCH 03/26] Updated src/webgl/shaders/lighting.glsl file for cubemaps --- src/webgl/shaders/lighting.glsl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webgl/shaders/lighting.glsl b/src/webgl/shaders/lighting.glsl index 131a0767e1..952716a2f9 100644 --- a/src/webgl/shaders/lighting.glsl +++ b/src/webgl/shaders/lighting.glsl @@ -39,7 +39,7 @@ uniform float uQuadraticAttenuation; // boolean to initiate the calculateImageDiffuse and calculateImageSpecular uniform bool uUseImageLight; // texture for use in calculateImageDiffuse -uniform sampler2D environmentMapDiffused; +uniform sampler2D environmentMapDiffusedCubemap; // texture for use in calculateImageSpecular uniform sampler2D environmentMapSpecular; // roughness for use in calculateImageSpecular @@ -111,7 +111,7 @@ vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){ vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0); // hardcoded world camera position vec3 worldNormal = normalize(vNormal); vec2 newTexCoor = mapTextureToNormal( worldNormal ); - vec4 texture = TEXTURE( environmentMapDiffused, newTexCoor ); + vec4 texture = textureCube( environmentMapDiffusedCubemap, newTexCoor ); // this is to make the darker sections more dark // png and jpg usually flatten the brightness so it is to reverse that return smoothstep(vec3(0.0), vec3(0.8), texture.xyz); From 45e33d51e73450ec6c1b49fdebea687861b03695 Mon Sep 17 00:00:00 2001 From: Garima Date: Thu, 28 Dec 2023 21:59:01 +0530 Subject: [PATCH 04/26] Storing the diffuse irradiance in a cubemap texture --- src/webgl/p5.RendererGL.js | 54 +++++++++++++++++++++++++++++++------- 1 file changed, 45 insertions(+), 9 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 097c9ab8c1..0d655f5a4d 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -9,7 +9,7 @@ import './p5.Matrix'; import './p5.Framebuffer'; import { readFileSync } from 'fs'; import { join } from 'path'; -import { MipmapTexture } from './p5.Texture'; +import { CubemapTexture, MipmapTexture } from './p5.Texture'; const STROKE_CAP_ENUM = {}; const STROKE_JOIN_ENUM = {}; @@ -40,6 +40,14 @@ const webgl2CompatibilityShader = readFileSync( join(__dirname, '/shaders/webgl2Compatibility.glsl'), 'utf-8' ); +const cubemapFragmentShader=readFileSync( + join(__dirname,'/shaders/cubeFragment.glsl'), + 'utf8' +); +const cubemapVertexShader=readFileSync( + join(__dirname,'/shaders/cubeVertex.glsl'), + 'utf8' +); const defaultShaders = { immediateVert: readFileSync( @@ -1902,6 +1910,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer { let smallWidth = 200; let width = smallWidth; let height = Math.floor(smallWidth * (input.height / input.width)); + let cubemapTexture; + const faces = []; newFramebuffer = this._pInst.createFramebuffer({ width, height, density: 1 }); @@ -1913,23 +1923,49 @@ p5.RendererGL = class RendererGL extends p5.Renderer { defaultShaders.imageLightDiffusedFrag ); } + // Create a shader for cubemap conversion + const cubemapShader = this._pInst.createShader( + cubemapVertexShader, + cubemapFragmentShader); + + // Render each face of the cubemap + for (let i = 0; i < 6; ++i) { + newFramebuffer.draw(() => { + cubemapShader.use(); + cubemapShader.setUniform('equirectangularMap', input); + cubemapShader.setUniform('projection', captureProjection); + cubemapShader.setUniform('view', captureViews[i]); + + this._pInst.noStroke(); + this._pInst.rectMode(constants.CENTER); + this._pInst.noLights(); + this._pInst.rect(0, 0, width, height); + + // Capture the rendered face and store it in the faces array + faces[i] = this._pInst.get(0, 0, width, height); + }); + } + // Use the diffusedShader for rendering newFramebuffer.draw(() => { this._pInst.shader(this.diffusedShader); this.diffusedShader.setUniform('environmentMap', input); - this._pInst.noStroke(); - this._pInst.rectMode(constants.CENTER); - this._pInst.noLights(); - this._pInst.rect(0, 0, width, height); + // Render the cubemap using the stored faces + for (let i = 0; i < 6; ++i) { + this._pInst.image(faces[i], 0, 0, width, height); + } }); - this.diffusedTextures.set(input, newFramebuffer); - return newFramebuffer; + // Initialize CubemapTexture class with faces + cubemapTexture=new CubemapTexture(this._pInst,faces, {}); + cubemapTexture.init(faces); + this.diffusedTextures.set(input, cubemapTexture); + return cubemapTexture; } /* * used in imageLight, * To create a texture from the input non blurry image, if it doesn't already exist * Creating 8 different levels of textures according to different - * sizes and atoring them in `levels` array + * sizes and storing them in `levels` array * Creating a new Mipmap texture with that `levels` array * Storing the texture for input image in map called `specularTextures` * maps the input p5.Image to a p5.MipmapTexture @@ -2087,7 +2123,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer { // this.activeImageLight has image as a key // look up the texture from the diffusedTexture map let diffusedLight = this.getDiffusedTexture(this.activeImageLight); - shader.setUniform('environmentMapDiffused', diffusedLight); + shader.setUniform('environmentMapDiffusedCubemap', diffusedLight); let specularLight = this.getSpecularTexture(this.activeImageLight); // In p5js the range of shininess is >= 1, // Therefore roughness range will be ([0,1]*8)*20 or [0, 160] From 1d54fad08985e26b1249213d48b369dbd776e711 Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 12:56:05 +0530 Subject: [PATCH 05/26] Added caching mechanism for shaders --- src/webgl/p5.RendererGL.js | 146 +++++++++++++++++++++++-------------- 1 file changed, 90 insertions(+), 56 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 0d655f5a4d..5cad32e02a 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -13,6 +13,8 @@ import { CubemapTexture, MipmapTexture } from './p5.Texture'; const STROKE_CAP_ENUM = {}; const STROKE_JOIN_ENUM = {}; +const shaderCache = {}; //Shader cache object + let lineDefs = ''; const defineStrokeCapEnum = function (key, val) { lineDefs += `#define STROKE_CAP_${key} ${val}\n`; @@ -32,85 +34,117 @@ defineStrokeJoinEnum('ROUND', 0); defineStrokeJoinEnum('MITER', 1); defineStrokeJoinEnum('BEVEL', 2); -const lightingShader = readFileSync( +const getCachedShader= (shaderKey, shaderSource)=>{ + if(!shaderCache[shaderKey]){ + shaderCache[shaderKey]=p5.createShader(shaderSource); + } + return shaderCache[shaderKey]; +}; + +const lightingShader = getCachedShader('',readFileSync( join(__dirname, '/shaders/lighting.glsl'), 'utf-8' -); -const webgl2CompatibilityShader = readFileSync( +)); +const webgl2CompatibilityShader = getCachedShader('',readFileSync( join(__dirname, '/shaders/webgl2Compatibility.glsl'), 'utf-8' -); -const cubemapFragmentShader=readFileSync( +)); +const cubemapFragmentShader=getCachedShader('',readFileSync( join(__dirname,'/shaders/cubeFragment.glsl'), 'utf8' -); -const cubemapVertexShader=readFileSync( +)); +const cubemapVertexShader=getCachedShader('',readFileSync( join(__dirname,'/shaders/cubeVertex.glsl'), 'utf8' -); +)); + const defaultShaders = { - immediateVert: readFileSync( + immediateVert: getCachedShader('immediateVert',readFileSync( join(__dirname, '/shaders/immediate.vert'), 'utf-8' - ), - vertexColorVert: readFileSync( + )), + vertexColorVert: getCachedShader('vertexColorVert',readFileSync( join(__dirname, '/shaders/vertexColor.vert'), 'utf-8' - ), - vertexColorFrag: readFileSync( + )), + vertexColorFrag: getCachedShader('vertexColorFrag',readFileSync( join(__dirname, '/shaders/vertexColor.frag'), 'utf-8' - ), - normalVert: readFileSync(join(__dirname, '/shaders/normal.vert'), 'utf-8'), - normalFrag: readFileSync(join(__dirname, '/shaders/normal.frag'), 'utf-8'), - basicFrag: readFileSync(join(__dirname, '/shaders/basic.frag'), 'utf-8'), - lightVert: - lightingShader + - readFileSync(join(__dirname, '/shaders/light.vert'), 'utf-8'), - lightTextureFrag: readFileSync( - join(__dirname, '/shaders/light_texture.frag'), - 'utf-8' - ), - phongVert: readFileSync(join(__dirname, '/shaders/phong.vert'), 'utf-8'), - phongFrag: - lightingShader + - readFileSync(join(__dirname, '/shaders/phong.frag'), 'utf-8'), - fontVert: readFileSync(join(__dirname, '/shaders/font.vert'), 'utf-8'), - fontFrag: readFileSync(join(__dirname, '/shaders/font.frag'), 'utf-8'), - lineVert: - lineDefs + readFileSync(join(__dirname, '/shaders/line.vert'), 'utf-8'), - lineFrag: - lineDefs + readFileSync(join(__dirname, '/shaders/line.frag'), 'utf-8'), - 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'), - imageLightDiffusedFrag: readFileSync(join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8'), - imageLightSpecularFrag: readFileSync(join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8') + )), + normalVert: getCachedShader('normalVert',readFileSync( + join(__dirname, '/shaders/normal.vert'), 'utf-8' + )), + normalFrag: getCachedShader('normalFrag',readFileSync( + join(__dirname, '/shaders/normal.frag'), 'utf-8' + )), + basicFrag: getCachedShader('basicFrag',readFileSync( + join(__dirname, '/shaders/basic.frag'), 'utf-8' + )), + lightVert: getCachedShader('lightVert',lightingShader + readFileSync( + join(__dirname, '/shaders/light.vert'), 'utf-8' + )), + lightTextureFrag:getCachedShader('lightTextureFrag', readFileSync( + join(__dirname, '/shaders/light_texture.frag'),'utf-8' + )), + phongVert: getCachedShader('phongVert',readFileSync( + join(__dirname, '/shaders/phong.vert'), 'utf-8' + )), + phongFrag: getCachedShader('phongFrag', lightingShader + readFileSync( + join(__dirname, '/shaders/phong.frag'), 'utf-8' + )), + fontVert: getCachedShader('fontVert',readFileSync( + join(__dirname, '/shaders/font.vert'), 'utf-8' + )), + fontFrag: getCachedShader('fontFrag',readFileSync( + join(__dirname, '/shaders/font.frag'), 'utf-8' + )), + lineVert: getCachedShader('lineVert',lineDefs + readFileSync( + join(__dirname, '/shaders/line.vert'), 'utf-8' + )), + lineFrag : getCachedShader('lineFrag',lineDefs + readFileSync( + join(__dirname, '/shaders/line.frag'), 'utf-8' + )), + pointVert:getCachedShader('pointVert', readFileSync( + join(__dirname, '/shaders/point.vert'), 'utf-8' + )), + pointFrag:getCachedShader('pointFrag', readFileSync( + join(__dirname, '/shaders/point.frag'), 'utf-8' + )), + imageLightVert:getCachedShader('imageLightVert', readFileSync( + join(__dirname, '/shaders/imageLight.vert'), 'utf-8' + )), + imageLightDiffusedFrag:getCachedShader('imageLightDiffusedFrag', readFileSync( + join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8' + )), + imageLightSpecularFrag:getCachedShader('imageLightSpecularFrag', readFileSync( + join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8' + )) }; for (const key in defaultShaders) { defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key]; } const filterShaderFrags = { - [constants.GRAY]: - readFileSync(join(__dirname, '/shaders/filters/gray.frag'), 'utf-8'), - [constants.ERODE]: - readFileSync(join(__dirname, '/shaders/filters/erode.frag'), 'utf-8'), - [constants.DILATE]: - readFileSync(join(__dirname, '/shaders/filters/dilate.frag'), 'utf-8'), - [constants.BLUR]: - readFileSync(join(__dirname, '/shaders/filters/blur.frag'), 'utf-8'), - [constants.POSTERIZE]: - readFileSync(join(__dirname, '/shaders/filters/posterize.frag'), 'utf-8'), - [constants.OPAQUE]: - readFileSync(join(__dirname, '/shaders/filters/opaque.frag'), 'utf-8'), - [constants.INVERT]: - readFileSync(join(__dirname, '/shaders/filters/invert.frag'), 'utf-8'), - [constants.THRESHOLD]: - readFileSync(join(__dirname, '/shaders/filters/threshold.frag'), 'utf-8') + [constants.GRAY]:getCachedShader(constants.GRAY, + readFileSync(join(__dirname, '/shaders/filters/gray.frag'), 'utf-8')), + [constants.ERODE]:getCachedShader(constants.ERODE, + readFileSync(join(__dirname, '/shaders/filters/erode.frag'), 'utf-8')), + [constants.DILATE]:getCachedShader(constants.DILATE, + readFileSync(join(__dirname, '/shaders/filters/dilate.frag'), 'utf-8')), + [constants.BLUR]:getCachedShader(constants.BLUR, + readFileSync(join(__dirname, '/shaders/filters/blur.frag'), 'utf-8')), + [constants.POSTERIZE]:getCachedShader(constants.POSTERIZE, + readFileSync(join(__dirname, '/shaders/filters/posterize.frag'), 'utf-8')), + [constants.OPAQUE]:getCachedShader(constants.OPAQUE, + readFileSync(join(__dirname, '/shaders/filters/opaque.frag'), 'utf-8')), + [constants.INVERT]:getCachedShader(constants.INVERT, + readFileSync(join(__dirname, '/shaders/filters/invert.frag'), 'utf-8')), + [constants.THRESHOLD]:getCachedShader(constants.THRESHOLD, + readFileSync(join(__dirname, '/shaders/filters/threshold.frag'), 'utf-8')) }; -const filterShaderVert = readFileSync(join(__dirname, '/shaders/filters/default.vert'), 'utf-8'); +const filterShaderVert = getCachedShader('filterShaderVert',readFileSync( + join(__dirname, '/shaders/filters/default.vert'), 'utf-8')); /** * @module Rendering From 1ff8702b6c230077e32bebbf84a41bd259c544fd Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 13:10:27 +0530 Subject: [PATCH 06/26] Updated caching for some shaders --- src/webgl/p5.RendererGL.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 5cad32e02a..7e645729a8 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -41,24 +41,23 @@ const getCachedShader= (shaderKey, shaderSource)=>{ return shaderCache[shaderKey]; }; -const lightingShader = getCachedShader('',readFileSync( +const lightingShader = getCachedShader('lightingShader',readFileSync( join(__dirname, '/shaders/lighting.glsl'), 'utf-8' )); -const webgl2CompatibilityShader = getCachedShader('',readFileSync( +const webgl2CompatibilityShader = getCachedShader('webgl2CompatibilityShader',readFileSync( join(__dirname, '/shaders/webgl2Compatibility.glsl'), 'utf-8' )); -const cubemapFragmentShader=getCachedShader('',readFileSync( +const cubemapFragmentShader=getCachedShader('cubemapFragmentShader',readFileSync( join(__dirname,'/shaders/cubeFragment.glsl'), 'utf8' )); -const cubemapVertexShader=getCachedShader('',readFileSync( +const cubemapVertexShader=getCachedShader('cubemapVertexShader',readFileSync( join(__dirname,'/shaders/cubeVertex.glsl'), 'utf8' )); - const defaultShaders = { immediateVert: getCachedShader('immediateVert',readFileSync( join(__dirname, '/shaders/immediate.vert'), From 6cd7856d5f2fb552a1197ca4a4f416e019a9aad4 Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 13:16:13 +0530 Subject: [PATCH 07/26] Updated p5.Texture.js --- src/webgl/p5.Texture.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js index 30bcf5fc0e..d9dcdc1fe4 100644 --- a/src/webgl/p5.Texture.js +++ b/src/webgl/p5.Texture.js @@ -510,7 +510,8 @@ export function checkWebGLCapabilities({ GL, webglVersion }) { : gl.getExtension('OES_texture_half_float'); const supportsHalfFloatLinear = supportsHalfFloat && gl.getExtension('OES_texture_half_float_linear'); - const supportsCubemap = gl.getExtension('OES_texture_cube_map'); + const supportsCubemap = (webglVersion === constants.WEBGL2) + || (gl.getExtension('OES_texture_cube_map')); return { float: supportsFloat, floatLinear: supportsFloatLinear, From 4401ebd2609dcd40c49bf4ce8bde3d8dfed057f7 Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 18:12:48 +0530 Subject: [PATCH 08/26] Updated cubeVertex and cubeFragment shaders --- src/webgl/shaders/cubeFragment.frag | 22 ++++++++++++++++++++++ src/webgl/shaders/cubeVertex.vert | 13 +++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 src/webgl/shaders/cubeFragment.frag create mode 100644 src/webgl/shaders/cubeVertex.vert diff --git a/src/webgl/shaders/cubeFragment.frag b/src/webgl/shaders/cubeFragment.frag new file mode 100644 index 0000000000..025e538820 --- /dev/null +++ b/src/webgl/shaders/cubeFragment.frag @@ -0,0 +1,22 @@ +// Adapted from: https://learnopengl.com/PBR/IBL/Diffuse-irradiance +IN vec3 localPos; + +uniform sampler2D equirectangularMap; + +const vec2 invAtan = vec2(0.1591, 0.3183); + +vec2 SampleSphericalMap(vec3 v) +{ + vec2 uv = vec2(atan(v.z, v.x), asin(v.y)); + uv *= invAtan; + uv += 0.5; + return uv; +} + +void main() +{ + vec2 uv = SampleSphericalMap(normalize(localPos)); + vec3 color = texture(equirectangularMap, uv).rgb; + + OUT_COLOR = vec4(color, 1.0); +} diff --git a/src/webgl/shaders/cubeVertex.vert b/src/webgl/shaders/cubeVertex.vert new file mode 100644 index 0000000000..387c79e457 --- /dev/null +++ b/src/webgl/shaders/cubeVertex.vert @@ -0,0 +1,13 @@ +// Adapted from: https://learnopengl.com/PBR/IBL/Diffuse-irradiance +layout (location = 0) in vec3 aPos; + +OUT vec3 localPos; + +uniform mat4 projection; +uniform mat4 view; + +void main() +{ + localPos = aPos; + gl_Position = projection * view * vec4(localPos, 1.0); +} From 37751d9600cbdbf0bd9d100c69da1f0c9e117b2c Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 18:15:37 +0530 Subject: [PATCH 09/26] renamed cubemap shader files --- src/webgl/shaders/cubeFragment.glsl | 23 ----------------------- src/webgl/shaders/cubeVertex.glsl | 13 ------------- 2 files changed, 36 deletions(-) delete mode 100644 src/webgl/shaders/cubeFragment.glsl delete mode 100644 src/webgl/shaders/cubeVertex.glsl diff --git a/src/webgl/shaders/cubeFragment.glsl b/src/webgl/shaders/cubeFragment.glsl deleted file mode 100644 index 52c606eedc..0000000000 --- a/src/webgl/shaders/cubeFragment.glsl +++ /dev/null @@ -1,23 +0,0 @@ -#version 330 core -out vec4 FragColor; -in vec3 localPos; - -uniform sampler2D equirectangularMap; - -const vec2 invAtan = vec2(0.1591, 0.3183); - -vec2 SampleSphericalMap(vec3 v) -{ - vec2 uv = vec2(atan(v.z, v.x), asin(v.y)); - uv *= invAtan; - uv += 0.5; - return uv; -} - -void main() -{ - vec2 uv = SampleSphericalMap(normalize(localPos)); - vec3 color = texture(equirectangularMap, uv).rgb; - - FragColor = vec4(color, 1.0); -} diff --git a/src/webgl/shaders/cubeVertex.glsl b/src/webgl/shaders/cubeVertex.glsl deleted file mode 100644 index b24ccd7f6d..0000000000 --- a/src/webgl/shaders/cubeVertex.glsl +++ /dev/null @@ -1,13 +0,0 @@ -#version 330 core -layout (location = 0) in vec3 aPos; - -out vec3 localPos; - -uniform mat4 projection; -uniform mat4 view; - -void main() -{ - localPos = aPos; - gl_Position = projection * view * vec4(localPos, 1.0); -} From 93b8b50dee0320dc5c346504aad2822a9796ed1e Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 18:20:15 +0530 Subject: [PATCH 10/26] Updated p5.RendererGL.js --- src/webgl/p5.RendererGL.js | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 7e645729a8..13f059b6d5 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -49,14 +49,6 @@ const webgl2CompatibilityShader = getCachedShader('webgl2CompatibilityShader',re join(__dirname, '/shaders/webgl2Compatibility.glsl'), 'utf-8' )); -const cubemapFragmentShader=getCachedShader('cubemapFragmentShader',readFileSync( - join(__dirname,'/shaders/cubeFragment.glsl'), - 'utf8' -)); -const cubemapVertexShader=getCachedShader('cubemapVertexShader',readFileSync( - join(__dirname,'/shaders/cubeVertex.glsl'), - 'utf8' -)); const defaultShaders = { immediateVert: getCachedShader('immediateVert',readFileSync( @@ -118,6 +110,12 @@ const defaultShaders = { )), imageLightSpecularFrag:getCachedShader('imageLightSpecularFrag', readFileSync( join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8' + )), + cubemapVertexShader:getCachedShader('cubemapVertexShader',readFileSync( + join(__dirname,'/shaders/cubeVertex.vert'),'utf8' + )), + cubemapFragmentShader:getCachedShader('cubemapFragmentShader',readFileSync( + join(__dirname,'/shaders/cubeFragment.frag'),'utf8' )) }; for (const key in defaultShaders) { @@ -1881,6 +1879,19 @@ p5.RendererGL = class RendererGL extends p5.Renderer { return this._defaultFontShader; } + _getCubemapShader() { + if (!this._defaultCubemapShader) { + this._defaultCubemapShader = new p5.Shader( + this, + this._webGL2CompatibilityPrefix('vert', 'mediump') + + defaultShaders.cubemapVertexShader, + this._webGL2CompatibilityPrefix('frag', 'mediump') + + defaultShaders.cubemapFragmentShader + ); + } + return this._defaultCubemapShader; + } + _webGL2CompatibilityPrefix( shaderType, floatPrecision @@ -1958,8 +1969,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer { } // Create a shader for cubemap conversion const cubemapShader = this._pInst.createShader( - cubemapVertexShader, - cubemapFragmentShader); + defaultShaders.cubemapVertexShader, + defaultShaders.cubemapFragmentShader); // Render each face of the cubemap for (let i = 0; i < 6; ++i) { From 66dc0dc92a79458cd4f665239b9a382bc83fc33c Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 18:21:06 +0530 Subject: [PATCH 11/26] Updated p5.Texture.js --- src/webgl/p5.Texture.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js index d9dcdc1fe4..7866c51935 100644 --- a/src/webgl/p5.Texture.js +++ b/src/webgl/p5.Texture.js @@ -193,7 +193,7 @@ p5.Texture = class Texture { /** * Checks if the source data for this texture has changed (if it's * easy to do so) and reuploads the texture if necessary. If it's not - * possible or to expensive to do a calculation to determine wheter or + * possible or too expensive to do a calculation to determine whether or * not the data has occurred, this method simply re-uploads the texture. * @method update */ From cffda6945d369e85ef4de6bd341520dc69cc273b Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 18:23:01 +0530 Subject: [PATCH 12/26] Updated lighting.glsl --- src/webgl/shaders/lighting.glsl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webgl/shaders/lighting.glsl b/src/webgl/shaders/lighting.glsl index 952716a2f9..d9dc9941e7 100644 --- a/src/webgl/shaders/lighting.glsl +++ b/src/webgl/shaders/lighting.glsl @@ -39,7 +39,7 @@ uniform float uQuadraticAttenuation; // boolean to initiate the calculateImageDiffuse and calculateImageSpecular uniform bool uUseImageLight; // texture for use in calculateImageDiffuse -uniform sampler2D environmentMapDiffusedCubemap; +uniform samplerCube environmentMapDiffusedCubemap; // texture for use in calculateImageSpecular uniform sampler2D environmentMapSpecular; // roughness for use in calculateImageSpecular @@ -111,7 +111,7 @@ vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){ vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0); // hardcoded world camera position vec3 worldNormal = normalize(vNormal); vec2 newTexCoor = mapTextureToNormal( worldNormal ); - vec4 texture = textureCube( environmentMapDiffusedCubemap, newTexCoor ); + vec4 texture = TEXTURE_CUBE( environmentMapDiffusedCubemap, newTexCoor ); // this is to make the darker sections more dark // png and jpg usually flatten the brightness so it is to reverse that return smoothstep(vec3(0.0), vec3(0.8), texture.xyz); From 751b16aedf94d5e747ea3c9d01997ec561c492bf Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 18:25:41 +0530 Subject: [PATCH 13/26] Added TEXTURE_CUBE --- src/webgl/shaders/webgl2Compatibility.glsl | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/webgl/shaders/webgl2Compatibility.glsl b/src/webgl/shaders/webgl2Compatibility.glsl index 9aed0ef22c..ee895a7fa7 100644 --- a/src/webgl/shaders/webgl2Compatibility.glsl +++ b/src/webgl/shaders/webgl2Compatibility.glsl @@ -8,6 +8,7 @@ out vec4 outColor; #define OUT_COLOR outColor #endif #define TEXTURE texture +#define TEXTURE_CUBE texture #else @@ -18,6 +19,7 @@ out vec4 outColor; #endif #define OUT varying #define TEXTURE texture2D +#define TEXTURE_CUBE textureCube #ifdef FRAGMENT_SHADER #define OUT_COLOR gl_FragColor From 29e7a149f1f4331e4560530d8ec0ff02878d518a Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 29 Dec 2023 21:36:50 +0530 Subject: [PATCH 14/26] Added gl.SAMPLER_CUBE uniform type to p5.Shader.js --- src/webgl/p5.Shader.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index 0366df75e4..6bae44be01 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -225,7 +225,7 @@ p5.Shader = class { uniform.name = uniformName; uniform.type = uniformInfo.type; uniform._cachedData = undefined; - if (uniform.type === gl.SAMPLER_2D) { + if (uniform.type === gl.SAMPLER_2D || uniform.type === gl.SAMPLER_CUBE) { uniform.samplerIndex = samplerIndex; samplerIndex++; this.samplers.push(uniform); @@ -548,6 +548,12 @@ p5.Shader = class { uniform.texture.src._animateGif(this._renderer._pInst); } break; + case gl.SAMPLER_CUBE: + gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex); + uniform.texture = + data instanceof p5.Texture ? data : this._renderer.getTexture(data); + gl.uniform1i(location, uniform.samplerIndex); + break; //@todo complete all types } return this; From e7cd392cd98361324ae5d62122fc0bf76a5c9dc9 Mon Sep 17 00:00:00 2001 From: Garima Date: Sun, 31 Dec 2023 21:19:42 +0530 Subject: [PATCH 15/26] Minor changes in SAMPLER_CUBE uniform type --- src/webgl/p5.Shader.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js index d34d3d8095..2ce98dff80 100644 --- a/src/webgl/p5.Shader.js +++ b/src/webgl/p5.Shader.js @@ -540,6 +540,7 @@ p5.Shader = class { } break; case gl.SAMPLER_2D: + case gl.SAMPLER_CUBE: gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex); uniform.texture = data instanceof p5.Texture ? data : this._renderer.getTexture(data); @@ -548,12 +549,6 @@ p5.Shader = class { uniform.texture.src._animateGif(this._renderer._pInst); } break; - case gl.SAMPLER_CUBE: - gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex); - uniform.texture = - data instanceof p5.Texture ? data : this._renderer.getTexture(data); - gl.uniform1i(location, uniform.samplerIndex); - break; //@todo complete all types } return this; From f30af0e4ee2de8e0cd4b0f5869175b0169aec22b Mon Sep 17 00:00:00 2001 From: Garima Date: Mon, 1 Jan 2024 00:20:41 +0530 Subject: [PATCH 16/26] Minor updates on caching shaders --- src/webgl/p5.RendererGL.js | 119 +++++++++++++++++++++---------------- 1 file changed, 69 insertions(+), 50 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 13f059b6d5..62940f4d46 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -13,7 +13,6 @@ import { CubemapTexture, MipmapTexture } from './p5.Texture'; const STROKE_CAP_ENUM = {}; const STROKE_JOIN_ENUM = {}; -const shaderCache = {}; //Shader cache object let lineDefs = ''; const defineStrokeCapEnum = function (key, val) { @@ -34,87 +33,98 @@ defineStrokeJoinEnum('ROUND', 0); defineStrokeJoinEnum('MITER', 1); defineStrokeJoinEnum('BEVEL', 2); -const getCachedShader= (shaderKey, shaderSource)=>{ - if(!shaderCache[shaderKey]){ - shaderCache[shaderKey]=p5.createShader(shaderSource); +this._pInst.shaderCache={}; +p5.RendererGL.prototype.getCachedShader = function ( + shaderKey, vertexShaderSource, fragmentShaderSource) { + if (!this._pInst.shaderCache) { + this._pInst.shaderCache = {}; //ensures a unique shaderCache for each instance of p5.RendererGL } - return shaderCache[shaderKey]; + if (!this._pInst.shaderCache[shaderKey]) { + const vertexShader = this._pInst.createShader( + this._pInst.VERTEX_SHADER, vertexShaderSource); + const fragmentShader = this._pInst.createShader( + this._pInst.FRAGMENT_SHADER, fragmentShaderSource); + + this._pInst.shaderCache[shaderKey] = this._pInst.createShaderProgram( + vertexShader, fragmentShader); + } + return this._pInst.shaderCache[shaderKey]; }; -const lightingShader = getCachedShader('lightingShader',readFileSync( +const lightingShader = p5.RendererGL.prototype.getCachedShader('lightingShader',readFileSync( join(__dirname, '/shaders/lighting.glsl'), 'utf-8' )); -const webgl2CompatibilityShader = getCachedShader('webgl2CompatibilityShader',readFileSync( +const webgl2CompatibilityShader = readFileSync( join(__dirname, '/shaders/webgl2Compatibility.glsl'), 'utf-8' -)); +); const defaultShaders = { - immediateVert: getCachedShader('immediateVert',readFileSync( + immediateVert: p5.RendererGL.prototype.getCachedShader('immediateVert',readFileSync( join(__dirname, '/shaders/immediate.vert'), 'utf-8' )), - vertexColorVert: getCachedShader('vertexColorVert',readFileSync( + vertexColorVert: p5.RendererGL.prototype.getCachedShader('vertexColorVert',readFileSync( join(__dirname, '/shaders/vertexColor.vert'), 'utf-8' )), - vertexColorFrag: getCachedShader('vertexColorFrag',readFileSync( + vertexColorFrag: p5.RendererGL.prototype.getCachedShader('vertexColorFrag',readFileSync( join(__dirname, '/shaders/vertexColor.frag'), 'utf-8' )), - normalVert: getCachedShader('normalVert',readFileSync( + normalVert: p5.RendererGL.prototype.getCachedShader('normalVert',readFileSync( join(__dirname, '/shaders/normal.vert'), 'utf-8' )), - normalFrag: getCachedShader('normalFrag',readFileSync( + normalFrag: p5.RendererGL.prototype.getCachedShader('normalFrag',readFileSync( join(__dirname, '/shaders/normal.frag'), 'utf-8' )), - basicFrag: getCachedShader('basicFrag',readFileSync( + basicFrag: p5.RendererGL.prototype.getCachedShader('basicFrag',readFileSync( join(__dirname, '/shaders/basic.frag'), 'utf-8' )), - lightVert: getCachedShader('lightVert',lightingShader + readFileSync( + lightVert: p5.RendererGL.prototype.getCachedShader('lightVert',lightingShader + readFileSync( join(__dirname, '/shaders/light.vert'), 'utf-8' )), - lightTextureFrag:getCachedShader('lightTextureFrag', readFileSync( + lightTextureFrag:p5.RendererGL.prototype.getCachedShader('lightTextureFrag', readFileSync( join(__dirname, '/shaders/light_texture.frag'),'utf-8' )), - phongVert: getCachedShader('phongVert',readFileSync( + phongVert: p5.RendererGL.prototype.getCachedShader('phongVert',readFileSync( join(__dirname, '/shaders/phong.vert'), 'utf-8' )), - phongFrag: getCachedShader('phongFrag', lightingShader + readFileSync( + phongFrag: p5.RendererGL.prototype.getCachedShader('phongFrag', lightingShader + readFileSync( join(__dirname, '/shaders/phong.frag'), 'utf-8' )), - fontVert: getCachedShader('fontVert',readFileSync( + fontVert: p5.RendererGL.prototype.getCachedShader('fontVert',readFileSync( join(__dirname, '/shaders/font.vert'), 'utf-8' )), - fontFrag: getCachedShader('fontFrag',readFileSync( + fontFrag: p5.RendererGL.prototype.getCachedShader('fontFrag',readFileSync( join(__dirname, '/shaders/font.frag'), 'utf-8' )), - lineVert: getCachedShader('lineVert',lineDefs + readFileSync( + lineVert: p5.RendererGL.prototype.getCachedShader('lineVert',lineDefs + readFileSync( join(__dirname, '/shaders/line.vert'), 'utf-8' )), - lineFrag : getCachedShader('lineFrag',lineDefs + readFileSync( + lineFrag : p5.RendererGL.prototype.getCachedShader('lineFrag',lineDefs + readFileSync( join(__dirname, '/shaders/line.frag'), 'utf-8' )), - pointVert:getCachedShader('pointVert', readFileSync( + pointVert:p5.RendererGL.prototype.getCachedShader('pointVert', readFileSync( join(__dirname, '/shaders/point.vert'), 'utf-8' )), - pointFrag:getCachedShader('pointFrag', readFileSync( + pointFrag:p5.RendererGL.prototype.getCachedShader('pointFrag', readFileSync( join(__dirname, '/shaders/point.frag'), 'utf-8' )), - imageLightVert:getCachedShader('imageLightVert', readFileSync( + imageLightVert:p5.RendererGL.prototype.getCachedShader('imageLightVert', readFileSync( join(__dirname, '/shaders/imageLight.vert'), 'utf-8' )), - imageLightDiffusedFrag:getCachedShader('imageLightDiffusedFrag', readFileSync( + imageLightDiffusedFrag:p5.RendererGL.prototype.getCachedShader('imageLightDiffusedFrag', readFileSync( join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8' )), - imageLightSpecularFrag:getCachedShader('imageLightSpecularFrag', readFileSync( + imageLightSpecularFrag:p5.RendererGL.prototype.getCachedShader('imageLightSpecularFrag', readFileSync( join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8' )), - cubemapVertexShader:getCachedShader('cubemapVertexShader',readFileSync( + cubemapVertexShader:p5.RendererGL.prototype.getCachedShader('cubemapVertexShader',readFileSync( join(__dirname,'/shaders/cubeVertex.vert'),'utf8' )), - cubemapFragmentShader:getCachedShader('cubemapFragmentShader',readFileSync( + cubemapFragmentShader:p5.RendererGL.prototype.getCachedShader('cubemapFragmentShader',readFileSync( join(__dirname,'/shaders/cubeFragment.frag'),'utf8' )) }; @@ -123,25 +133,35 @@ for (const key in defaultShaders) { } const filterShaderFrags = { - [constants.GRAY]:getCachedShader(constants.GRAY, - readFileSync(join(__dirname, '/shaders/filters/gray.frag'), 'utf-8')), - [constants.ERODE]:getCachedShader(constants.ERODE, - readFileSync(join(__dirname, '/shaders/filters/erode.frag'), 'utf-8')), - [constants.DILATE]:getCachedShader(constants.DILATE, - readFileSync(join(__dirname, '/shaders/filters/dilate.frag'), 'utf-8')), - [constants.BLUR]:getCachedShader(constants.BLUR, - readFileSync(join(__dirname, '/shaders/filters/blur.frag'), 'utf-8')), - [constants.POSTERIZE]:getCachedShader(constants.POSTERIZE, - readFileSync(join(__dirname, '/shaders/filters/posterize.frag'), 'utf-8')), - [constants.OPAQUE]:getCachedShader(constants.OPAQUE, - readFileSync(join(__dirname, '/shaders/filters/opaque.frag'), 'utf-8')), - [constants.INVERT]:getCachedShader(constants.INVERT, - readFileSync(join(__dirname, '/shaders/filters/invert.frag'), 'utf-8')), - [constants.THRESHOLD]:getCachedShader(constants.THRESHOLD, - readFileSync(join(__dirname, '/shaders/filters/threshold.frag'), 'utf-8')) + [constants.GRAY]:p5.RendererGL.prototype.getCachedShader( + constants.GRAY,readFileSync(join( + __dirname, '/shaders/filters/gray.frag'), 'utf-8')), + [constants.ERODE]:p5.RendererGL.prototype.getCachedShader( + constants.ERODE,readFileSync(join( + __dirname, '/shaders/filters/erode.frag'), 'utf-8')), + [constants.DILATE]:p5.RendererGL.prototype.getCachedShader( + constants.DILATE,readFileSync(join( + __dirname, '/shaders/filters/dilate.frag'), 'utf-8')), + [constants.BLUR]:p5.RendererGL.prototype.getCachedShader( + constants.BLUR,readFileSync(join( + __dirname, '/shaders/filters/blur.frag'), 'utf-8')), + [constants.POSTERIZE]:p5.RendererGL.prototype.getCachedShader( + constants.POSTERIZE,readFileSync(join( + __dirname, '/shaders/filters/posterize.frag'), 'utf-8')), + [constants.OPAQUE]:p5.RendererGL.prototype.getCachedShader( + constants.OPAQUE,readFileSync(join( + __dirname, '/shaders/filters/opaque.frag'), 'utf-8')), + [constants.INVERT]:p5.RendererGL.prototype.getCachedShader( + constants.INVERT,readFileSync(join( + __dirname, '/shaders/filters/invert.frag'), 'utf-8')), + [constants.THRESHOLD]:p5.RendererGL.prototype.getCachedShader( + constants.THRESHOLD,readFileSync(join( + __dirname, '/shaders/filters/threshold.frag'), 'utf-8')) }; -const filterShaderVert = getCachedShader('filterShaderVert',readFileSync( - join(__dirname, '/shaders/filters/default.vert'), 'utf-8')); + +const filterShaderVert = p5.RendererGL.prototype.getCachedShader( + 'filterShaderVert',readFileSync(join( + __dirname, '/shaders/filters/default.vert'), 'utf-8')); /** * @module Rendering @@ -599,6 +619,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this._defaultNormalShader = undefined; this._defaultColorShader = undefined; this._defaultPointShader = undefined; + this._defaultCubemapShader=undefined; this.userFillShader = undefined; this.userStrokeShader = undefined; @@ -1968,9 +1989,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer { ); } // Create a shader for cubemap conversion - const cubemapShader = this._pInst.createShader( - defaultShaders.cubemapVertexShader, - defaultShaders.cubemapFragmentShader); + const cubemapShader = this._getCubemapShader(); // Render each face of the cubemap for (let i = 0; i < 6; ++i) { From 773198afc5193c004780f6f9de6f2b9494b997f9 Mon Sep 17 00:00:00 2001 From: Garima Date: Sat, 13 Jan 2024 18:30:35 +0530 Subject: [PATCH 17/26] Updated RendererGL.js --- src/webgl/p5.RendererGL.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 62940f4d46..b04abc901e 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -33,7 +33,6 @@ defineStrokeJoinEnum('ROUND', 0); defineStrokeJoinEnum('MITER', 1); defineStrokeJoinEnum('BEVEL', 2); -this._pInst.shaderCache={}; p5.RendererGL.prototype.getCachedShader = function ( shaderKey, vertexShaderSource, fragmentShaderSource) { if (!this._pInst.shaderCache) { @@ -503,6 +502,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.GL = this.drawingContext; this._pInst._setProperty('drawingContext', this.drawingContext); + this._pInst.shaderCache={}; + // erasing this._isErasing = false; From ffd909779dfd9cd8a327a6c55c3dd1cf9aaf6447 Mon Sep 17 00:00:00 2001 From: Garima Date: Tue, 16 Jan 2024 22:32:05 +0530 Subject: [PATCH 18/26] Reordered some code in p5.RendererGL.js --- src/webgl/p5.RendererGL.js | 261 +++++++++++++++++++------------------ 1 file changed, 133 insertions(+), 128 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 29df7d32bc..40e0e89c57 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -33,134 +33,7 @@ defineStrokeJoinEnum('ROUND', 0); defineStrokeJoinEnum('MITER', 1); defineStrokeJoinEnum('BEVEL', 2); -p5.RendererGL.prototype.getCachedShader = function ( - shaderKey, vertexShaderSource, fragmentShaderSource) { - if (!this._pInst.shaderCache) { - this._pInst.shaderCache = {}; //ensures a unique shaderCache for each instance of p5.RendererGL - } - if (!this._pInst.shaderCache[shaderKey]) { - const vertexShader = this._pInst.createShader( - this._pInst.VERTEX_SHADER, vertexShaderSource); - const fragmentShader = this._pInst.createShader( - this._pInst.FRAGMENT_SHADER, fragmentShaderSource); - - this._pInst.shaderCache[shaderKey] = this._pInst.createShaderProgram( - vertexShader, fragmentShader); - } - return this._pInst.shaderCache[shaderKey]; -}; - -const lightingShader = p5.RendererGL.prototype.getCachedShader('lightingShader',readFileSync( - join(__dirname, '/shaders/lighting.glsl'), - 'utf-8' -)); -const webgl2CompatibilityShader = readFileSync( - join(__dirname, '/shaders/webgl2Compatibility.glsl'), - 'utf-8' -); - -const defaultShaders = { - immediateVert: p5.RendererGL.prototype.getCachedShader('immediateVert',readFileSync( - join(__dirname, '/shaders/immediate.vert'), - 'utf-8' - )), - vertexColorVert: p5.RendererGL.prototype.getCachedShader('vertexColorVert',readFileSync( - join(__dirname, '/shaders/vertexColor.vert'), - 'utf-8' - )), - vertexColorFrag: p5.RendererGL.prototype.getCachedShader('vertexColorFrag',readFileSync( - join(__dirname, '/shaders/vertexColor.frag'), - 'utf-8' - )), - normalVert: p5.RendererGL.prototype.getCachedShader('normalVert',readFileSync( - join(__dirname, '/shaders/normal.vert'), 'utf-8' - )), - normalFrag: p5.RendererGL.prototype.getCachedShader('normalFrag',readFileSync( - join(__dirname, '/shaders/normal.frag'), 'utf-8' - )), - basicFrag: p5.RendererGL.prototype.getCachedShader('basicFrag',readFileSync( - join(__dirname, '/shaders/basic.frag'), 'utf-8' - )), - lightVert: p5.RendererGL.prototype.getCachedShader('lightVert',lightingShader + readFileSync( - join(__dirname, '/shaders/light.vert'), 'utf-8' - )), - lightTextureFrag:p5.RendererGL.prototype.getCachedShader('lightTextureFrag', readFileSync( - join(__dirname, '/shaders/light_texture.frag'),'utf-8' - )), - phongVert: p5.RendererGL.prototype.getCachedShader('phongVert',readFileSync( - join(__dirname, '/shaders/phong.vert'), 'utf-8' - )), - phongFrag: p5.RendererGL.prototype.getCachedShader('phongFrag', lightingShader + readFileSync( - join(__dirname, '/shaders/phong.frag'), 'utf-8' - )), - fontVert: p5.RendererGL.prototype.getCachedShader('fontVert',readFileSync( - join(__dirname, '/shaders/font.vert'), 'utf-8' - )), - fontFrag: p5.RendererGL.prototype.getCachedShader('fontFrag',readFileSync( - join(__dirname, '/shaders/font.frag'), 'utf-8' - )), - lineVert: p5.RendererGL.prototype.getCachedShader('lineVert',lineDefs + readFileSync( - join(__dirname, '/shaders/line.vert'), 'utf-8' - )), - lineFrag : p5.RendererGL.prototype.getCachedShader('lineFrag',lineDefs + readFileSync( - join(__dirname, '/shaders/line.frag'), 'utf-8' - )), - pointVert:p5.RendererGL.prototype.getCachedShader('pointVert', readFileSync( - join(__dirname, '/shaders/point.vert'), 'utf-8' - )), - pointFrag:p5.RendererGL.prototype.getCachedShader('pointFrag', readFileSync( - join(__dirname, '/shaders/point.frag'), 'utf-8' - )), - imageLightVert:p5.RendererGL.prototype.getCachedShader('imageLightVert', readFileSync( - join(__dirname, '/shaders/imageLight.vert'), 'utf-8' - )), - imageLightDiffusedFrag:p5.RendererGL.prototype.getCachedShader('imageLightDiffusedFrag', readFileSync( - join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8' - )), - imageLightSpecularFrag:p5.RendererGL.prototype.getCachedShader('imageLightSpecularFrag', readFileSync( - join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8' - )), - cubemapVertexShader:p5.RendererGL.prototype.getCachedShader('cubemapVertexShader',readFileSync( - join(__dirname,'/shaders/cubeVertex.vert'),'utf8' - )), - cubemapFragmentShader:p5.RendererGL.prototype.getCachedShader('cubemapFragmentShader',readFileSync( - join(__dirname,'/shaders/cubeFragment.frag'),'utf8' - )) -}; -for (const key in defaultShaders) { - defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key]; -} - -const filterShaderFrags = { - [constants.GRAY]:p5.RendererGL.prototype.getCachedShader( - constants.GRAY,readFileSync(join( - __dirname, '/shaders/filters/gray.frag'), 'utf-8')), - [constants.ERODE]:p5.RendererGL.prototype.getCachedShader( - constants.ERODE,readFileSync(join( - __dirname, '/shaders/filters/erode.frag'), 'utf-8')), - [constants.DILATE]:p5.RendererGL.prototype.getCachedShader( - constants.DILATE,readFileSync(join( - __dirname, '/shaders/filters/dilate.frag'), 'utf-8')), - [constants.BLUR]:p5.RendererGL.prototype.getCachedShader( - constants.BLUR,readFileSync(join( - __dirname, '/shaders/filters/blur.frag'), 'utf-8')), - [constants.POSTERIZE]:p5.RendererGL.prototype.getCachedShader( - constants.POSTERIZE,readFileSync(join( - __dirname, '/shaders/filters/posterize.frag'), 'utf-8')), - [constants.OPAQUE]:p5.RendererGL.prototype.getCachedShader( - constants.OPAQUE,readFileSync(join( - __dirname, '/shaders/filters/opaque.frag'), 'utf-8')), - [constants.INVERT]:p5.RendererGL.prototype.getCachedShader( - constants.INVERT,readFileSync(join( - __dirname, '/shaders/filters/invert.frag'), 'utf-8')), - [constants.THRESHOLD]:p5.RendererGL.prototype.getCachedShader( - constants.THRESHOLD,readFileSync(join( - __dirname, '/shaders/filters/threshold.frag'), 'utf-8')) -}; - -const filterShaderVert = p5.RendererGL.prototype.getCachedShader( - 'filterShaderVert',readFileSync(join( - __dirname, '/shaders/filters/default.vert'), 'utf-8')); +let defaultShaders={}; /** * @module Rendering @@ -503,6 +376,22 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this._pInst._setProperty('drawingContext', this.drawingContext); this._pInst.shaderCache={}; + this.getCachedShader = + function (shaderKey, vertexShaderSource, fragmentShaderSource) { + if (!this._pInst.shaderCache) { + this._pInst.shaderCache = {}; // ensures a unique shaderCache for each instance of p5.RendererGL + } + if (!this._pInst.shaderCache[shaderKey]) { + const vertexShader = this._pInst.createShader( + this._pInst.VERTEX_SHADER, vertexShaderSource); + const fragmentShader = this._pInst.createShader( + this._pInst.FRAGMENT_SHADER, fragmentShaderSource); + + this._pInst.shaderCache[shaderKey] = this._pInst.createShaderProgram( + vertexShader, fragmentShader); + } + return this._pInst.shaderCache[shaderKey]; + }; // erasing this._isErasing = false; @@ -891,6 +780,122 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this._pInst, !isPGraphics ); + + + const lightingShader = renderer.getCachedShader('lightingShader',readFileSync( + join(__dirname, '/shaders/lighting.glsl'), + 'utf-8' + )); + const webgl2CompatibilityShader = readFileSync( + join(__dirname, '/shaders/webgl2Compatibility.glsl'), + 'utf-8' + ); + + defaultShaders = { + immediateVert: renderer.getCachedShader('immediateVert',readFileSync( + join(__dirname, '/shaders/immediate.vert'), + 'utf-8' + )), + vertexColorVert: renderer.getCachedShader('vertexColorVert',readFileSync( + join(__dirname, '/shaders/vertexColor.vert'), + 'utf-8' + )), + vertexColorFrag: renderer.getCachedShader('vertexColorFrag',readFileSync( + join(__dirname, '/shaders/vertexColor.frag'), + 'utf-8' + )), + normalVert: renderer.getCachedShader('normalVert',readFileSync( + join(__dirname, '/shaders/normal.vert'), 'utf-8' + )), + normalFrag: renderer.getCachedShader('normalFrag',readFileSync( + join(__dirname, '/shaders/normal.frag'), 'utf-8' + )), + basicFrag: renderer.getCachedShader('basicFrag',readFileSync( + join(__dirname, '/shaders/basic.frag'), 'utf-8' + )), + lightVert: renderer.getCachedShader('lightVert',lightingShader + readFileSync( + join(__dirname, '/shaders/light.vert'), 'utf-8' + )), + lightTextureFrag:renderer.getCachedShader('lightTextureFrag', readFileSync( + join(__dirname, '/shaders/light_texture.frag'),'utf-8' + )), + phongVert: renderer.getCachedShader('phongVert',readFileSync( + join(__dirname, '/shaders/phong.vert'), 'utf-8' + )), + phongFrag: renderer.getCachedShader('phongFrag', lightingShader + readFileSync( + join(__dirname, '/shaders/phong.frag'), 'utf-8' + )), + fontVert: renderer.getCachedShader('fontVert',readFileSync( + join(__dirname, '/shaders/font.vert'), 'utf-8' + )), + fontFrag: renderer.getCachedShader('fontFrag',readFileSync( + join(__dirname, '/shaders/font.frag'), 'utf-8' + )), + lineVert: renderer.getCachedShader('lineVert',lineDefs + readFileSync( + join(__dirname, '/shaders/line.vert'), 'utf-8' + )), + lineFrag : renderer.getCachedShader('lineFrag',lineDefs + readFileSync( + join(__dirname, '/shaders/line.frag'), 'utf-8' + )), + pointVert:renderer.getCachedShader('pointVert', readFileSync( + join(__dirname, '/shaders/point.vert'), 'utf-8' + )), + pointFrag:renderer.getCachedShader('pointFrag', readFileSync( + join(__dirname, '/shaders/point.frag'), 'utf-8' + )), + imageLightVert:renderer.getCachedShader('imageLightVert', readFileSync( + join(__dirname, '/shaders/imageLight.vert'), 'utf-8' + )), + imageLightDiffusedFrag:renderer.getCachedShader('imageLightDiffusedFrag', readFileSync( + join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8' + )), + imageLightSpecularFrag:renderer.getCachedShader('imageLightSpecularFrag', readFileSync( + join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8' + )), + cubemapVertexShader:renderer.getCachedShader('cubemapVertexShader',readFileSync( + join(__dirname,'/shaders/cubeVertex.vert'),'utf8' + )), + cubemapFragmentShader:renderer.getCachedShader('cubemapFragmentShader',readFileSync( + join(__dirname,'/shaders/cubeFragment.frag'),'utf8' + )) + }; + for (const key in defaultShaders) { + defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key]; + } + + const filterShaderFrags = { + [constants.GRAY]:renderer.getCachedShader( + constants.GRAY,readFileSync(join( + __dirname, '/shaders/filters/gray.frag'), 'utf-8')), + [constants.ERODE]:renderer.getCachedShader( + constants.ERODE,readFileSync(join( + __dirname, '/shaders/filters/erode.frag'), 'utf-8')), + [constants.DILATE]:renderer.getCachedShader( + constants.DILATE,readFileSync(join( + __dirname, '/shaders/filters/dilate.frag'), 'utf-8')), + [constants.BLUR]:renderer.getCachedShader( + constants.BLUR,readFileSync(join( + __dirname, '/shaders/filters/blur.frag'), 'utf-8')), + [constants.POSTERIZE]:renderer.getCachedShader( + constants.POSTERIZE,readFileSync(join( + __dirname, '/shaders/filters/posterize.frag'), 'utf-8')), + [constants.OPAQUE]:renderer.getCachedShader( + constants.OPAQUE,readFileSync(join( + __dirname, '/shaders/filters/opaque.frag'), 'utf-8')), + [constants.INVERT]:renderer.getCachedShader( + constants.INVERT,readFileSync(join( + __dirname, '/shaders/filters/invert.frag'), 'utf-8')), + [constants.THRESHOLD]:renderer.getCachedShader( + constants.THRESHOLD,readFileSync(join( + __dirname, '/shaders/filters/threshold.frag'), 'utf-8')) + }; + + const filterShaderVert = renderer.getCachedShader( + 'filterShaderVert',readFileSync(join( + __dirname, '/shaders/filters/default.vert'), 'utf-8')); + + + this._pInst._setProperty('_renderer', renderer); renderer.resize(w, h); renderer._applyDefaults(); From cc77e7e787b26242d4369abaf7d5a32f2d79e1f8 Mon Sep 17 00:00:00 2001 From: Garima Date: Sat, 20 Jan 2024 23:37:07 +0530 Subject: [PATCH 19/26] Minor fixes --- src/webgl/p5.RendererGL.js | 206 ++++++++++++++----------------------- 1 file changed, 80 insertions(+), 126 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 40e0e89c57..7d5ba4d509 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -33,7 +33,80 @@ defineStrokeJoinEnum('ROUND', 0); defineStrokeJoinEnum('MITER', 1); defineStrokeJoinEnum('BEVEL', 2); -let defaultShaders={}; +const lightingShader = readFileSync( + join(__dirname, '/shaders/lighting.glsl'), + 'utf-8' +); +const webgl2CompatibilityShader = readFileSync( + join(__dirname, '/shaders/webgl2Compatibility.glsl'), + 'utf-8' +); + +const defaultShaders = { + immediateVert: readFileSync( + join(__dirname, '/shaders/immediate.vert'), + 'utf-8' + ), + vertexColorVert: readFileSync( + join(__dirname, '/shaders/vertexColor.vert'), + 'utf-8' + ), + vertexColorFrag: readFileSync( + join(__dirname, '/shaders/vertexColor.frag'), + 'utf-8' + ), + normalVert: readFileSync(join(__dirname, '/shaders/normal.vert'), 'utf-8'), + normalFrag: readFileSync(join(__dirname, '/shaders/normal.frag'), 'utf-8'), + basicFrag: readFileSync(join(__dirname, '/shaders/basic.frag'), 'utf-8'), + lightVert: + lightingShader + + readFileSync(join(__dirname, '/shaders/light.vert'), 'utf-8'), + lightTextureFrag: readFileSync( + join(__dirname, '/shaders/light_texture.frag'), + 'utf-8' + ), + phongVert: readFileSync(join(__dirname, '/shaders/phong.vert'), 'utf-8'), + phongFrag: + lightingShader + + readFileSync(join(__dirname, '/shaders/phong.frag'), 'utf-8'), + fontVert: readFileSync(join(__dirname, '/shaders/font.vert'), 'utf-8'), + fontFrag: readFileSync(join(__dirname, '/shaders/font.frag'), 'utf-8'), + lineVert: + lineDefs + readFileSync(join(__dirname, '/shaders/line.vert'), 'utf-8'), + lineFrag: + lineDefs + readFileSync(join(__dirname, '/shaders/line.frag'), 'utf-8'), + 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'), + imageLightDiffusedFrag: readFileSync(join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8'), + imageLightSpecularFrag: readFileSync(join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8'), + cubemapVertexShader: readFileSync(join(__dirname, '/shaders/cubeVertex.vert'), 'utf-8'), + cubemapFragmentShader: readFileSync(join(__dirname, '/shaders/cubeFragment.frag'), 'utf-8') +}; +for (const key in defaultShaders) { + defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key]; +} + +const filterShaderFrags = { + [constants.GRAY]: + readFileSync(join(__dirname, '/shaders/filters/gray.frag'), 'utf-8'), + [constants.ERODE]: + readFileSync(join(__dirname, '/shaders/filters/erode.frag'), 'utf-8'), + [constants.DILATE]: + readFileSync(join(__dirname, '/shaders/filters/dilate.frag'), 'utf-8'), + [constants.BLUR]: + readFileSync(join(__dirname, '/shaders/filters/blur.frag'), 'utf-8'), + [constants.POSTERIZE]: + readFileSync(join(__dirname, '/shaders/filters/posterize.frag'), 'utf-8'), + [constants.OPAQUE]: + readFileSync(join(__dirname, '/shaders/filters/opaque.frag'), 'utf-8'), + [constants.INVERT]: + readFileSync(join(__dirname, '/shaders/filters/invert.frag'), 'utf-8'), + [constants.THRESHOLD]: + readFileSync(join(__dirname, '/shaders/filters/threshold.frag'), 'utf-8') +}; +const filterShaderVert = readFileSync(join(__dirname, '/shaders/filters/default.vert'), 'utf-8'); + /** * @module Rendering @@ -781,121 +854,6 @@ p5.RendererGL = class RendererGL extends p5.Renderer { !isPGraphics ); - - const lightingShader = renderer.getCachedShader('lightingShader',readFileSync( - join(__dirname, '/shaders/lighting.glsl'), - 'utf-8' - )); - const webgl2CompatibilityShader = readFileSync( - join(__dirname, '/shaders/webgl2Compatibility.glsl'), - 'utf-8' - ); - - defaultShaders = { - immediateVert: renderer.getCachedShader('immediateVert',readFileSync( - join(__dirname, '/shaders/immediate.vert'), - 'utf-8' - )), - vertexColorVert: renderer.getCachedShader('vertexColorVert',readFileSync( - join(__dirname, '/shaders/vertexColor.vert'), - 'utf-8' - )), - vertexColorFrag: renderer.getCachedShader('vertexColorFrag',readFileSync( - join(__dirname, '/shaders/vertexColor.frag'), - 'utf-8' - )), - normalVert: renderer.getCachedShader('normalVert',readFileSync( - join(__dirname, '/shaders/normal.vert'), 'utf-8' - )), - normalFrag: renderer.getCachedShader('normalFrag',readFileSync( - join(__dirname, '/shaders/normal.frag'), 'utf-8' - )), - basicFrag: renderer.getCachedShader('basicFrag',readFileSync( - join(__dirname, '/shaders/basic.frag'), 'utf-8' - )), - lightVert: renderer.getCachedShader('lightVert',lightingShader + readFileSync( - join(__dirname, '/shaders/light.vert'), 'utf-8' - )), - lightTextureFrag:renderer.getCachedShader('lightTextureFrag', readFileSync( - join(__dirname, '/shaders/light_texture.frag'),'utf-8' - )), - phongVert: renderer.getCachedShader('phongVert',readFileSync( - join(__dirname, '/shaders/phong.vert'), 'utf-8' - )), - phongFrag: renderer.getCachedShader('phongFrag', lightingShader + readFileSync( - join(__dirname, '/shaders/phong.frag'), 'utf-8' - )), - fontVert: renderer.getCachedShader('fontVert',readFileSync( - join(__dirname, '/shaders/font.vert'), 'utf-8' - )), - fontFrag: renderer.getCachedShader('fontFrag',readFileSync( - join(__dirname, '/shaders/font.frag'), 'utf-8' - )), - lineVert: renderer.getCachedShader('lineVert',lineDefs + readFileSync( - join(__dirname, '/shaders/line.vert'), 'utf-8' - )), - lineFrag : renderer.getCachedShader('lineFrag',lineDefs + readFileSync( - join(__dirname, '/shaders/line.frag'), 'utf-8' - )), - pointVert:renderer.getCachedShader('pointVert', readFileSync( - join(__dirname, '/shaders/point.vert'), 'utf-8' - )), - pointFrag:renderer.getCachedShader('pointFrag', readFileSync( - join(__dirname, '/shaders/point.frag'), 'utf-8' - )), - imageLightVert:renderer.getCachedShader('imageLightVert', readFileSync( - join(__dirname, '/shaders/imageLight.vert'), 'utf-8' - )), - imageLightDiffusedFrag:renderer.getCachedShader('imageLightDiffusedFrag', readFileSync( - join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8' - )), - imageLightSpecularFrag:renderer.getCachedShader('imageLightSpecularFrag', readFileSync( - join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8' - )), - cubemapVertexShader:renderer.getCachedShader('cubemapVertexShader',readFileSync( - join(__dirname,'/shaders/cubeVertex.vert'),'utf8' - )), - cubemapFragmentShader:renderer.getCachedShader('cubemapFragmentShader',readFileSync( - join(__dirname,'/shaders/cubeFragment.frag'),'utf8' - )) - }; - for (const key in defaultShaders) { - defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key]; - } - - const filterShaderFrags = { - [constants.GRAY]:renderer.getCachedShader( - constants.GRAY,readFileSync(join( - __dirname, '/shaders/filters/gray.frag'), 'utf-8')), - [constants.ERODE]:renderer.getCachedShader( - constants.ERODE,readFileSync(join( - __dirname, '/shaders/filters/erode.frag'), 'utf-8')), - [constants.DILATE]:renderer.getCachedShader( - constants.DILATE,readFileSync(join( - __dirname, '/shaders/filters/dilate.frag'), 'utf-8')), - [constants.BLUR]:renderer.getCachedShader( - constants.BLUR,readFileSync(join( - __dirname, '/shaders/filters/blur.frag'), 'utf-8')), - [constants.POSTERIZE]:renderer.getCachedShader( - constants.POSTERIZE,readFileSync(join( - __dirname, '/shaders/filters/posterize.frag'), 'utf-8')), - [constants.OPAQUE]:renderer.getCachedShader( - constants.OPAQUE,readFileSync(join( - __dirname, '/shaders/filters/opaque.frag'), 'utf-8')), - [constants.INVERT]:renderer.getCachedShader( - constants.INVERT,readFileSync(join( - __dirname, '/shaders/filters/invert.frag'), 'utf-8')), - [constants.THRESHOLD]:renderer.getCachedShader( - constants.THRESHOLD,readFileSync(join( - __dirname, '/shaders/filters/threshold.frag'), 'utf-8')) - }; - - const filterShaderVert = renderer.getCachedShader( - 'filterShaderVert',readFileSync(join( - __dirname, '/shaders/filters/default.vert'), 'utf-8')); - - - this._pInst._setProperty('_renderer', renderer); renderer.resize(w, h); renderer._applyDefaults(); @@ -1913,16 +1871,12 @@ p5.RendererGL = class RendererGL extends p5.Renderer { } _getCubemapShader() { - if (!this._defaultCubemapShader) { - this._defaultCubemapShader = new p5.Shader( - this, - this._webGL2CompatibilityPrefix('vert', 'mediump') + - defaultShaders.cubemapVertexShader, - this._webGL2CompatibilityPrefix('frag', 'mediump') + - defaultShaders.cubemapFragmentShader - ); - } - return this._defaultCubemapShader; + return this.getCachedShader('_defaultCubemapShader', + this._webGL2CompatibilityPrefix('vert', 'mediump') + + defaultShaders.cubemapVertexShader, + this._webGL2CompatibilityPrefix('frag', 'mediump') + + defaultShaders.cubemapFragmentShader + ); } _webGL2CompatibilityPrefix( From c12473831a122cbbcd544a529d0e07b5d6343675 Mon Sep 17 00:00:00 2001 From: Garima Date: Tue, 23 Jan 2024 10:16:32 +0530 Subject: [PATCH 20/26] Fragment shader error fixed --- src/webgl/shaders/cubeVertex.vert | 2 +- src/webgl/shaders/lighting.glsl | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/webgl/shaders/cubeVertex.vert b/src/webgl/shaders/cubeVertex.vert index 387c79e457..9ddbc434f6 100644 --- a/src/webgl/shaders/cubeVertex.vert +++ b/src/webgl/shaders/cubeVertex.vert @@ -1,5 +1,5 @@ // Adapted from: https://learnopengl.com/PBR/IBL/Diffuse-irradiance -layout (location = 0) in vec3 aPos; +layout (location = 0) IN vec3 aPos; OUT vec3 localPos; diff --git a/src/webgl/shaders/lighting.glsl b/src/webgl/shaders/lighting.glsl index e2f8b406e3..21f94aa6c2 100644 --- a/src/webgl/shaders/lighting.glsl +++ b/src/webgl/shaders/lighting.glsl @@ -114,7 +114,11 @@ vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){ vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0); // hardcoded world camera position vec3 worldNormal = normalize(vNormal * uCameraRotation); vec2 newTexCoor = mapTextureToNormal( worldNormal ); - vec4 texture = TEXTURE_CUBE( environmentMapDiffusedCubemap, newTexCoor ); + + // Sample the diffuse color from the environment map (cube map) using the transformed + // world-normal vector as the direction in the cube map space. + vec4 texture = TEXTURE_CUBE( environmentMapDiffusedCubemap, worldNormal ); + // this is to make the darker sections more dark // png and jpg usually flatten the brightness so it is to reverse that return mix(smoothstep(vec3(0.0), vec3(1.0), texture.xyz), vec3(0.0), metallic); From a585ef5266f9854a8010653df1c6bf45cd9337b5 Mon Sep 17 00:00:00 2001 From: Garima Date: Tue, 23 Jan 2024 12:05:17 +0530 Subject: [PATCH 21/26] Minor updates --- src/webgl/p5.RendererGL.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 33b5baead0..3eeea0597b 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -1971,19 +1971,21 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this._pInst.noLights(); this._pInst.rect(0, 0, width, height); - // Capture the rendered face and store it in the faces array - faces[i] = this._pInst.get(0, 0, width, height); }); + // Capture the rendered face and store it in the faces array + faces[i] = newFramebuffer.get(); } // Use the diffusedShader for rendering - newFramebuffer.draw(() => { - this._pInst.shader(this.diffusedShader); - this.diffusedShader.setUniform('environmentMap', input); - // Render the cubemap using the stored faces - for (let i = 0; i < 6; ++i) { - this._pInst.image(faces[i], 0, 0, width, height); - } - }); + this._pInst.shader(this.diffusedShader); + this.diffusedShader.setUniform('environmentMap', input); + + // Render the cubemap using the stored faces + for (let i = 0; i < 6; ++i) { + this._pInst.image(faces[i], 0, 0, width, height); + } + // Free the framebuffer resources + newFramebuffer.free(); + // Initialize CubemapTexture class with faces cubemapTexture=new CubemapTexture(this._pInst,faces, {}); cubemapTexture.init(faces); From f118a3b1e87746bc562905599cd3ba0b38b59139 Mon Sep 17 00:00:00 2001 From: Garima Date: Wed, 24 Jan 2024 20:20:15 +0530 Subject: [PATCH 22/26] some fixes --- src/webgl/p5.RendererGL.js | 39 +++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 3eeea0597b..f582aad2ef 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -448,20 +448,15 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.GL = this.drawingContext; this._pInst._setProperty('drawingContext', this.drawingContext); - this._pInst.shaderCache={}; + if (!this._pInst.shaderCache) { + this._pInst.shaderCache = {}; // ensures a unique shaderCache for each instance of p5.RendererGL + } this.getCachedShader = function (shaderKey, vertexShaderSource, fragmentShaderSource) { - if (!this._pInst.shaderCache) { - this._pInst.shaderCache = {}; // ensures a unique shaderCache for each instance of p5.RendererGL - } if (!this._pInst.shaderCache[shaderKey]) { - const vertexShader = this._pInst.createShader( - this._pInst.VERTEX_SHADER, vertexShaderSource); - const fragmentShader = this._pInst.createShader( - this._pInst.FRAGMENT_SHADER, fragmentShaderSource); - this._pInst.shaderCache[shaderKey] = this._pInst.createShaderProgram( - vertexShader, fragmentShader); + this._pInst.shaderCache[shaderKey] = this._pInst.createShader( + vertexShaderSource, fragmentShaderSource); } return this._pInst.shaderCache[shaderKey]; }; @@ -1955,16 +1950,30 @@ p5.RendererGL = class RendererGL extends p5.Renderer { defaultShaders.imageLightDiffusedFrag ); } + // // Assuming this.uMVMatrix is your 3D rotation matrix + // let captureViews = []; + + // // Create view matrices for each face based on the original view matrix (this.uMVMatrix) + // for (let i = 0; i < 6; ++i) { + // // Simply use the original view matrix for each face + // const faceViewMatrix = this.uMVMatrix.copy(); + + // // Add the resulting view matrix to the captureViews array + // captureViews.push(faceViewMatrix); + // } + // Create a shader for cubemap conversion const cubemapShader = this._getCubemapShader(); - + function useCubemapShader(){ + shader(cubemapShader); + } // Render each face of the cubemap for (let i = 0; i < 6; ++i) { newFramebuffer.draw(() => { - cubemapShader.use(); + useCubemapShader(); cubemapShader.setUniform('equirectangularMap', input); - cubemapShader.setUniform('projection', captureProjection); - cubemapShader.setUniform('view', captureViews[i]); + // cubemapShader.setUniform('projection', this.uPMatrix); + // cubemapShader.setUniform('view', captureViews[i]); this._pInst.noStroke(); this._pInst.rectMode(constants.CENTER); @@ -1984,7 +1993,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this._pInst.image(faces[i], 0, 0, width, height); } // Free the framebuffer resources - newFramebuffer.free(); + // newFramebuffer.free(); // Initialize CubemapTexture class with faces cubemapTexture=new CubemapTexture(this._pInst,faces, {}); From 5961be8dec125b6cb8d5c5f234ca8caea85f2ed5 Mon Sep 17 00:00:00 2001 From: Garima Date: Sat, 30 Mar 2024 17:23:30 +0530 Subject: [PATCH 23/26] Minor changes --- src/webgl/p5.RendererGL.js | 2 +- src/webgl/p5.Texture.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index f582aad2ef..b2086f462c 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -1996,7 +1996,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer { // newFramebuffer.free(); // Initialize CubemapTexture class with faces - cubemapTexture=new CubemapTexture(this._pInst,faces, {}); + cubemapTexture=new CubemapTexture(this,faces, {}); cubemapTexture.init(faces); this.diffusedTextures.set(input, cubemapTexture); return cubemapTexture; diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js index 7866c51935..ff1df04dc2 100644 --- a/src/webgl/p5.Texture.js +++ b/src/webgl/p5.Texture.js @@ -541,12 +541,17 @@ export class CubemapTexture extends p5.Texture { this.glTex = gl.createTexture(); this.bindTexture(); + + // Looping through each face and loading the data for (let faceIndex = 0; faceIndex < faces.length; faceIndex++) { - // Set up each face of the cubemap + // Setting up each face of the cubemap gl.texImage2D( gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, 0, this.glFormat, + this.width, + this.height, + 0, this.glFormat, this.glDataType, faces[faceIndex] From 4515c0906b63c3df82f187a6d22cdbe31c4fd30f Mon Sep 17 00:00:00 2001 From: Garima Date: Thu, 20 Jun 2024 17:55:08 +0530 Subject: [PATCH 24/26] Some changes with cubemap implementation --- src/webgl/p5.RendererGL.js | 210 +++++++++++++++++++++++++++---------- src/webgl/p5.Texture.js | 21 +++- 2 files changed, 173 insertions(+), 58 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index b2086f462c..e525bebe5c 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -107,6 +107,90 @@ const filterShaderFrags = { }; const filterShaderVert = readFileSync(join(__dirname, '/shaders/filters/default.vert'), 'utf-8'); +function lookAt(eye, target, up) { + let zAxis = normalize(subtractVectors(eye, target)); + let xAxis = normalize(cross(up, zAxis)); + let yAxis = cross(zAxis, xAxis); + + return [ + xAxis[0], yAxis[0], zAxis[0], 0, + xAxis[1], yAxis[1], zAxis[1], 0, + xAxis[2], yAxis[2], zAxis[2], 0, + -dot(xAxis, eye), -dot(yAxis, eye), -dot(zAxis, eye), 1 + ]; +} + +function normalize(v) { + let len = Math.hypot(v[0], v[1], v[2]); + return [v[0] / len, v[1] / len, v[2] / len]; +} + +function subtractVectors(a, b) { + return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; +} + +function cross(a, b) { + return [ + a[1] * b[2] - a[2] * b[1], + a[2] * b[0] - a[0] * b[2], + a[0] * b[1] - a[1] * b[0] + ]; +} + +function dot(a, b) { + return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; +} + +function renderCube() { + if (!this.cubeVAO) { + this.cubeVAO = this.GL.createVertexArray(); + this.cubeVBO = this.GL.createBuffer(); + this.GL.bindVertexArray(this.cubeVAO); + + const vertices = new Float32Array([ + // positions + -1.0, -1.0, -1.0,1.0, -1.0, -1.0,1.0, 1.0, -1.0,1.0, 1.0, -1.0, + -1.0, 1.0, -1.0, + -1.0, -1.0, -1.0, + + -1.0, -1.0, 1.0,1.0, -1.0, 1.0,1.0, 1.0, 1.0,1.0, 1.0, 1.0, + -1.0, 1.0, 1.0, + -1.0, -1.0, 1.0, + + -1.0, 1.0, 1.0, + -1.0, 1.0, -1.0, + -1.0, -1.0, -1.0, + -1.0, -1.0, -1.0, + -1.0, -1.0, 1.0, + -1.0, 1.0, 1.0, + + 1.0, 1.0, 1.0, + 1.0, 1.0, -1.0, + 1.0, -1.0, -1.0, + 1.0, -1.0, -1.0, + 1.0, -1.0, 1.0, + 1.0, 1.0, 1.0, + + -1.0, -1.0, -1.0,1.0, -1.0, -1.0,1.0, -1.0, 1.0,1.0, -1.0, 1.0, + -1.0, -1.0, 1.0, + -1.0, -1.0, -1.0, + + -1.0, 1.0, -1.0,1.0, 1.0, -1.0,1.0, 1.0, 1.0,1.0, 1.0, 1.0, + -1.0, 1.0, 1.0, + -1.0, 1.0, -1.0 + ]); + + this.GL.bindBuffer(this.GL.ARRAY_BUFFER, this.cubeVBO); + this.GL.bufferData(this.GL.ARRAY_BUFFER, vertices, this.GL.STATIC_DRAW); + this.GL.enableVertexAttribArray(0); + this.GL.vertexAttribPointer(0, 3, this.GL.FLOAT, false, 3 * 4, 0); + this.GL.bindVertexArray(null); + } + + this.GL.bindVertexArray(this.cubeVAO); + this.GL.drawArrays(this.GL.TRIANGLES, 0, 36); + this.GL.bindVertexArray(null); +} /** * @module Rendering @@ -1927,78 +2011,92 @@ p5.RendererGL = class RendererGL extends p5.Renderer { * maps a p5.Image used by imageLight() to a p5.Framebuffer */ getDiffusedTexture(input) { - // if one already exists for a given input image + // If one already exists for a given input image if (this.diffusedTextures.get(input) != null) { return this.diffusedTextures.get(input); } - // if not, only then create one - let newFramebuffer; - // hardcoded to 200px, because it's going to be blurry and smooth - let smallWidth = 200; - let width = smallWidth; - let height = Math.floor(smallWidth * (input.height / input.width)); - let cubemapTexture; - const faces = []; - newFramebuffer = this._pInst.createFramebuffer({ - width, height, density: 1 - }); - // create framebuffer is like making a new sketch, all functions on main - // sketch it would be available on framebuffer - if (!this.diffusedShader) { - this.diffusedShader = this._pInst.createShader( - defaultShaders.imageLightVert, - defaultShaders.imageLightDiffusedFrag + + // Create a cubemap texture + const envCubemap = this.GL.createTexture(); + this.GL.bindTexture(this.GL.TEXTURE_CUBE_MAP, envCubemap); + + // Loop through each face and allocate storage + for (let i = 0; i < 6; ++i) { + this.GL.texImage2D( + this.GL.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, + this.GL.RGB16F, 512, 512, 0, + this.GL.RGB, this.GL.FLOAT, null ); } - // // Assuming this.uMVMatrix is your 3D rotation matrix - // let captureViews = []; - - // // Create view matrices for each face based on the original view matrix (this.uMVMatrix) - // for (let i = 0; i < 6; ++i) { - // // Simply use the original view matrix for each face - // const faceViewMatrix = this.uMVMatrix.copy(); - // // Add the resulting view matrix to the captureViews array - // captureViews.push(faceViewMatrix); - // } + // Set parameters for the cubemap + this.GL.texParameteri(this.GL.TEXTURE_CUBE_MAP + , this.GL.TEXTURE_WRAP_S, this.GL.CLAMP_TO_EDGE); + this.GL.texParameteri(this.GL.TEXTURE_CUBE_MAP + , this.GL.TEXTURE_WRAP_T, this.GL.CLAMP_TO_EDGE); + this.GL.texParameteri(this.GL.TEXTURE_CUBE_MAP + , this.GL.TEXTURE_WRAP_R, this.GL.CLAMP_TO_EDGE); + this.GL.texParameteri(this.GL.TEXTURE_CUBE_MAP + , this.GL.TEXTURE_MIN_FILTER, this.GL.LINEAR); + this.GL.texParameteri(this.GL.TEXTURE_CUBE_MAP + , this.GL.TEXTURE_MAG_FILTER, this.GL.LINEAR); + + // Set up view matrices for each face + const captureViews = [ + lookAt([0, 0, 0], [1, 0, 0], [0, -1, 0]), // Positive X + lookAt([0, 0, 0], [-1, 0, 0], [0, -1, 0]), // Negative X + lookAt([0, 0, 0], [0, 1, 0], [0, 0, 1]), // Positive Y + lookAt([0, 0, 0], [0, -1, 0], [0, 0, -1]), // Negative Y + lookAt([0, 0, 0], [0, 0, 1], [0, -1, 0]), // Positive Z + lookAt([0, 0, 0], [0, 0, -1], [0, -1, 0]) // Negative Z + ]; - // Create a shader for cubemap conversion + // Get the cubemap shader const cubemapShader = this._getCubemapShader(); - function useCubemapShader(){ - shader(cubemapShader); - } + this._pInst.shader(cubemapShader); + cubemapShader.setUniform('equirectangularMap', 0); + + // Define captureProjection as a 4x4 projection matrix + let captureProjection = new p5.Matrix(); + captureProjection.perspective(Math.PI / 2.0, 1.0, 0.1, 10.0); + + cubemapShader.setUniform('projection', captureProjection.mat4); + + this.GL.activeTexture(this.GL.TEXTURE0); + this.GL.bindTexture(this.GL.TEXTURE_2D, input); + + // Create a new framebuffer + let newFramebuffer = this._pInst.createFramebuffer({ + width: 512, + height: 512, + density: 1 + }); + + this.GL.bindFramebuffer(this.GL.FRAMEBUFFER, newFramebuffer.handle); + // Render each face of the cubemap for (let i = 0; i < 6; ++i) { - newFramebuffer.draw(() => { - useCubemapShader(); - cubemapShader.setUniform('equirectangularMap', input); - // cubemapShader.setUniform('projection', this.uPMatrix); - // cubemapShader.setUniform('view', captureViews[i]); + this.GL.framebufferTexture2D( + this.GL.FRAMEBUFFER, + this.GL.COLOR_ATTACHMENT0, + this.GL.TEXTURE_CUBE_MAP_POSITIVE_X + i, + envCubemap, + 0 + ); - this._pInst.noStroke(); - this._pInst.rectMode(constants.CENTER); - this._pInst.noLights(); - this._pInst.rect(0, 0, width, height); + this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT); - }); - // Capture the rendered face and store it in the faces array - faces[i] = newFramebuffer.get(); - } - // Use the diffusedShader for rendering - this._pInst.shader(this.diffusedShader); - this.diffusedShader.setUniform('environmentMap', input); + cubemapShader.setUniform('view', captureViews[i].mat4); - // Render the cubemap using the stored faces - for (let i = 0; i < 6; ++i) { - this._pInst.image(faces[i], 0, 0, width, height); + renderCube(); // Renders a 1x1 cube } - // Free the framebuffer resources - // newFramebuffer.free(); - // Initialize CubemapTexture class with faces - cubemapTexture=new CubemapTexture(this,faces, {}); - cubemapTexture.init(faces); + this.GL.bindFramebuffer(this.GL.FRAMEBUFFER, null); + + // Initialize CubemapTexture class with the cubemap texture + let cubemapTexture = new CubemapTexture(this, envCubemap, {}); this.diffusedTextures.set(input, cubemapTexture); + return cubemapTexture; } diff --git a/src/webgl/p5.Texture.js b/src/webgl/p5.Texture.js index ff1df04dc2..613ef252e8 100644 --- a/src/webgl/p5.Texture.js +++ b/src/webgl/p5.Texture.js @@ -129,6 +129,8 @@ p5.Texture = class Texture { textureData = this.src.elt; } else if (this.isImageData) { textureData = this.src; + } else if (this.isCubemapTexture) { + textureData = this.src; } return textureData; } @@ -524,6 +526,12 @@ export function checkWebGLCapabilities({ GL, webglVersion }) { export class CubemapTexture extends p5.Texture { constructor(renderer, faces, settings) { super(renderer, faces, settings); + + this.isCubemapTexture = false; // Default value + + if (faces instanceof CubemapTexture) { + this.isCubemapTexture = true; + } } glFilter(_filter) { @@ -543,10 +551,19 @@ export class CubemapTexture extends p5.Texture { this.bindTexture(); // Looping through each face and loading the data - for (let faceIndex = 0; faceIndex < faces.length; faceIndex++) { + const targets = [ + gl.TEXTURE_CUBE_MAP_POSITIVE_X, + gl.TEXTURE_CUBE_MAP_NEGATIVE_X, + gl.TEXTURE_CUBE_MAP_POSITIVE_Y, + gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, + gl.TEXTURE_CUBE_MAP_POSITIVE_Z, + gl.TEXTURE_CUBE_MAP_NEGATIVE_Z + ]; + // Looping through each face and loading the data + for (let faceIndex = 0; faceIndex < targets.length; faceIndex++) { // Setting up each face of the cubemap gl.texImage2D( - gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, + targets[faceIndex], 0, this.glFormat, this.width, From be6d27f6c345046a99f1a9dd1e8d2fc707488ab4 Mon Sep 17 00:00:00 2001 From: Garima Date: Mon, 24 Jun 2024 12:06:35 +0530 Subject: [PATCH 25/26] Minor changes --- src/webgl/p5.RendererGL.js | 106 +++--------------------------- src/webgl/shaders/cubeVertex.vert | 10 +-- 2 files changed, 13 insertions(+), 103 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index e525bebe5c..896dd918da 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -107,89 +107,12 @@ const filterShaderFrags = { }; const filterShaderVert = readFileSync(join(__dirname, '/shaders/filters/default.vert'), 'utf-8'); -function lookAt(eye, target, up) { - let zAxis = normalize(subtractVectors(eye, target)); - let xAxis = normalize(cross(up, zAxis)); - let yAxis = cross(zAxis, xAxis); - - return [ - xAxis[0], yAxis[0], zAxis[0], 0, - xAxis[1], yAxis[1], zAxis[1], 0, - xAxis[2], yAxis[2], zAxis[2], 0, - -dot(xAxis, eye), -dot(yAxis, eye), -dot(zAxis, eye), 1 - ]; -} - -function normalize(v) { - let len = Math.hypot(v[0], v[1], v[2]); - return [v[0] / len, v[1] / len, v[2] / len]; -} - -function subtractVectors(a, b) { - return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; -} - -function cross(a, b) { - return [ - a[1] * b[2] - a[2] * b[1], - a[2] * b[0] - a[0] * b[2], - a[0] * b[1] - a[1] * b[0] - ]; -} - -function dot(a, b) { - return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; -} function renderCube() { - if (!this.cubeVAO) { - this.cubeVAO = this.GL.createVertexArray(); - this.cubeVBO = this.GL.createBuffer(); - this.GL.bindVertexArray(this.cubeVAO); - - const vertices = new Float32Array([ - // positions - -1.0, -1.0, -1.0,1.0, -1.0, -1.0,1.0, 1.0, -1.0,1.0, 1.0, -1.0, - -1.0, 1.0, -1.0, - -1.0, -1.0, -1.0, - - -1.0, -1.0, 1.0,1.0, -1.0, 1.0,1.0, 1.0, 1.0,1.0, 1.0, 1.0, - -1.0, 1.0, 1.0, - -1.0, -1.0, 1.0, - - -1.0, 1.0, 1.0, - -1.0, 1.0, -1.0, - -1.0, -1.0, -1.0, - -1.0, -1.0, -1.0, - -1.0, -1.0, 1.0, - -1.0, 1.0, 1.0, - - 1.0, 1.0, 1.0, - 1.0, 1.0, -1.0, - 1.0, -1.0, -1.0, - 1.0, -1.0, -1.0, - 1.0, -1.0, 1.0, - 1.0, 1.0, 1.0, - - -1.0, -1.0, -1.0,1.0, -1.0, -1.0,1.0, -1.0, 1.0,1.0, -1.0, 1.0, - -1.0, -1.0, 1.0, - -1.0, -1.0, -1.0, - - -1.0, 1.0, -1.0,1.0, 1.0, -1.0,1.0, 1.0, 1.0,1.0, 1.0, 1.0, - -1.0, 1.0, 1.0, - -1.0, 1.0, -1.0 - ]); - - this.GL.bindBuffer(this.GL.ARRAY_BUFFER, this.cubeVBO); - this.GL.bufferData(this.GL.ARRAY_BUFFER, vertices, this.GL.STATIC_DRAW); - this.GL.enableVertexAttribArray(0); - this.GL.vertexAttribPointer(0, 3, this.GL.FLOAT, false, 3 * 4, 0); - this.GL.bindVertexArray(null); - } - - this.GL.bindVertexArray(this.cubeVAO); - this.GL.drawArrays(this.GL.TRIANGLES, 0, 36); - this.GL.bindVertexArray(null); + push(); // Save the current state of the drawing + translate(0, 0, 0); // Translate to the position where you want to draw the cube + box(2); // Draw a cube with a size of 2 units (you can adjust the size) + pop(); // Restore the previous state of the drawing } /** @@ -2041,26 +1964,15 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.GL.texParameteri(this.GL.TEXTURE_CUBE_MAP , this.GL.TEXTURE_MAG_FILTER, this.GL.LINEAR); - // Set up view matrices for each face - const captureViews = [ - lookAt([0, 0, 0], [1, 0, 0], [0, -1, 0]), // Positive X - lookAt([0, 0, 0], [-1, 0, 0], [0, -1, 0]), // Negative X - lookAt([0, 0, 0], [0, 1, 0], [0, 0, 1]), // Positive Y - lookAt([0, 0, 0], [0, -1, 0], [0, 0, -1]), // Negative Y - lookAt([0, 0, 0], [0, 0, 1], [0, -1, 0]), // Positive Z - lookAt([0, 0, 0], [0, 0, -1], [0, -1, 0]) // Negative Z - ]; - // Get the cubemap shader const cubemapShader = this._getCubemapShader(); this._pInst.shader(cubemapShader); - cubemapShader.setUniform('equirectangularMap', 0); - // Define captureProjection as a 4x4 projection matrix - let captureProjection = new p5.Matrix(); - captureProjection.perspective(Math.PI / 2.0, 1.0, 0.1, 10.0); + // Convert p5.Image to WebGLTexture + const texture = new p5.Texture(this, input); + const webglTexture = texture.glTex; - cubemapShader.setUniform('projection', captureProjection.mat4); + cubemapShader.setUniform('equirectangularMap', webglTexture); this.GL.activeTexture(this.GL.TEXTURE0); this.GL.bindTexture(this.GL.TEXTURE_2D, input); @@ -2086,8 +1998,6 @@ p5.RendererGL = class RendererGL extends p5.Renderer { this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT); - cubemapShader.setUniform('view', captureViews[i].mat4); - renderCube(); // Renders a 1x1 cube } diff --git a/src/webgl/shaders/cubeVertex.vert b/src/webgl/shaders/cubeVertex.vert index 9ddbc434f6..a6a066c7b3 100644 --- a/src/webgl/shaders/cubeVertex.vert +++ b/src/webgl/shaders/cubeVertex.vert @@ -1,13 +1,13 @@ // Adapted from: https://learnopengl.com/PBR/IBL/Diffuse-irradiance -layout (location = 0) IN vec3 aPos; +layout (location = 0) IN vec3 aPosition; OUT vec3 localPos; -uniform mat4 projection; -uniform mat4 view; +uniform mat4 uProjectionMatrix; +uniform mat4 uModelViewMatrix; void main() { - localPos = aPos; - gl_Position = projection * view * vec4(localPos, 1.0); + localPos = aPosition; + gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(localPos, 1.0); } From 6dc991684e886873a18d4477526d76d832d66cb4 Mon Sep 17 00:00:00 2001 From: Garima Date: Mon, 24 Jun 2024 22:17:02 +0530 Subject: [PATCH 26/26] fix --- src/webgl/shaders/cubeFragment.frag | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webgl/shaders/cubeFragment.frag b/src/webgl/shaders/cubeFragment.frag index 025e538820..bb49851151 100644 --- a/src/webgl/shaders/cubeFragment.frag +++ b/src/webgl/shaders/cubeFragment.frag @@ -16,7 +16,7 @@ vec2 SampleSphericalMap(vec3 v) void main() { vec2 uv = SampleSphericalMap(normalize(localPos)); - vec3 color = texture(equirectangularMap, uv).rgb; + vec3 color = TEXTURE(equirectangularMap, uv).rgb; OUT_COLOR = vec4(color, 1.0); }