Addresses issue #6587

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]

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;

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);
+}

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);
+}

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);