Start to convert panorama to strands

Author: davepagurek

preview/index.html

@@ -32,7 +32,7 @@
       let env;
 
       p.setup = async function () {
-        await p.createCanvas(400, 400, p.WEBGL);
+        await p.createCanvas(400, 400, p.WEBGPU);
         env = await p.loadImage('img/spheremap.jpg');
         font = await p.loadFont(
           'font/PlayfairDisplay.ttf'
@@ -118,6 +118,7 @@
         p.orbitControl();
         const t = p.millis() * 0.002;
         p.background(200);
+        p.panorama(env);
         p.push();
         p.imageLight(env);
         p.shader(sh);

src/core/constants.js

@@ -1148,6 +1148,13 @@ export const IMAGE = 'image';
 
 // WEBGL TEXTURE WRAP AND FILTERING
 // LINEAR already exists above
+/**
+ * @typedef {'linear_mipmap'} LINEAR_MIPMAP
+ * @property {LINEAR_MIPMAP} LINEAR_MIPMAP
+ * @final
+ * @private
+ */
+export const LINEAR_MIPMAP = 'linear_mipmap';
 /**
  * @typedef {'nearest'} NEAREST
  * @property {NEAREST} NEAREST

src/core/p5.Renderer3D.js

@@ -1932,6 +1932,50 @@ export class Renderer3D extends Renderer {
     return tex;
   }
 
+  _getSphereMapping(img) {
+    if (!this.sphereMapping) {
+      const p5 = this._pInst;
+      this.sphereMapping = this.baseFilterShader().modify(() => {
+        const uEnvMap = p5.uniformTexture();
+        const uFovY = p5.uniformFloat();
+        const uAspect = p5.uniformFloat();
+        // Hack: we don't have matrix uniforms yet; use three vectors
+        const uN1 = p5.uniformVec3();
+        const uN2 = p5.uniformVec3();
+        const uN3 = p5.uniformVec3();
+        p5.getColor((inputs) => {
+          const uFovX = uFovY * uAspect;
+          const angleY = p5.mix(uFovY/2.0,  -uFovY/2.0, inputs.texCoord.y);
+          const angleX = p5.mix(uFovX/2.0, -uFovX/2.0, inputs.texCoord.x);
+          let rotatedNormal = p5.normalize([angleX, angleY, 1]);
+          rotatedNormal = [
+            p5.dot(rotatedNormal, uN1),
+            p5.dot(rotatedNormal, uN2),
+            p5.dot(rotatedNormal, uN3),
+          ];
+          const temp = rotatedNormal.z;
+          rotatedNormal.z = rotatedNormal.x;
+          rotatedNormal.x = -temp;
+          const suv = [
+            0.5 + 0.5 * (-rotatedNormal.y),
+            p5.atan(rotatedNormal.z, rotatedNormal.x) / (2.0 * p5.PI) + 0.5
+          ];
+          return p5.getTexture(uEnvMap, suv);
+        })
+      }, { p5 });
+    }
+    this.scratchMat3.inverseTranspose4x4(this.states.uViewMatrix);
+    this.scratchMat3.invert(this.scratchMat3); // uNMMatrix is 3x3
+    this.sphereMapping.setUniform("uFovY", this.states.curCamera.cameraFOV);
+    this.sphereMapping.setUniform("uAspect", this.states.curCamera.aspectRatio);
+    // this.sphereMapping.setUniform("uNewNormalMatrix", this.scratchMat3.mat3);
+    this.sphereMapping.setUniform("uN1", this.scratchMat3.mat3.slice(0, 3));
+    this.sphereMapping.setUniform("uN2", this.scratchMat3.mat3.slice(3, 6));
+    this.sphereMapping.setUniform("uN3", this.scratchMat3.mat3.slice(6));
+    this.sphereMapping.setUniform("uEnvMap", img);
+    return this.sphereMapping;
+  }
+
   /*
    * Abstract methods to be implemented by specific renderers
    */

src/webgl/p5.RendererGL.js

@@ -674,20 +674,6 @@ class RendererGL extends Renderer3D {
    * and the shader must be valid in that context.
    */
 
-  // TODO move to super class
-  _getSphereMapping(img) {
-    if (!this.sphereMapping) {
-      this.sphereMapping = this._pInst.createFilterShader(sphereMapping);
-    }
-    this.scratchMat3.inverseTranspose4x4(this.states.uViewMatrix);
-    this.scratchMat3.invert(this.scratchMat3); // uNMMatrix is 3x3
-    this.sphereMapping.setUniform("uFovY", this.states.curCamera.cameraFOV);
-    this.sphereMapping.setUniform("uAspect", this.states.curCamera.aspectRatio);
-    this.sphereMapping.setUniform("uNewNormalMatrix", this.scratchMat3.mat3);
-    this.sphereMapping.setUniform("uEnvMap", img);
-    return this.sphereMapping;
-  }
-
   baseMaterialShader() {
     if (!this._pInst._glAttributes.perPixelLighting) {
       throw new Error(
@@ -932,19 +918,23 @@ class RendererGL extends Renderer3D {
    * Create final MipmapTexture from collected ImageData for WebGL
    */
   _finalizeMipmapTexture(mipmapData) {
-    return new MipmapTexture(this, mipmapData.levels, {});
+    return new MipmapTexture(this, mipmapData.levels, {
+      minFilter: constants.LINEAR_MIPMAP,
+      magFilter: constants.LINEAR,
+    });
   }
 
   createMipmapTextureHandle({ levels, format, dataType, width, height }) {
     const gl = this.GL;
     const texture = gl.createTexture();
 
     gl.bindTexture(gl.TEXTURE_2D, texture);
-    
+
     // Determine GL format and data type
     const glFormat = gl.RGBA;
     const glDataType = gl.UNSIGNED_BYTE;
-    
+
+    console.log(levels)
     for (let level = 0; level < levels.length; level++) {
       gl.texImage2D(
         gl.TEXTURE_2D,
@@ -961,7 +951,7 @@ class RendererGL extends Renderer3D {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
 
     gl.bindTexture(gl.TEXTURE_2D, null);
-    
+
     return { texture, glFormat, glDataType };
   }
 

src/webgl/utils.js

@@ -104,7 +104,8 @@ export function readPixelWebGL(gl, framebuffer, x, y, format, type, flipY) {
 export function setWebGLTextureParams(texture, gl, webglVersion) {
   texture.bindTexture();
   const glMinFilter =
-    texture.minFilter === constants.NEAREST ? gl.NEAREST : gl.LINEAR;
+    texture.minFilter === constants.NEAREST ? gl.NEAREST :
+      texture.minFilter === constants.LINEAR_MIPMAP ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR;
   const glMagFilter =
     texture.magFilter === constants.NEAREST ? gl.NEAREST : gl.LINEAR;