p5shader - beginShape(POINTS | LINES) ignores custom shaders

[p5kontur]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: 1.2.0
• Web browser and version: Chrome 89.0.4389.90
• Operating System: Windows 10 Home Premium
• Steps to reproduce this: Vertices defined between beginShape(arg) and endShape() with arg = LINES | POINTS are not passed to custom shaders previously loaded and set with loadShader() and shader() functions.

`let theShader;
let mycube = null;
let activeCam;

function preload(){

theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
createCanvas(600,600,WEBGL);
angleMode(DEGREES);
activeCam = _createCamera();
activeCam.apply();
mycube = _createCube();
}

function draw() {

shader(theShader);
activeCam.move();
scale(1,-1,1);
background(200)

theShader.setUniform('uSizeFactor', 10.0);
theShader.setUniform('uMorphFactor', math.abs(math.cos(millis() / 1000)));

//noFill();
//noStroke();
mycube.render(); // renders a cube with beginShape() / endShape()
}`

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[stalgiag]

Hi and welcome! Does your shader have a uStrokeWeight uniform? See this check.

[p5kontur]

Unfortunately that doesn`t change anything. I had a look on the code line you linked me to and from there i started to have a look on some other files. I found the following in p5.RendererGL.Immediate.js

main.default.RendererGL.prototype.endShape = function(
            mode,
            isCurve,
            isBezier,
            isQuadratic,
            isContour,
            shapeKind
          ) {
            if (this.immediateMode.shapeMode === constants.POINTS) {
              this._drawPoints(
                this.immediateMode.geometry.vertices,
                this.immediateMode.buffers.point
              );

              return this;
            }

The _drawPoints function is defined in p5.RendererGL.Retained.js

p5.RendererGL.prototype._drawPoints = function(vertices, vertexBuffer) {
  const gl = this.GL;
  const pointShader = this._getImmediatePointShader();
  this._setPointUniforms(pointShader);

It is calling _getImmediatPointShader() in p5.RendererGL.js

p5.RendererGL.prototype._getImmediatePointShader = function() {
  // select the point shader to use
  const point = this.userPointShader;
  if (!point || !point.isPointShader()) {
    return this._getPointShader();
  }
  return point;
};

But the attribute this.userPointShader can never be changed by the programmer. I did not find a line of code that assigns a userVariable to it. Its value is never changed from undefined, so !point is always true and the default pointShader of p5 is returned. The isPointShader() function doesn`t even exists. The line of code never throws an exception because the second operand of || is never evalutated.

[stalgiag]

Yes, p5 does not accept custom shaders for points. This could possibly be added but I think it would warrant an argument for how the feature would improve accessibility. It makes sense to me to add this since most of the code is already in place and it would round out the completeness of the custom shaders feature. I am also seeing that the custom line shader is not used with `beginShape(LINES)` but only for stroking. This is probably two separate issues.

[p5kontur]

"Custom shaders can be used with strokes. I was replying to that part of the issue." (from the original answer)

Ok I understand. But in general this is not true. My vertex shader is morphing cube vertices to sphere vertices by deviding by its length. These 'transformed' vertices are used to draw the primitive, but the cube-vertices I passed originally to the vertex shaders are the ones used by p5 to draw the strokes. So a wireframe of the cube is drawn inside my filled sphere. I could do it on the CPU before passing the vertices to the shader like here (https://p5js.org/examples/motion-morph.html) but this is much less efficient.

[stalgiag]

After re-reading that you are using beginShape(LINES), I edited my response.

Custom shaders can be used for stroking retained geometry but they are not used with beginShape(LINES). This is because the fill shader is being used for drawing the vertices in LINES mode. This is due to some conceptual confusion around what is a fill and what is a stroke when drawing in immediate mode with LINES. You can set a custom stroke shader. It is just not being used in that particular case. This can and probably should be changed.

The points issue is separate in that the userPointShader property is never written to.

[inaridarkfox4231]

I already using customPointShader...(https://openprocessing.org/sketch/1182719).

[rsodre]

I need to make this work.
Is anyone working on this issue?

Why is 1 of 17 tasks under the issue title?
Which tasks? I can't see them anywhere here.