[p5.js 2.0 Bug Report]: filters don't work in .min.js builds #8364
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
p5.js version
2.2-rc.3
Web browser and version
All
Operating system
All
Steps to reproduce this
Steps:
- Load p5 from a .min.js file
- Create a WebGL or WebGPU canvas
- Use a filter
You get errors like: ReferenceError: r is not defined.
Here's an example of the issue when calling panorama(img). Here's the original code:
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 = [
// Don't mind me, just doing matrix vector multiplication...
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 = [
p5.atan(rotatedNormal.z, rotatedNormal.x) / (2.0 * p5.PI) + 0.5,
0.5 + 0.5 * (-rotatedNormal.y)
];
return p5.getTexture(uEnvMap, suv);
})
}, { p5 });Note that it passes in { p5 } as the second parameter. This is because the contents of the function gets transpiled, so it loses any references to outside variables. All outside variables have to be passed in explicitly.
When minified it looks like this:
_getSphereMapping(e) {
if (!this.sphereMapping) {
const e = this._pInst;
this.sphereMapping = this.baseFilterShader().modify(
(
() => {
const t = e.uniformTexture(),
r = e.uniformFloat(),
i = e.uniformFloat(),
n = e.uniformVec3(),
s = e.uniformVec3(),
a = e.uniformVec3();
e.getColor(
(
o => {
const h = r * i,
u = e.mix(r / 2, - r / 2, o.texCoord.y),
l = e.mix(h / 2, - h / 2, o.texCoord.x);
let c = e.normalize([l,
u,
1]);
c = [
e.dot(c, n),
e.dot(c, s),
e.dot(c, a)
];
const p = c.z;
c.z = c.x,
c.x = - p;
const d = [
e.atan(c.z, c.x) / (2 * e.PI) + 0.5,
0.5 + 0.5 * - c.y
];
return e.getTexture(t, d)
}
)
)
}
),
{
p5: e
}
)
}So the minifier has replaced p5 with e, but it is still passing in the variable with the key p5 as the second parameter to modify. So e is now undefined inside of the shader.
I think this means that we have to find a way of doing internal p5.strands shaders that does not get minified/uglified. While there may be vite settings for this, this will likely break if people load p5 in an npm context from the source files and run it through their own build system.
Instead we probably need to support passing in code as a string so that build systems don't mistake it for code that needs modification.
Snippet:
Live: https://editor.p5js.org/davepagurek/sketches/VpMHKlJ7q
async function setup() {
await createCanvas(400, 400, WEBGL);
}
function draw() {
background(100);
push();
rotateY(millis() * 0.001);
lights();
box(200);
pop();
filter(BLUR)
}