Using Framebuffers for Diffuse and Specular Textures.

[Garima3110]

Increasing Access

Implementing the diffuse and specular textures in Framebuffers instead of p5.Graphics is a good idea by @davepagurek in the issue #6531.
This can improve performance by keeping everything in the same WebGL context and reducing the overhead of sending p5.Graphics data to the GPU every frame.

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
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature enhancement details

Calculate diffuse and specular textures in Framebuffers instead of p5.Graphics. It is known that keeping everything in the same WebGL context will be faster in general, and will avoid browser issues where it #6212 Additionally, we send p5.Graphics data to the GPU every frame when using one in a shader, but don't for p5.Framebuffer, so this will save on runtime performance.

[davepagurek]

@perminder-17 mentioned they were interested in working on this one.

Also just a small implementation clarification: diffuse textures are currently p5.Graphics, so they can be replaced directly with framebuffers. Specular textures are stored as MipmapTextures, which we don't need to change, but we currently create p5.Graphics in the process of creating those, and that intermediate step is a spot where we could use framebuffers instead.