Merge pull request #8424 from processing/fix/getTexture

Make sure getTexture works in vertex shaders

Author: davepagurek

src/webgl/p5.RendererGL.js

@@ -746,9 +746,9 @@ class RendererGL extends Renderer3D {
     if (!this._defaultNormalShader) {
       this._defaultNormalShader = new Shader(
         this,
-        this._webGL2CompatibilityPrefix("vert", "mediump") +
+        this._webGL2CompatibilityPrefix("vert", "highp") +
           defaultShaders.normalVert,
-        this._webGL2CompatibilityPrefix("frag", "mediump") +
+        this._webGL2CompatibilityPrefix("frag", "highp") +
           defaultShaders.normalFrag,
         {
           vertex: {
@@ -774,9 +774,9 @@ class RendererGL extends Renderer3D {
     if (!this._defaultColorShader) {
       this._defaultColorShader = new Shader(
         this,
-        this._webGL2CompatibilityPrefix("vert", "mediump") +
+        this._webGL2CompatibilityPrefix("vert", "highp") +
           defaultShaders.normalVert,
-        this._webGL2CompatibilityPrefix("frag", "mediump") +
+        this._webGL2CompatibilityPrefix("frag", "highp") +
           defaultShaders.basicFrag,
         {
           vertex: {
@@ -802,9 +802,9 @@ class RendererGL extends Renderer3D {
     if (!this._defaultLineShader) {
       this._defaultLineShader = new Shader(
         this,
-        this._webGL2CompatibilityPrefix("vert", "mediump") +
+        this._webGL2CompatibilityPrefix("vert", "highp") +
           defaultShaders.lineVert,
-        this._webGL2CompatibilityPrefix("frag", "mediump") +
+        this._webGL2CompatibilityPrefix("frag", "highp") +
           defaultShaders.lineFrag,
         {
           vertex: {
@@ -889,14 +889,20 @@ class RendererGL extends Renderer3D {
    */
   _createImageLightShader(type) {
     if (type === 'diffused') {
-      return this._pInst.createShader(
-        defaultShaders.imageLightVert,
-        defaultShaders.imageLightDiffusedFrag
+      return new Shader(
+        this,
+        this._webGL2CompatibilityPrefix("vert", "highp") +
+          defaultShaders.imageLightVert,
+        this._webGL2CompatibilityPrefix("frag", "highp") +
+          defaultShaders.imageLightDiffusedFrag
       );
     } else if (type === 'specular') {
-      return this._pInst.createShader(
-        defaultShaders.imageLightVert,
-        defaultShaders.imageLightSpecularFrag
+      return new Shader(
+        this,
+        this._webGL2CompatibilityPrefix("vert", "highp") +
+          defaultShaders.imageLightVert,
+        this._webGL2CompatibilityPrefix("frag", "highp") +
+          defaultShaders.imageLightSpecularFrag
       );
     }
     throw new Error(`Unknown imageLight shader type: ${type}`);

src/webgl/shaders/imageLight.vert

@@ -1,12 +1,12 @@
 precision highp float;
-attribute vec3 aPosition;
-attribute vec3 aNormal;
-attribute vec2 aTexCoord;
+IN vec3 aPosition;
+IN vec3 aNormal;
+IN vec2 aTexCoord;
 
-varying vec3 localPos;
-varying vec3 vWorldNormal;
-varying vec3 vWorldPosition;
-varying vec2 vTexCoord;
+OUT vec3 localPos;
+OUT vec3 vWorldNormal;
+OUT vec3 vWorldPosition;
+OUT vec2 vTexCoord;
 
 uniform mat4 uModelViewMatrix;
 uniform mat4 uProjectionMatrix;

src/webgl/shaders/imageLightDiffused.frag

@@ -1,9 +1,9 @@
 precision highp float;
-varying vec3 localPos;
+IN vec3 localPos;
 
 // the HDR cubemap converted (can be from an equirectangular environment map.)
 uniform sampler2D environmentMap;
-varying vec2 vTexCoord;
+IN vec2 vTexCoord;
 
 const float PI = 3.14159265359;
 
@@ -70,13 +70,13 @@ void main()
       vec3 tangentSample = vec3( x, y, z);
 
       vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * normal;
-        irradiance += (texture2D(environmentMap, nTOE(sampleVec)).xyz) * cos(theta) * sin(theta);
+        irradiance += (TEXTURE(environmentMap, nTOE(sampleVec)).xyz) * cos(theta) * sin(theta);
       nrSamples++;
     }
 	}
 	// divide by the total number of samples taken, giving us the average sampled irradiance.
 	irradiance = PI * irradiance * (1.0 / float(nrSamples )) ;
 
 
-	gl_FragColor = vec4(irradiance, 1.0);
+	OUT_COLOR = vec4(irradiance, 1.0);
 }

src/webgl/shaders/imageLightSpecular.frag

@@ -1,6 +1,6 @@
 precision highp float;
-varying vec3 localPos;
-varying vec2 vTexCoord;
+IN vec3 localPos;
+IN vec2 vTexCoord;
 
 // our texture
 uniform sampler2D environmentMap;
@@ -61,13 +61,13 @@ void main(){
     float NdotL = max(dot(N, L), 0.0);
     if (NdotL > 0.0)
     {
-      prefilteredColor += texture2D(environmentMap, nTOE(L)).xyz * NdotL;
+      prefilteredColor += TEXTURE(environmentMap, nTOE(L)).xyz * NdotL;
       totalWeight += NdotL;
     }
   }
   prefilteredColor = prefilteredColor / totalWeight;
 
-  gl_FragColor = vec4(prefilteredColor, 1.0);
+ OUT_COLOR  = vec4(prefilteredColor, 1.0);
 }
 
 vec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness){

src/webgl/shaders/webgl2Compatibility.glsl

@@ -25,10 +25,8 @@ out vec4 outColor;
 
 #endif
 
-#ifdef FRAGMENT_SHADER
 vec4 getTexture(in sampler2D content, vec2 coord) {
   vec4 color = TEXTURE(content, coord);
   if (color.a > 0.) color.rgb /= color.a;
   return color;
 }
-#endif

test/unit/visual/cases/webgl.js

@@ -852,6 +852,41 @@ visualSuite('WebGL', function() {
       p5.rect(-20, -20, 40, 40);
       screenshot();
     });
+
+    visualTest('getTexture in vertex shaders', (p5, screenshot) => {
+      p5.createCanvas(50, 50, p5.WEBGL);
+      const positionData = p5.createFramebuffer({
+        width: 3,
+        height: 1,
+        density: 1,
+        antialias: false,
+        format: p5.FLOAT,
+        textureFiltering: p5.NEAREST
+      });
+      positionData.loadPixels();
+      for (let i = 0; i < 3; i++) {
+        positionData.pixels[i * 4] = i / 3;
+        positionData.pixels[i * 4 + 1] = 0;
+        positionData.pixels[i * 4 + 2] = 0;
+        positionData.pixels[i * 4 + 3] = 1;
+      }
+      positionData.updatePixels();
+      const sh = p5.baseMaterialShader().modify(() => {
+        const data = p5.uniformTexture(() => positionData);
+        p5.getWorldInputs((inputs) => {
+          const angle = p5.getTexture(data, [p5.instanceID()/3, 0]).r * p5.TWO_PI;
+          inputs.position.xy += [p5.cos(angle) * 10, p5.sin(angle) * 10];
+          return inputs;
+        });
+      }, { p5, positionData });
+      const instance = p5.buildGeometry(() => p5.sphere(3));
+
+      p5.noStroke();
+      p5.fill('red');
+      p5.shader(sh);
+      p5.model(instance, 3);
+      screenshot();
+    });
   });
 
   visualSuite("Image Based Lighting", function () {

test/unit/visual/screenshots/WebGL/textures in p5.strands/getTexture in vertex shaders/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}