Addresses issue #6587

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,114 @@ 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('lightingShader',readFileSync(
   join(__dirname, '/shaders/lighting.glsl'),
   'utf-8'
-);
-const webgl2CompatibilityShader = readFileSync(
+));
+const webgl2CompatibilityShader = getCachedShader('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(
+  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'
+  )),
+  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) {
   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
@@ -1848,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
@@ -1925,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) {

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;

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,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,

src/webgl/shaders/cubeFragment.glsl → src/webgl/shaders/cubeFragment.frag

@@ -1,6 +1,5 @@
-#version 330 core
-out vec4 FragColor;
-in vec3 localPos;
+// Adapted from: https://learnopengl.com/PBR/IBL/Diffuse-irradiance
+IN vec3 localPos;
 
 uniform sampler2D equirectangularMap;
 
@@ -19,5 +18,5 @@ void main()
     vec2 uv = SampleSphericalMap(normalize(localPos));
     vec3 color = texture(equirectangularMap, uv).rgb;
 
-    FragColor = vec4(color, 1.0);
+    OUT_COLOR = vec4(color, 1.0);
 }

src/webgl/shaders/cubeVertex.glsl → src/webgl/shaders/cubeVertex.vert

@@ -1,7 +1,7 @@
-#version 330 core
+// Adapted from:  https://learnopengl.com/PBR/IBL/Diffuse-irradiance
 layout (location = 0) in vec3 aPos;
 
-out vec3 localPos;
+OUT vec3 localPos;
 
 uniform mat4 projection;
 uniform mat4 view;

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

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