Add texture coordinates to WebGL rounded rects

[davepagurek]

Addresses #5001

Currently, textures only work for rounded rects in WebGL if you have textureMode(IMAGE) set. If you don't add border radii, then any texture mode works. This explicitly specifies texture coordinates in the WebGL rect implementation so that it always works with provided textures regardless of mode.

Changes:

• Adds texture coordinates to the immediate mode rendering of rounded rects in WebGL mode

Problems not addressed yet:

• Still doesn't use retained geometry
• Still doesn't use a generalized solution for texture coordinates in curves (Pass Texture Coordinates to bezierVertex, quadraticVertex, and curveVertex #5722)
• Still doesn't fix thick strokes not being connected in WebGL (Connected strokes in WebGL mode #5790)

Screenshots of the change:

let w, h, tl, tr, bl, br let img function preload() { img = loadImage('cat.jpg') } function setup() { createCanvas(400, 400, WEBGL) w = createSlider(0, 400, 200) h = createSlider(0, 400, 200) tl = createSlider(0, 300, 0) tr = createSlider(0, 300, 0) bl = createSlider(0, 300, 0) br = createSlider(0, 300, 0) } function draw() { background(255) rectMode(CENTER) textureMode(NORMAL) // This breaks on main texture(img) rect( 0, 0, w.value(), h.value(), tl.value(), tr.value(), br.value(), bl.value() ) }

PR Checklist

• npm run lint passes
• [Inline documentation] is included / updated
• [Unit tests] are included / updated

[ShenpaiSharma]

Hi @davepagurek, when I am using it, texturing doesn't seem to be working right.

[davepagurek]

Thanks for trying it out! I have a web editor version here, does this work for you? https://editor.p5js.org/davepagurek/sketches/bMIevQinw If not, so I can try to reproduce it, what browser are you testing in?

[ShenpaiSharma]

Yeah, thanks, this works fine for me.

[stalgiag]

I haven't been following the rounded rects saga so this is all fairly new to me and all I can do is test it. It tests well. This seems like a straightforward addition to the current approach.

I think that the current approach might need further examination down the road (for the reasons you listed). Ideally, any vertex processing used to generate values for immediate mode could also be used to generate values for retained mode. What if the quadraticVertex function produced vertices based on the look-up table using a helper function so that the same helper function could be used elsewhere for caching?

Anyways! All that aside, I think this works well with the current implementation!

[davepagurek]

I think that the current approach might need further examination down the road (for the reasons you listed). Ideally, any vertex processing used to generate values for immediate mode could also be used to generate values for retained mode. What if the quadraticVertex function produced vertices based on the look-up table using a helper function so that the same helper function could be used elsewhere for caching?

True good call, I imagine (but have not profiled to verify) that that'll be the majority of the time spent in this function now, so caching it would be good!