Add support for webGL instancing #6276

RandomGamingDev · 2023-07-23T03:54:29Z

Resolves #6275

Changes:

This change adds instancing from WebGL2 to endShape() allowing for more performant rendering and more possibilities overall.

Screenshots of the change:

Here's an example of instancing. The shapes below the rotated cube were all drawn within a single draw call.

PR Checklist

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

(I haven't had time to write a unit test yet nor am I sure what specific unit test to write)

This addition is based on a library that I wrote that works with the current latest release version of p5.js and that has its own demo.
https://github.com/RandomGamingDev/WebGLp5Instancing

aferriss · 2023-07-23T16:12:09Z

This is an interesting proposal, it would be good to see the accessibility reasoning behind this feature as well in the issue that you opened. I think performance is a valid argument but maybe there's something else as well.

Personally, I think that it might make more sense to add the count argument into beginShape() instead of endshape(), but I'm open to being wrong about that if there's a good reason.

Why would this feature need to be limited to custom shapes? Wouldn't it be more useful to instance things like lines or other basic shapes? @davepagurek has already done some similar work in this area.

Maybe worth debating but I would expect strokes to be instanced as well here. Seems that this PR addresses filled geometry only.

Can you also share some examples in the p5 web editor using the feature that we can play with? If this feature is accepted it will need examples anyway, and it would be good to get an idea of how this looks in the shader, and what will be required of the user.

Should instanced geometry also be provided some instanceId attribute so that the user can manipulate instances within the shader? Furthermore, wouldn't this feature be more useful if there was an interface to create generic attribute buffers for instanced geometry? Otherwise, how is a user intended to translate / rotate / scale individual instances?

For unit tests you could think about testing that instanced geometry looks the same as non instanced, and that all the different geometry modes work correctly. Also test things like fill and stroke. It would also be good to see some performance testing to verify that the feature is working as intended and is in fact giving performance increases across a variety of browsers and devices.

src/core/shape/vertex.js

src/webgl/p5.RendererGL.Immediate.js

aferriss · 2023-07-23T16:18:40Z

src/core/shape/vertex.js

@@ -589,6 +589,7 @@ p5.prototype.endContour = function() {
 *
 * @method endShape
 * @param  {Constant} [mode] use CLOSE to close the shape
+ * @param  {Integer} [count] number of times you want to draw/instance the shape (for WebGL mode).


Can this be renamed to "instanceCount" or something a little more descriptive?

The problem I have with the name instanceCount is that it could be taken the wrong way. Perhaps something like numInstances would work, but I was thinking of keeping its name simple and understandable since drawing smth a certain amount of times makes sense in my view. If that's a problem then I'd probably change it to numInstances, but it might be less understandable rather than more.

If u look at the rest of the documentation most of the parameter names are decently simple.

I was mainly thinking about the renaming in the context of helping future maintainers understand what this is for. I still think count is too ambiguous in this context. numInstances sounds fine to me if you prefer that.

RandomGamingDev · 2023-07-23T18:15:36Z

I think that it'd work better with endShape(). I find it a bit off that beginShape is used to change the shape type and endShape to determine whether or not it closes, but understand that that's how you'd naturally think when you draw a shape. Following this logic and the logic of WebGL/OpenGL, it'd still make more sense to do the instancing at the end when everything's actually being drawn, and when you'd think about making duplicates a lot of the time.

This feature doesn't have to be limited to custom shapes, but since you oftentimes have to deal with vertices themselves, and need shader and WebGL knowledge to get it working, not to mention the fact that it could adversely effect p5.js in other unforseen ways. That's why I don't believe it'd make sense to add this feature to other shapes just to increase the complexity on the p5.js side and the confusion on the end user's side.

Shaders aren't applied to strokes, so I don't see why instancing, which is a shader-centric idea would be applied to strokes either, especially since it wouldn't have any effect unless the strokes were transparent, and even then have very little of an effect. I feel like the strokes, when using instancing would rather be more for debugging, especially since an experienced user of shaders would be able to add their own strokes in, strokes that would most likely fit better than p5.js strokes.

For the demo, I have a basic one in the library, although I do have one here that I used for debugging: https://editor.p5js.org/PotatoBoy/sketches/bC6WITRDd

The instance id attribute is handled by WebGL 2 using gl_InstanceID inside of the shader.

It would indeed be more useful with those, however it would raise the bar to use instancing, which is a very important feature in my opinion. I think that we should focus on making it more accessible. For those who need attributes, they can use constants, uniforms, and textures to store their data, or modify the p5.js library themselves until instancing gets added with attribute buffers.

As for the performance increase, create a bunch of objects and compare that to drawing them without instancing and the performance can be seen within chrome.

davepagurek · 2023-07-25T11:40:07Z

Personally, I think that it might make more sense to add the count argument into beginShape() instead of endshape(), but I'm open to being wrong about that if there's a good reason.

I don't have a strong opinion on this one, but maybe just think about what future extensions to this we might want to make (e.g. binding some per-instance attributes, or having a per-instance transform matrix like Threejs does) and see if it would make it easier to do so in one location or the other (or if it makes no difference.) Any thoughts on what those might include @RandomGamingDev?

Why would this feature need to be limited to custom shapes? Wouldn't it be more useful to instance things like lines or other basic shapes?

I think it might end up being easier to optimize performance for a feature like this if it's on a per shape level rather than something that happens inside of a primitive like a stroke. This way, we know for sure the user is intending to draw a bunch of the same thing, which should hopefully be a very clear optimization, whereas we've found it hard to get across-the-board performance improvements by adding instancing to all lines.

I do wonder, though, if we can do this in a way that works with model() too, as one of the things I'm going to be working on for the next release is a way to more easily make retained mode shapes, and pairing that with instancing could yield some great performance gains for particle system sorts of sketches.

Shaders aren't applied to strokes, so I don't see why instancing, which is a shader-centric idea would be applied to strokes either

That's true for now while a shader + instance ID is the only way to make use of instanced rendering. If we think the most common use of instancing is to have a separate transformation matrix per instance, I can see us wanting to make a (non-shader) API specifically for this so that people don't have to write a shader to make use of it, and then we'd probably want the fills and strokes to both take that into account. That's probably the north star I'd want to work towards to balance usefulness and accessibility -- doesn't cover all cases, but would be much easier to write than making a custom shader, especially while we don't have an easy way for users to augment our existing shaders without rewriting them.

As for the performance increase, create a bunch of objects and compare that to drawing them without instancing and the performance can be seen within chrome.

I think it would be good to have a minimum example of this both to use as a benchmark, and also to add to the p5 reference. As is, if a user adds a count to endShape(), all the instances would get drawn to the same spot and it would look like it's not working, so I think we need to provide a bit more documentation guidance on how the feature is intended to be used.

RandomGamingDev · 2023-07-25T14:16:31Z

I think those would include a system for adding attributes using beginShape(), vertex(), and endShape() since those r decently limited rn with the rest being handled by unifroms and textures.

Whether it's on a shape level or not shouldn't matter too much as long as the person using instancing knows enough to optimize for instancing. It would be possible to do it with model(), but it'd require modifying that function.

It'd be useful, but I'm not too sure what the reaction would be to modifying so much of the p5.js framework, especially for smth that a lot of people won't know how to use. If we want to go with the general API approach, we'd have to deal with things like position, size, rotation, scale, among other things. If we were to go through that route we'd most likely want to store that data in a texture that can then later be queried, but I'm not sure that that'd be too effective.

Alr, I'll add an example to the documentation later when I can.

davepagurek · 2023-07-25T14:45:25Z

It would be possible to do it with model(), but it'd require modifying that function.

Makes sense, that could be a good feature to add to model(), but isn't required to be part of this PR.

It'd be useful, but I'm not too sure what the reaction would be to modifying so much of the p5.js framework, especially for smth that a lot of people won't know how to use. If we want to go with the general API approach, we'd have to deal with things like position, size, rotation, scale, among other things. If we were to go through that route we'd most likely want to store that data in a texture that can then later be queried, but I'm not sure that that'd be too effective.

Solving for a more general case would maybe be better served by making an API for custom vertex attributes and allowing the divisor to be changed so that it uses the same value for each instance. Looks like we could add that (and even add some nicer APIs for transformations specifically on top of that if we want) without running into issues here, which is good!

RandomGamingDev · 2023-07-25T15:13:17Z

Adding per vertex attributes would be great, although for a lot of stuff we'd still want to use uniforms and textures

davepagurek · 2023-07-28T13:01:24Z

src/core/shape/vertex.js

@@ -559,6 +559,62 @@ p5.prototype.curveVertex = function(...args) {
 * </code>
 * </div>
 *
+ * @example


I think this is in the endContour() docs, did you want this example to be in endShape()?

Yeah, sorry about that. I fixed it in the latest commit.

davepagurek · 2023-07-28T13:02:13Z

src/core/shape/vertex.js

-      isQuadratic,
-      isContour,
-      shapeKind
+      this.isCurve,


It looks like a this. was added here, was that intentional?

That was a mistake. I'll remove those.

davepagurek · 2023-07-28T13:03:00Z

Looks like there are some trailing spaces in the code causing the linter test to fail:

davepagurek · 2023-07-31T12:16:19Z

@aferriss I'm thinking of merging this in as-is, knowing that for now it requires custom shaders to take advantage of instancing, and that this is only currently feasible for fills. Going forward, I'd like to improve upon both of those points either by:

making a way for users to augment our existing shaders without completely rewriting them (Make the WebGL material system more easy to make libraries for #6144) so that one could add some per-instance positioning logic
taking the threejs approach of making it easy to have per-instance transforms and adding support for that into our default shaders. Any other properties requiring per-instance variation would still have to be done with a custom shader, which will work the same as it currently does, and might also benefit from (1).

Do any of those approaches sound ok to you? This current PR would be a step towards either of them.

RandomGamingDev · 2023-07-31T13:48:46Z

That sounds good.

src/core/shape/vertex.js

Clarify example code

RandomGamingDev · 2023-08-16T03:27:56Z

Oh forgot to update the thing. The unit tests were added.

Added an example showing how gl_InstanceID can be used to color geometry

src/core/shape/vertex.js

…into instancing

aferriss

Thanks @RandomGamingDev I think it's looking good! Appreciate the patience :D

davepagurek · 2023-08-17T20:03:39Z

src/core/shape/vertex.js

@@ -651,9 +654,18 @@ p5.prototype.endContour = function() {
 * precision mediump float;
 *
 * out vec4 outColor;
+ * in int instanceID;


Not 100% sure if this is why this example is throwing an error compiling the shader, but it looks like the vertex shader uses a lowercase d in Id while the fragment shader capitalizes it

That's on reason why, but int's also can't be interpolated like that so ur also supposed to use flat.

Ah sorry, that's my fault and what I get for editing the code inline in browser. Thanks for catching!

RandomGamingDev · 2023-08-17T20:48:21Z

I made it so that the shader compiled by changing the input and output names to be the same for instanceID and by using flat instead.

davepagurek · 2023-08-18T11:11:37Z

Great work on this @RandomGamingDev!

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [p5](https://togithub.com/processing/p5.js) | devDependencies | minor | [`1.7.0` -> `1.8.0`](https://renovatebot.com/diffs/npm/p5/1.7.0/1.8.0) | | [@types/p5](https://togithub.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/p5) ([source](https://togithub.com/DefinitelyTyped/DefinitelyTyped)) | devDependencies | patch | [`1.7.0` -> `1.7.3`](https://renovatebot.com/diffs/npm/@types%2fp5/1.7.0/1.7.3) | --- ### Release Notes <details> <summary>processing/p5.js (p5)</summary> ### [`v1.8.0`](https://togithub.com/processing/p5.js/releases/tag/v1.8.0) [Compare Source](https://togithub.com/processing/p5.js/compare/v1.7.0...v1.8.0)  #### What's Changed 🎊 ##### WebGL In this release, p5.js added some new WebGL mode tools. Filters now run in shaders for extra speed, and you can now run custom filter shaders, even on 2D canvases. You can now cut holes in shapes with `beginContour()` and apply vector masks with `beginClip()`. You can reuse shapes more efficiently with `buildGeometry()` and instanced rendering. Finally, we have also fixed a number of bugs. *- Summary written by [@davepagurek](https://togithub.com/davepagurek) ✨* - Add support for beginContour() and endContour() in Webgl mode by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6297 - Fix stroke rendering when drawing to framebuffers by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6304 - Adds createFilterShader() and custom shader support to the webGL filter() function by [@wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6237 - Fix WebGL text not rendering when rotated 90 degrees by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6316 - Fix reading between nested active framebuffers by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6314 - Add methods to construct p5.Geometry from other p5 drawing functions by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6287 - Handle missing exact edge vertices in buildGeometry by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6320 - Fix strokes on framebuffers with different aspect ratios by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6339 - Fix freed geometry leaving attributes in a broken state by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6323 - Improve performance of line rendering by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6230 - Add support for webGL instancing by [@RandomGamingDev](https://togithub.com/RandomGamingDev) in [processing/p5.js#6276 - Add shaders for filter() constants, and use them by default in P2D by [@wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6324 - Fix clip() on both the main canvas and framebuffers by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6376 - fixed texture filtering bug in p5.Framebuffer by [@KeyboardSounds](https://togithub.com/KeyboardSounds) in [processing/p5.js#6420 - Fix clear() on framebuffers on Intel macs by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6429 - Fix textureMode(IMAGE) + beginShape(TESS) by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6366 - fixed issue [#6440](https://togithub.com/processing/p5.js/issues/6440) by [@Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6446 - Erode, dilate, threshold shader filters match closer to CPU filters by [@wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6405 - Update WebGL blur filter to match CPU blur more by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6460 - Fix camera flipping on framebuffers between push/pop calls by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6471 - Setuniform by [@Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6474 - resolved issue [#6399](https://togithub.com/processing/p5.js/issues/6399) by [@Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6480 - Auto-bind filter shaders to the filter graphic by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6482 - new PR for issue [#6383](https://togithub.com/processing/p5.js/issues/6383)(Problem for diagonal) by [@perminder-17](https://togithub.com/perminder-17) in [processing/p5.js#6488 ##### Friendly Error System (FES) - Add Hindi translation to FES by [@Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6272 - Re-worded lines 413 and 446 of FES Developer Notes by [@OnexiMedina](https://togithub.com/OnexiMedina) in [processing/p5.js#6307 - Reference FES Contributor Docs inside FES Directory along with a diagram to understand usages of FES functions by [@Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6335 - Fixed typing errors in fes_core.js documentation by [@Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6478 - Update friendly_error_system.md by [@Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6481 - Update fes_reference_dev_notes.md by [@Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6486 ##### Reference Documentation Update We updated a group of p5.js Reference pages as part of 2023 Season of Docs (SoD) program, with a goal to make them more accessible and beginner-friendly. Thanks to the SoD technical writer [@nickmcintyre](https://togithub.com/nickmcintyre) ✨. - Edit docs for math functions by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6281 - docs(typography): fix typos in example for textFont by [@meezwhite](https://togithub.com/meezwhite) in [processing/p5.js#6401 - Edit docs for p5.Vector by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6340 - Edit docs for pixels functions by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6390 - Edit docs for loading & displaying images by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6425 - Update docs for p5.Image by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6434 - Edit docs for p5.Font by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6453 - Edit docs for image by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6424 - Edit docs for typography load and display by [@nickmcintyre](https://togithub.com/nickmcintyre) in [processing/p5.js#6450 ##### Google Summer of Code (GSoC) 2023 Wrap up - 🌸 Added GSoC wrap up! by [@dewanshDT](https://togithub.com/dewanshDT) in [processing/p5.js#6403 - Gsoc 23 Wrapup post by [@Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6415 - add GSoC'23 wrapup post for Justin Wong by [@wong-justin](https://togithub.com/wong-justin) in [processing/p5.js#6418 - Create lichlyter_gsoc\_2023.md by [@katlich112358](https://togithub.com/katlich112358) in [processing/p5.js#6455 - Create munusshih_gsoc\_2023.md by [@munusshih](https://togithub.com/munusshih) in [processing/p5.js#6461 ##### Other Code Update - Ask to disable printing when print() called with no arguments by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6253 - fix textWidth() and textToPoints() by [@munusshih](https://togithub.com/munusshih) in [processing/p5.js#6184 - Fix issue where nf with 0 'right' parameter returns undefined in string by [@limzykenneth](https://togithub.com/limzykenneth) in [processing/p5.js#6291 - Update environment.js with fix for frameRate description by [@quinton-ashley](https://togithub.com/quinton-ashley) in [processing/p5.js#6269 - Implement clip() to shapes by [@davepagurek](https://togithub.com/davepagurek) in [processing/p5.js#6306 - Clarified workflow for contributing documentation by [@thatguyseven](https://togithub.com/thatguyseven) in [processing/p5.js#6312 - Clears MediaElement canvas at the beginning of every frame by [@donaldzhu](https://togithub.com/donaldzhu) in [processing/p5.js#6309 - Clean up gruntfile release related steps by [@Qianqianye](https://togithub.com/Qianqianye) in [processing/p5.js#6321 - fix-return-type by [@asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6326 - fix HALF_FLOAT by [@asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6330 - Added .gitattributes to Increase compatability with Window users and line endings by [@SilasVM](https://togithub.com/SilasVM) in [processing/p5.js#6317 - update all contributors setup by [@gr2m](https://togithub.com/gr2m) in [processing/p5.js#6341 - refine canvas' type by [@asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6328 - MouseEvent, WheelEvent and KeyboardEvent type by [@asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6329 - fixed-wrong-capture-size-and-freeze-issue by [@Prateek93a](https://togithub.com/Prateek93a) in [processing/p5.js#5159 - add more event type by [@asukaminato0721](https://togithub.com/asukaminato0721) in [processing/p5.js#6379 - Main by [@j-adel](https://togithub.com/j-adel) in [processing/p5.js#6374 - Update labeler Github Action by [@stampyzfanz](https://togithub.com/stampyzfanz) in [processing/p5.js#6395 - add unregisterMethod function by [@capGoblin](https://togithub.com/capGoblin) in [processing/p5.js#6426 - add before/after preload and setup by [@capGoblin](https://togithub.com/capGoblin) in [processing/p5.js#6433 - Fix: Misleading error message when NaN passed by [@capGoblin](https://togithub.com/capGoblin) in [processing/p5.js#6464 - Support pixel density on p5.Image (fixes issue [#6114](https://togithub.com/processing/p5.js/issues/6114)) by [@Gaurav-1306](https://togithub.com/Gaurav-1306) in [processing/p5.js#6447 - Fix orphan canvas when sketch is removed before canvas creation by [@limzykenneth](https://togithub.com/limzykenneth) in [processing/p5.js#6355 ##### Other Documentation Update - Fixed GitHub capitalization typo in contributor_docs by [@SilasVM](https://togithub.com/SilasVM) in [processing/p5.js#6284 - Fixing typo in "What are issues?" by [@snwarner22](https://togithub.com/snwarner22) in [processing/p5.js#6288 - Fixed GitHub spelling in CONTRIBUTING.md by [@SilasVM](https://togithub.com/SilasVM) in [processing/p5.js#6295 - Fixed grammatical errors in contributor_guidelines.md by [@thatguyseven](https://togithub.com/thatguyseven) in [processing/p5.js#6296 - Update documentation_style_guide.md with new guideline by [@zelf0](https://togithub.com/zelf0) in [processing/p5.js#6334 - add missing code contributors to all contributors in README and `.all-contributors.rc` file by [@gr2m](https://togithub.com/gr2m) in [processing/p5.js#6349 - docs(all-contributors): remove [@stellartux](https://togithub.com/stellartux) as requested by [@gr2m](https://togithub.com/gr2m) in [processing/p5.js#6368 - docs(src/utilities): Use `describe()` instead of `@alt` by [@Zearin](https://togithub.com/Zearin) in [processing/p5.js#5598 - Fix typo in export path to fix dev mode by [@mykongee](https://togithub.com/mykongee) in [processing/p5.js#6373 - Improve Readme for future Contributors to codebase by [@Ayush23Dash](https://togithub.com/Ayush23Dash) in [processing/p5.js#6260 - Fixed mousePressed() Example Error by [@Utkarsh3128](https://togithub.com/Utkarsh3128) in [processing/p5.js#6413 - Update README.md by [@katlich112358](https://togithub.com/katlich112358) in [processing/p5.js#6458 - Fixed typing errors in validate_params.js file's documentation by [@Garima3110](https://togithub.com/Garima3110) in [processing/p5.js#6473 - typo and unused variable from core by [@benschac](https://togithub.com/benschac) in [processing/p5.js#6476 #### New Contributors 💗 - [@munusshih](https://togithub.com/munusshih) made their first contribution in [processing/p5.js#6184 - [@SilasVM](https://togithub.com/SilasVM) made their first contribution in [processing/p5.js#6284 - [@snwarner22](https://togithub.com/snwarner22) made their first contribution in [processing/p5.js#6288 - [@thatguyseven](https://togithub.com/thatguyseven) made their first contribution in [processing/p5.js#6296 - [@OnexiMedina](https://togithub.com/OnexiMedina) made their first contribution in [processing/p5.js#6307 - [@donaldzhu](https://togithub.com/donaldzhu) made their first contribution in [processing/p5.js#6309 - [@gr2m](https://togithub.com/gr2m) made their first contribution in [processing/p5.js#6341 - [@RandomGamingDev](https://togithub.com/RandomGamingDev) made their first contribution in [processing/p5.js#6276 - [@mykongee](https://togithub.com/mykongee) made their first contribution in [processing/p5.js#6373 - [@j-adel](https://togithub.com/j-adel) made their first contribution in [processing/p5.js#6374 - [@meezwhite](https://togithub.com/meezwhite) made their first contribution in [processing/p5.js#6401 - [@dewanshDT](https://togithub.com/dewanshDT) made their first contribution in [processing/p5.js#6403 - [@Utkarsh3128](https://togithub.com/Utkarsh3128) made their first contribution in [processing/p5.js#6413 - [@KeyboardSounds](https://togithub.com/KeyboardSounds) made their first contribution in [processing/p5.js#6420 - [@capGoblin](https://togithub.com/capGoblin) made their first contribution in [processing/p5.js#6426 - [@Gaurav-1306](https://togithub.com/Gaurav-1306) made their first contribution in [processing/p5.js#6446 - [@katlich112358](https://togithub.com/katlich112358) made their first contribution in [processing/p5.js#6455 - [@Garima3110](https://togithub.com/Garima3110) made their first contribution in [processing/p5.js#6473 - [@benschac](https://togithub.com/benschac) made their first contribution in [processing/p5.js#6476 - [@perminder-17](https://togithub.com/perminder-17) made their first contribution in [processing/p5.js#6488 - [@lakshay451](https://togithub.com/lakshay451) made their first contribution in [processing/p5.js#6493 **Full Changelog**: processing/p5.js@v1.7.0...v1.8.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://togithub.com/renovatebot/renovate).  Co-authored-by: Renovate Bot <bot@renovateapp.com>

RandomGamingDev added 2 commits July 22, 2023 23:32

main changes for the adding of instancing

e61c8e3

fixed some more linting issues

6874098

aferriss reviewed Jul 23, 2023

View reviewed changes

src/core/shape/vertex.js Show resolved Hide resolved

aferriss reviewed Jul 23, 2023

View reviewed changes

src/webgl/p5.RendererGL.Immediate.js Outdated Show resolved Hide resolved

aferriss reviewed Jul 23, 2023

View reviewed changes

readded constants.

629ee21

added count < 1 check

a655759

RandomGamingDev mentioned this pull request Jul 23, 2023

Batching for the rendering of objects. #6279

Open

17 tasks

documentation example

c8e799a

RandomGamingDev mentioned this pull request Jul 25, 2023

Make the WebGL material system more easy to make libraries for #6144

Open

17 tasks

davepagurek reviewed Jul 28, 2023

View reviewed changes

RandomGamingDev added 2 commits July 28, 2023 09:42

moved the example to the right place and removed this.

6eda10d

linting fix

4626423

davepagurek mentioned this pull request Jul 31, 2023

Speed up line rendering with WebGL2 instancing #6162

Closed

3 tasks

RandomGamingDev added 2 commits July 31, 2023 11:59

removed now unnecessary overload for FrameBufferCamera

988db4b

wrong branch, reverted to previous commit

c5ad6a5

aferriss reviewed Jul 31, 2023

View reviewed changes

src/core/shape/vertex.js Outdated Show resolved Hide resolved

aferriss reviewed Jul 31, 2023

View reviewed changes

src/core/shape/vertex.js Outdated Show resolved Hide resolved

aferriss reviewed Jul 31, 2023

View reviewed changes

src/core/shape/vertex.js Show resolved Hide resolved

aferriss reviewed Jul 31, 2023

View reviewed changes

src/core/shape/vertex.js Show resolved Hide resolved

aferriss reviewed Aug 1, 2023

View reviewed changes

src/core/shape/vertex.js Outdated Show resolved Hide resolved

aferriss and others added 4 commits August 1, 2023 10:21

Update vertex.js

4bd9209

Clarify example code

unit test

f407425

Merge branch 'main' into instancing

cb18f99

fixed syntax error from merging part of main

db5bfea

davepagurek mentioned this pull request Aug 17, 2023

Update line normalization script to turn on normalization + fix line endings #6344

Closed

3 tasks

RandomGamingDev and others added 8 commits August 17, 2023 11:06

Merge branch 'processing:main' into instancing

2f7a480

resetted eslintrc.json as suggested by dave

3563716

added myp5. in front of the p5.js enums

72e7b6a

added myp5. in front of createShader()

8f219ef

put the correct color for the background test's deep equal

c90f1b7

added myp5. in front of width and height

3b8da42

forgot to actually instance changed the val from 1 to 2

d6c7271

removed the done parameter

79e1f92

davepagurek requested a review from aferriss August 17, 2023 17:20

aferriss added 2 commits August 17, 2023 11:04

Update vertex.js example fragment shader

3c46ec0

Added an example showing how gl_InstanceID can be used to color geometry

Update vertex.js typo

38788a0

aferriss reviewed Aug 17, 2023

View reviewed changes

src/core/shape/vertex.js Show resolved Hide resolved

aferriss and others added 3 commits August 17, 2023 11:46

Update vertex.js typo linter

f61bcd5

added the documentation suggested by adam

7a0dbcf

Merge branch 'instancing' of https://github.com/RandomGamingDev/p5.js …

371e1fe

…into instancing

aferriss approved these changes Aug 17, 2023

View reviewed changes

davepagurek reviewed Aug 17, 2023

View reviewed changes

made it so that the updated example shader compiles

cf20cd6

davepagurek merged commit 226f2fe into processing:main Aug 18, 2023
2 checks passed

RandomGamingDev mentioned this pull request Feb 12, 2024

[p5.js 2.0 RFC Proposal]: Batching for the rendering of objects. #6805

Open

21 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for webGL instancing #6276

Add support for webGL instancing #6276

RandomGamingDev commented Jul 23, 2023 •

edited

aferriss commented Jul 23, 2023 •

edited

aferriss Jul 23, 2023

RandomGamingDev Jul 23, 2023

RandomGamingDev Jul 23, 2023

aferriss Jul 31, 2023

RandomGamingDev commented Jul 23, 2023

davepagurek commented Jul 25, 2023

RandomGamingDev commented Jul 25, 2023 •

edited

davepagurek commented Jul 25, 2023

RandomGamingDev commented Jul 25, 2023

davepagurek Jul 28, 2023

RandomGamingDev Jul 28, 2023

davepagurek Jul 28, 2023

RandomGamingDev Jul 28, 2023

davepagurek commented Jul 28, 2023

davepagurek commented Jul 31, 2023

RandomGamingDev commented Jul 31, 2023

RandomGamingDev commented Aug 16, 2023

aferriss left a comment

davepagurek Aug 17, 2023

RandomGamingDev Aug 17, 2023

aferriss Aug 17, 2023

RandomGamingDev commented Aug 17, 2023

davepagurek commented Aug 18, 2023

Add support for webGL instancing #6276

Add support for webGL instancing #6276

Conversation

RandomGamingDev commented Jul 23, 2023 • edited

PR Checklist

aferriss commented Jul 23, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RandomGamingDev commented Jul 23, 2023

davepagurek commented Jul 25, 2023

RandomGamingDev commented Jul 25, 2023 • edited

davepagurek commented Jul 25, 2023

RandomGamingDev commented Jul 25, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davepagurek commented Jul 28, 2023

davepagurek commented Jul 31, 2023

RandomGamingDev commented Jul 31, 2023

RandomGamingDev commented Aug 16, 2023

aferriss left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RandomGamingDev commented Aug 17, 2023

davepagurek commented Aug 18, 2023

RandomGamingDev commented Jul 23, 2023 •

edited

aferriss commented Jul 23, 2023 •

edited

RandomGamingDev commented Jul 25, 2023 •

edited