diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index dac757acd9..5a20260944 100644 --- a/src/webgl/p5.RendererGL.js +++ b/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}`); diff --git a/src/webgl/shaders/imageLight.vert b/src/webgl/shaders/imageLight.vert index 6f68e6d092..3b97f7332f 100644 --- a/src/webgl/shaders/imageLight.vert +++ b/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; diff --git a/src/webgl/shaders/imageLightDiffused.frag b/src/webgl/shaders/imageLightDiffused.frag index 7b342bdb2b..e38d12694a 100644 --- a/src/webgl/shaders/imageLightDiffused.frag +++ b/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,7 +70,7 @@ 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++; } } @@ -78,5 +78,5 @@ void main() irradiance = PI * irradiance * (1.0 / float(nrSamples )) ; - gl_FragColor = vec4(irradiance, 1.0); + OUT_COLOR = vec4(irradiance, 1.0); } \ No newline at end of file diff --git a/src/webgl/shaders/imageLightSpecular.frag b/src/webgl/shaders/imageLightSpecular.frag index 8b6edcdf10..3bc45ad5e1 100644 --- a/src/webgl/shaders/imageLightSpecular.frag +++ b/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){ diff --git a/src/webgl/shaders/webgl2Compatibility.glsl b/src/webgl/shaders/webgl2Compatibility.glsl index 8c9dbddec6..fbc360a44d 100644 --- a/src/webgl/shaders/webgl2Compatibility.glsl +++ b/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 diff --git a/test/unit/visual/cases/webgl.js b/test/unit/visual/cases/webgl.js index 7462d526bb..b16a3c40fe 100644 --- a/test/unit/visual/cases/webgl.js +++ b/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 () { diff --git a/test/unit/visual/screenshots/WebGL/textures in p5.strands/getTexture in vertex shaders/000.png b/test/unit/visual/screenshots/WebGL/textures in p5.strands/getTexture in vertex shaders/000.png new file mode 100644 index 0000000000..6c040b2bfc Binary files /dev/null and b/test/unit/visual/screenshots/WebGL/textures in p5.strands/getTexture in vertex shaders/000.png differ diff --git a/test/unit/visual/screenshots/WebGL/textures in p5.strands/getTexture in vertex shaders/metadata.json b/test/unit/visual/screenshots/WebGL/textures in p5.strands/getTexture in vertex shaders/metadata.json new file mode 100644 index 0000000000..2d4bfe30da --- /dev/null +++ b/test/unit/visual/screenshots/WebGL/textures in p5.strands/getTexture in vertex shaders/metadata.json @@ -0,0 +1,3 @@ +{ + "numScreenshots": 1 +} \ No newline at end of file