this._renderer / window._renderer is undefined in dev-2.0

[perminder-17]

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.0 beta

Web browser and version

chrome, firefox

Operating system

linux

Steps to reproduce this

Steps:

1. Go to p5.js web-editor
2. Try to run this sketch

// Creates a small offscreen WEBGL p5.Graphics,
// compiles a shader on that graphics, and then copies
// that shader into the main WEBGL canvas context.
//
let vertSrc = `
precision highp float;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;

void main() {
 vTexCoord = aTexCoord;
 vec4 positionVec4 = vec4(aPosition, 1.0);
 gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
}
`;

let fragSrc = `
precision mediump float;
varying vec2 vTexCoord;

void main() {
 vec2 uv = vTexCoord;
 vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
 gl_FragColor = vec4(color, 1.0);
}
`;

let copied;

function setup() {
 createCanvas(100, 100, WEBGL);
 let pg = createGraphics(25, 25, WEBGL);
 let original = pg.createShader(vertSrc, fragSrc);
 pg.shader(original);
 copied = original.copyToContext(window);
 shader(copied);
 describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');
}

function draw() {
 background(200);
 rotateX(frameCount * 0.01);
 rotateY(frameCount * 0.01);
 rotateZ(frameCount * 0.01);
 box(50);
}

3. See the error

The problem here is, in our newer version of p5.js we don't have _renderer visible on the window. Which probably means the reference example of copyContext() https://p5js.org/reference/p5.Shader/copyToContext/ (2nd example) won't work on our newer 2.0 version.

For the sake of writing the example code, we can assume we'll make window work again.

[davepagurek]

@limzykenneth we were talking in #7564 about whether or not _renderer could be hidden from window. For copyToContext, to copy a shader from a graphic to the main canvas, we'd need something resembling a reference to the p5 instance, and window is almost that. Do you think adding _renderer to window again is ok? or maybe we can expose the p5 instance as a different referenceable global?

[limzykenneth]

I think in this use case of copyToContext I would prefer to avoid ever passing in window as it is not meant to be a context/instance. I suppose in instance mode this likely isn't a problem since the instance is by its nature available, so just to need to solve for global mode. For global mode, there is technically p5.instance that refers to the actual p5 instance in global mode, perhaps that can be used instead? If not we can also possibly consider a new global like p5Instance that points to the same.

I see that the implementation only uses a reference to _renderer under the provided context, would it be possible to make it also accept a renderer as well as an instance? That way it can also accept the return value of createCanvas() which will be a renderer instance.

[perminder-17]

I agree that using p5.instance works perfectly in this context. In global mode, simply referencing p5.instance gives us the actual p5 instance, so I am not sure but I think there's no need to create an additional global variable like p5Instance .

Regarding createCanvas, although we could modify it to return a renderer instance, since p5.instance already provides the necessary instance, the need for this change seems minimal. What are your thoughts on proceeding this way? @davepagurek @limzykenneth

[davepagurek]

I'm ok with just using p5.instance! For documentation purposes, it probably means we have to add docs for that somewhere? I think to get it to show up correctly it would be something like this:

/**
 * @property {p5} instance
 * @for p5
 */

I'm not 100% sure if the {p5} type will work since I don't think we have a reference for the p5 global currently. So if that produces a broken link in the website, maybe we can just do @property instance for now, which gives it an any type?