-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support for webGL instancing #6276
Conversation
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. |
@@ -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). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can this be renamed to "instanceCount" or something a little more descriptive?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If u look at the rest of the documentation most of the parameter names are decently simple.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
I think that it'd work better with 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. |
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?
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
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.
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 |
I think those would include a system for adding attributes using 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 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. |
Makes sense, that could be a good feature to add to
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! |
Adding per vertex attributes would be great, although for a lot of stuff we'd still want to use uniforms and textures |
src/core/shape/vertex.js
Outdated
@@ -559,6 +559,62 @@ p5.prototype.curveVertex = function(...args) { | |||
* </code> | |||
* </div> | |||
* | |||
* @example |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is in the endContour()
docs, did you want this example to be in endShape()
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, sorry about that. I fixed it in the latest commit.
src/core/shape/vertex.js
Outdated
isQuadratic, | ||
isContour, | ||
shapeKind | ||
this.isCurve, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like a this.
was added here, was that intentional?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That was a mistake. I'll remove those.
@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:
Do any of those approaches sound ok to you? This current PR would be a step towards either of them. |
That sounds good. |
Oh forgot to update the thing. The unit tests were added. |
Added an example showing how gl_InstanceID can be used to color geometry
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @RandomGamingDev I think it's looking good! Appreciate the patience :D
src/core/shape/vertex.js
Outdated
@@ -651,9 +654,18 @@ p5.prototype.endContour = function() { | |||
* precision mediump float; | |||
* | |||
* out vec4 outColor; | |||
* in int instanceID; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's on reason why, but int's also can't be interpolated like that so ur also supposed to use flat
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah sorry, that's my fault and what I get for editing the code inline in browser. Thanks for catching!
I made it so that the shader compiled by changing the input and output names to be the same for |
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) <!-- Release notes generated using configuration in .github/release.yml at 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 [https:/processing/p5.js/pull/6297](https://togithub.com/processing/p5.js/pull/6297) - Fix stroke rendering when drawing to framebuffers by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6304](https://togithub.com/processing/p5.js/pull/6304) - Adds createFilterShader() and custom shader support to the webGL filter() function by [@​wong-justin](https://togithub.com/wong-justin) in [https:/processing/p5.js/pull/6237](https://togithub.com/processing/p5.js/pull/6237) - Fix WebGL text not rendering when rotated 90 degrees by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6316](https://togithub.com/processing/p5.js/pull/6316) - Fix reading between nested active framebuffers by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6314](https://togithub.com/processing/p5.js/pull/6314) - Add methods to construct p5.Geometry from other p5 drawing functions by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6287](https://togithub.com/processing/p5.js/pull/6287) - Handle missing exact edge vertices in buildGeometry by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6320](https://togithub.com/processing/p5.js/pull/6320) - Fix strokes on framebuffers with different aspect ratios by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6339](https://togithub.com/processing/p5.js/pull/6339) - Fix freed geometry leaving attributes in a broken state by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6323](https://togithub.com/processing/p5.js/pull/6323) - Improve performance of line rendering by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6230](https://togithub.com/processing/p5.js/pull/6230) - Add support for webGL instancing by [@​RandomGamingDev](https://togithub.com/RandomGamingDev) in [https:/processing/p5.js/pull/6276](https://togithub.com/processing/p5.js/pull/6276) - Add shaders for filter() constants, and use them by default in P2D by [@​wong-justin](https://togithub.com/wong-justin) in [https:/processing/p5.js/pull/6324](https://togithub.com/processing/p5.js/pull/6324) - Fix clip() on both the main canvas and framebuffers by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6376](https://togithub.com/processing/p5.js/pull/6376) - fixed texture filtering bug in p5.Framebuffer by [@​KeyboardSounds](https://togithub.com/KeyboardSounds) in [https:/processing/p5.js/pull/6420](https://togithub.com/processing/p5.js/pull/6420) - Fix clear() on framebuffers on Intel macs by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6429](https://togithub.com/processing/p5.js/pull/6429) - Fix textureMode(IMAGE) + beginShape(TESS) by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6366](https://togithub.com/processing/p5.js/pull/6366) - fixed issue [#​6440](https://togithub.com/processing/p5.js/issues/6440) by [@​Gaurav-1306](https://togithub.com/Gaurav-1306) in [https:/processing/p5.js/pull/6446](https://togithub.com/processing/p5.js/pull/6446) - Erode, dilate, threshold shader filters match closer to CPU filters by [@​wong-justin](https://togithub.com/wong-justin) in [https:/processing/p5.js/pull/6405](https://togithub.com/processing/p5.js/pull/6405) - Update WebGL blur filter to match CPU blur more by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6460](https://togithub.com/processing/p5.js/pull/6460) - Fix camera flipping on framebuffers between push/pop calls by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6471](https://togithub.com/processing/p5.js/pull/6471) - Setuniform by [@​Gaurav-1306](https://togithub.com/Gaurav-1306) in [https:/processing/p5.js/pull/6474](https://togithub.com/processing/p5.js/pull/6474) - resolved issue [#​6399](https://togithub.com/processing/p5.js/issues/6399) by [@​Gaurav-1306](https://togithub.com/Gaurav-1306) in [https:/processing/p5.js/pull/6480](https://togithub.com/processing/p5.js/pull/6480) - Auto-bind filter shaders to the filter graphic by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6482](https://togithub.com/processing/p5.js/pull/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 [https:/processing/p5.js/pull/6488](https://togithub.com/processing/p5.js/pull/6488) ##### Friendly Error System (FES) - Add Hindi translation to FES by [@​Ayush23Dash](https://togithub.com/Ayush23Dash) in [https:/processing/p5.js/pull/6272](https://togithub.com/processing/p5.js/pull/6272) - Re-worded lines 413 and 446 of FES Developer Notes by [@​OnexiMedina](https://togithub.com/OnexiMedina) in [https:/processing/p5.js/pull/6307](https://togithub.com/processing/p5.js/pull/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 [https:/processing/p5.js/pull/6335](https://togithub.com/processing/p5.js/pull/6335) - Fixed typing errors in fes_core.js documentation by [@​Garima3110](https://togithub.com/Garima3110) in [https:/processing/p5.js/pull/6478](https://togithub.com/processing/p5.js/pull/6478) - Update friendly_error_system.md by [@​Garima3110](https://togithub.com/Garima3110) in [https:/processing/p5.js/pull/6481](https://togithub.com/processing/p5.js/pull/6481) - Update fes_reference_dev_notes.md by [@​Garima3110](https://togithub.com/Garima3110) in [https:/processing/p5.js/pull/6486](https://togithub.com/processing/p5.js/pull/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 [https:/processing/p5.js/pull/6281](https://togithub.com/processing/p5.js/pull/6281) - docs(typography): fix typos in example for textFont by [@​meezwhite](https://togithub.com/meezwhite) in [https:/processing/p5.js/pull/6401](https://togithub.com/processing/p5.js/pull/6401) - Edit docs for p5.Vector by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [https:/processing/p5.js/pull/6340](https://togithub.com/processing/p5.js/pull/6340) - Edit docs for pixels functions by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [https:/processing/p5.js/pull/6390](https://togithub.com/processing/p5.js/pull/6390) - Edit docs for loading & displaying images by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [https:/processing/p5.js/pull/6425](https://togithub.com/processing/p5.js/pull/6425) - Update docs for p5.Image by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [https:/processing/p5.js/pull/6434](https://togithub.com/processing/p5.js/pull/6434) - Edit docs for p5.Font by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [https:/processing/p5.js/pull/6453](https://togithub.com/processing/p5.js/pull/6453) - Edit docs for image by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [https:/processing/p5.js/pull/6424](https://togithub.com/processing/p5.js/pull/6424) - Edit docs for typography load and display by [@​nickmcintyre](https://togithub.com/nickmcintyre) in [https:/processing/p5.js/pull/6450](https://togithub.com/processing/p5.js/pull/6450) ##### Google Summer of Code (GSoC) 2023 Wrap up - 🌸 Added GSoC wrap up! by [@​dewanshDT](https://togithub.com/dewanshDT) in [https:/processing/p5.js/pull/6403](https://togithub.com/processing/p5.js/pull/6403) - Gsoc 23 Wrapup post by [@​Ayush23Dash](https://togithub.com/Ayush23Dash) in [https:/processing/p5.js/pull/6415](https://togithub.com/processing/p5.js/pull/6415) - add GSoC'23 wrapup post for Justin Wong by [@​wong-justin](https://togithub.com/wong-justin) in [https:/processing/p5.js/pull/6418](https://togithub.com/processing/p5.js/pull/6418) - Create lichlyter_gsoc\_2023.md by [@​katlich112358](https://togithub.com/katlich112358) in [https:/processing/p5.js/pull/6455](https://togithub.com/processing/p5.js/pull/6455) - Create munusshih_gsoc\_2023.md by [@​munusshih](https://togithub.com/munusshih) in [https:/processing/p5.js/pull/6461](https://togithub.com/processing/p5.js/pull/6461) ##### Other Code Update - Ask to disable printing when print() called with no arguments by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6253](https://togithub.com/processing/p5.js/pull/6253) - fix textWidth() and textToPoints() by [@​munusshih](https://togithub.com/munusshih) in [https:/processing/p5.js/pull/6184](https://togithub.com/processing/p5.js/pull/6184) - Fix issue where nf with 0 'right' parameter returns undefined in string by [@​limzykenneth](https://togithub.com/limzykenneth) in [https:/processing/p5.js/pull/6291](https://togithub.com/processing/p5.js/pull/6291) - Update environment.js with fix for frameRate description by [@​quinton-ashley](https://togithub.com/quinton-ashley) in [https:/processing/p5.js/pull/6269](https://togithub.com/processing/p5.js/pull/6269) - Implement clip() to shapes by [@​davepagurek](https://togithub.com/davepagurek) in [https:/processing/p5.js/pull/6306](https://togithub.com/processing/p5.js/pull/6306) - Clarified workflow for contributing documentation by [@​thatguyseven](https://togithub.com/thatguyseven) in [https:/processing/p5.js/pull/6312](https://togithub.com/processing/p5.js/pull/6312) - Clears MediaElement canvas at the beginning of every frame by [@​donaldzhu](https://togithub.com/donaldzhu) in [https:/processing/p5.js/pull/6309](https://togithub.com/processing/p5.js/pull/6309) - Clean up gruntfile release related steps by [@​Qianqianye](https://togithub.com/Qianqianye) in [https:/processing/p5.js/pull/6321](https://togithub.com/processing/p5.js/pull/6321) - fix-return-type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [https:/processing/p5.js/pull/6326](https://togithub.com/processing/p5.js/pull/6326) - fix HALF_FLOAT by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [https:/processing/p5.js/pull/6330](https://togithub.com/processing/p5.js/pull/6330) - Added .gitattributes to Increase compatability with Window users and line endings by [@​SilasVM](https://togithub.com/SilasVM) in [https:/processing/p5.js/pull/6317](https://togithub.com/processing/p5.js/pull/6317) - update all contributors setup by [@​gr2m](https://togithub.com/gr2m) in [https:/processing/p5.js/pull/6341](https://togithub.com/processing/p5.js/pull/6341) - refine canvas' type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [https:/processing/p5.js/pull/6328](https://togithub.com/processing/p5.js/pull/6328) - MouseEvent, WheelEvent and KeyboardEvent type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [https:/processing/p5.js/pull/6329](https://togithub.com/processing/p5.js/pull/6329) - fixed-wrong-capture-size-and-freeze-issue by [@​Prateek93a](https://togithub.com/Prateek93a) in [https:/processing/p5.js/pull/5159](https://togithub.com/processing/p5.js/pull/5159) - add more event type by [@​asukaminato0721](https://togithub.com/asukaminato0721) in [https:/processing/p5.js/pull/6379](https://togithub.com/processing/p5.js/pull/6379) - Main by [@​j-adel](https://togithub.com/j-adel) in [https:/processing/p5.js/pull/6374](https://togithub.com/processing/p5.js/pull/6374) - Update labeler Github Action by [@​stampyzfanz](https://togithub.com/stampyzfanz) in [https:/processing/p5.js/pull/6395](https://togithub.com/processing/p5.js/pull/6395) - add unregisterMethod function by [@​capGoblin](https://togithub.com/capGoblin) in [https:/processing/p5.js/pull/6426](https://togithub.com/processing/p5.js/pull/6426) - add before/after preload and setup by [@​capGoblin](https://togithub.com/capGoblin) in [https:/processing/p5.js/pull/6433](https://togithub.com/processing/p5.js/pull/6433) - Fix: Misleading error message when NaN passed by [@​capGoblin](https://togithub.com/capGoblin) in [https:/processing/p5.js/pull/6464](https://togithub.com/processing/p5.js/pull/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 [https:/processing/p5.js/pull/6447](https://togithub.com/processing/p5.js/pull/6447) - Fix orphan canvas when sketch is removed before canvas creation by [@​limzykenneth](https://togithub.com/limzykenneth) in [https:/processing/p5.js/pull/6355](https://togithub.com/processing/p5.js/pull/6355) ##### Other Documentation Update - Fixed GitHub capitalization typo in contributor_docs by [@​SilasVM](https://togithub.com/SilasVM) in [https:/processing/p5.js/pull/6284](https://togithub.com/processing/p5.js/pull/6284) - Fixing typo in "What are issues?" by [@​snwarner22](https://togithub.com/snwarner22) in [https:/processing/p5.js/pull/6288](https://togithub.com/processing/p5.js/pull/6288) - Fixed GitHub spelling in CONTRIBUTING.md by [@​SilasVM](https://togithub.com/SilasVM) in [https:/processing/p5.js/pull/6295](https://togithub.com/processing/p5.js/pull/6295) - Fixed grammatical errors in contributor_guidelines.md by [@​thatguyseven](https://togithub.com/thatguyseven) in [https:/processing/p5.js/pull/6296](https://togithub.com/processing/p5.js/pull/6296) - Update documentation_style_guide.md with new guideline by [@​zelf0](https://togithub.com/zelf0) in [https:/processing/p5.js/pull/6334](https://togithub.com/processing/p5.js/pull/6334) - add missing code contributors to all contributors in README and `.all-contributors.rc` file by [@​gr2m](https://togithub.com/gr2m) in [https:/processing/p5.js/pull/6349](https://togithub.com/processing/p5.js/pull/6349) - docs(all-contributors): remove [@​stellartux](https://togithub.com/stellartux) as requested by [@​gr2m](https://togithub.com/gr2m) in [https:/processing/p5.js/pull/6368](https://togithub.com/processing/p5.js/pull/6368) - docs(src/utilities): Use `describe()` instead of `@alt` by [@​Zearin](https://togithub.com/Zearin) in [https:/processing/p5.js/pull/5598](https://togithub.com/processing/p5.js/pull/5598) - Fix typo in export path to fix dev mode by [@​mykongee](https://togithub.com/mykongee) in [https:/processing/p5.js/pull/6373](https://togithub.com/processing/p5.js/pull/6373) - Improve Readme for future Contributors to codebase by [@​Ayush23Dash](https://togithub.com/Ayush23Dash) in [https:/processing/p5.js/pull/6260](https://togithub.com/processing/p5.js/pull/6260) - Fixed mousePressed() Example Error by [@​Utkarsh3128](https://togithub.com/Utkarsh3128) in [https:/processing/p5.js/pull/6413](https://togithub.com/processing/p5.js/pull/6413) - Update README.md by [@​katlich112358](https://togithub.com/katlich112358) in [https:/processing/p5.js/pull/6458](https://togithub.com/processing/p5.js/pull/6458) - Fixed typing errors in validate_params.js file's documentation by [@​Garima3110](https://togithub.com/Garima3110) in [https:/processing/p5.js/pull/6473](https://togithub.com/processing/p5.js/pull/6473) - typo and unused variable from core by [@​benschac](https://togithub.com/benschac) in [https:/processing/p5.js/pull/6476](https://togithub.com/processing/p5.js/pull/6476) #### New Contributors 💗 - [@​munusshih](https://togithub.com/munusshih) made their first contribution in [https:/processing/p5.js/pull/6184](https://togithub.com/processing/p5.js/pull/6184) - [@​SilasVM](https://togithub.com/SilasVM) made their first contribution in [https:/processing/p5.js/pull/6284](https://togithub.com/processing/p5.js/pull/6284) - [@​snwarner22](https://togithub.com/snwarner22) made their first contribution in [https:/processing/p5.js/pull/6288](https://togithub.com/processing/p5.js/pull/6288) - [@​thatguyseven](https://togithub.com/thatguyseven) made their first contribution in [https:/processing/p5.js/pull/6296](https://togithub.com/processing/p5.js/pull/6296) - [@​OnexiMedina](https://togithub.com/OnexiMedina) made their first contribution in [https:/processing/p5.js/pull/6307](https://togithub.com/processing/p5.js/pull/6307) - [@​donaldzhu](https://togithub.com/donaldzhu) made their first contribution in [https:/processing/p5.js/pull/6309](https://togithub.com/processing/p5.js/pull/6309) - [@​gr2m](https://togithub.com/gr2m) made their first contribution in [https:/processing/p5.js/pull/6341](https://togithub.com/processing/p5.js/pull/6341) - [@​RandomGamingDev](https://togithub.com/RandomGamingDev) made their first contribution in [https:/processing/p5.js/pull/6276](https://togithub.com/processing/p5.js/pull/6276) - [@​mykongee](https://togithub.com/mykongee) made their first contribution in [https:/processing/p5.js/pull/6373](https://togithub.com/processing/p5.js/pull/6373) - [@​j-adel](https://togithub.com/j-adel) made their first contribution in [https:/processing/p5.js/pull/6374](https://togithub.com/processing/p5.js/pull/6374) - [@​meezwhite](https://togithub.com/meezwhite) made their first contribution in [https:/processing/p5.js/pull/6401](https://togithub.com/processing/p5.js/pull/6401) - [@​dewanshDT](https://togithub.com/dewanshDT) made their first contribution in [https:/processing/p5.js/pull/6403](https://togithub.com/processing/p5.js/pull/6403) - [@​Utkarsh3128](https://togithub.com/Utkarsh3128) made their first contribution in [https:/processing/p5.js/pull/6413](https://togithub.com/processing/p5.js/pull/6413) - [@​KeyboardSounds](https://togithub.com/KeyboardSounds) made their first contribution in [https:/processing/p5.js/pull/6420](https://togithub.com/processing/p5.js/pull/6420) - [@​capGoblin](https://togithub.com/capGoblin) made their first contribution in [https:/processing/p5.js/pull/6426](https://togithub.com/processing/p5.js/pull/6426) - [@​Gaurav-1306](https://togithub.com/Gaurav-1306) made their first contribution in [https:/processing/p5.js/pull/6446](https://togithub.com/processing/p5.js/pull/6446) - [@​katlich112358](https://togithub.com/katlich112358) made their first contribution in [https:/processing/p5.js/pull/6455](https://togithub.com/processing/p5.js/pull/6455) - [@​Garima3110](https://togithub.com/Garima3110) made their first contribution in [https:/processing/p5.js/pull/6473](https://togithub.com/processing/p5.js/pull/6473) - [@​benschac](https://togithub.com/benschac) made their first contribution in [https:/processing/p5.js/pull/6476](https://togithub.com/processing/p5.js/pull/6476) - [@​perminder-17](https://togithub.com/perminder-17) made their first contribution in [https:/processing/p5.js/pull/6488](https://togithub.com/processing/p5.js/pull/6488) - [@​lakshay451](https://togithub.com/lakshay451) made their first contribution in [https:/processing/p5.js/pull/6493](https://togithub.com/processing/p5.js/pull/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. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://togithub.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMS4wIiwidXBkYXRlZEluVmVyIjoiMzcuMzUuMiIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==--> Co-authored-by: Renovate Bot <[email protected]>
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(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:/RandomGamingDev/WebGLp5Instancing