Addresses issue #6587

src/webgl/p5.RendererGL.js

@@ -9,10 +9,11 @@ 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 = {};
+
 let lineDefs = '';
 const defineStrokeCapEnum = function (key, val) {
   lineDefs += `#define STROKE_CAP_${key} ${val}\n`;
@@ -78,7 +79,9 @@ const defaultShaders = {
   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')
+  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];
@@ -104,6 +107,7 @@ const filterShaderFrags = {
 };
 const filterShaderVert = readFileSync(join(__dirname, '/shaders/filters/default.vert'), 'utf-8');
 
+
 /**
  * @module Rendering
  * @submodule Rendering
@@ -444,6 +448,24 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     this.GL = this.drawingContext;
     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;
 
@@ -564,6 +586,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;
@@ -830,6 +853,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
       this._pInst,
       !isPGraphics
     );
+
     this._pInst._setProperty('_renderer', renderer);
     renderer.resize(w, h);
     renderer._applyDefaults();
@@ -1846,6 +1870,15 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     return this._defaultFontShader;
   }
 
+  _getCubemapShader() {
+    return this.getCachedShader('_defaultCubemapShader',
+      this._webGL2CompatibilityPrefix('vert', 'mediump') +
+    defaultShaders.cubemapVertexShader,
+      this._webGL2CompatibilityPrefix('frag', 'mediump') +
+    defaultShaders.cubemapFragmentShader
+    );
+  }
+
   _webGL2CompatibilityPrefix(
     shaderType,
     floatPrecision
@@ -1908,6 +1941,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
     });
@@ -1919,23 +1954,47 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
         defaultShaders.imageLightDiffusedFrag
       );
     }
+    // Create a shader for cubemap conversion
+    const cubemapShader = this._getCubemapShader();
+
+    // 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
@@ -2112,7 +2171,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.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);
@@ -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);

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
    */
@@ -510,12 +510,65 @@ export function checkWebGLCapabilities({ GL, webglVersion }) {
     : gl.getExtension('OES_texture_half_float');
   const supportsHalfFloatLinear = supportsHalfFloat &&
     gl.getExtension('OES_texture_half_float_linear');
+  const supportsCubemap = (webglVersion === constants.WEBGL2)
+    || (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.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);
+}

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

src/webgl/shaders/lighting.glsl

@@ -40,7 +40,7 @@ uniform float uQuadraticAttenuation;
 // boolean to initiate the calculateImageDiffuse and calculateImageSpecular
 uniform bool uUseImageLight;
 // texture for use in calculateImageDiffuse
-uniform sampler2D environmentMapDiffused;
+uniform samplerCube environmentMapDiffusedCubemap;
 // texture for use in calculateImageSpecular
 uniform sampler2D environmentMapSpecular;
 // roughness for use in calculateImageSpecular
@@ -114,7 +114,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 = 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 mix(smoothstep(vec3(0.0), vec3(1.0), texture.xyz), vec3(0.0), metallic);

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