-
-
Notifications
You must be signed in to change notification settings - Fork 646
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#1172] enable batch drawing for primitive shapes
Changes: - use g.LINES when possible/applicable - split the WebGLCompositor into two classes, `QuadCompositor` for Quad (Sprite) drawing, and `PrimitiveCompositor` to draw vertices - fixed binding of active shader when switching - color for drawing primitive is now a vertex attributes (as opposed to an uniform previously) TODO : - Optimize the `arcTo` function to use gl.LINES and enable batching for circle/ellipse and rounded rectangles - Cache of optimize triangulation for filling operations. currently the bottleneck when drawing large amount (> 1000) of shapes
- Loading branch information
Showing
8 changed files
with
157 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import GLShader from "../glshader.js"; | ||
| import VertexArrayBuffer from "../buffer/vertex.js"; | ||
| import primitiveVertex from "./../shaders/primitive.vert"; | ||
| import primitiveFragment from "./../shaders/primitive.frag"; | ||
| import Compositor from "./compositor.js"; | ||
|
|
||
| /** | ||
| * @classdesc | ||
| * A WebGL Compositor object. This class handles all of the WebGL state<br> | ||
| * Pushes texture regions or shape geometry into WebGL buffers, automatically flushes to GPU | ||
| * @augments Compositor | ||
| */ | ||
| export default class PrimitiveCompositor extends Compositor { | ||
|
|
||
| /** | ||
| * Initialize the compositor | ||
| * @ignore | ||
| */ | ||
| init (renderer) { | ||
| super.init(renderer); | ||
|
|
||
| // Load and create shader programs | ||
| this.primitiveShader = new GLShader(this.gl, primitiveVertex, primitiveFragment); | ||
|
|
||
| /// define all vertex attributes | ||
| this.addAttribute("aVertex", 2, this.gl.FLOAT, false, 0 * Float32Array.BYTES_PER_ELEMENT); // 0 | ||
| this.addAttribute("aColor", 4, this.gl.UNSIGNED_BYTE, true, 2 * Float32Array.BYTES_PER_ELEMENT); // 1 | ||
|
|
||
| this.vertexBuffer = new VertexArrayBuffer(this.vertexSize, 6); | ||
|
|
||
| // vertex buffer | ||
| this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.gl.createBuffer()); | ||
| this.gl.bufferData(this.gl.ARRAY_BUFFER, this.vertexBuffer.buffer, this.gl.STREAM_DRAW); | ||
| } | ||
|
|
||
| /** | ||
| * Reset compositor internal state | ||
| * @ignore | ||
| */ | ||
| reset() { | ||
| super.reset(); | ||
|
|
||
| // set the quad shader as the default program | ||
| this.useShader(this.primitiveShader); | ||
| } | ||
|
|
||
| /** | ||
| * Draw an array of vertices | ||
| * @param {GLenum} mode - primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES) | ||
| * @param {Point[]} verts - an array of vertices | ||
| * @param {number} [vertexCount=verts.length] - amount of points defined in the points array | ||
| */ | ||
| drawVertices(mode, verts, vertexCount = verts.length) { | ||
| var viewMatrix = this.viewMatrix; | ||
| var vertexBuffer = this.vertexBuffer; | ||
| var color = this.renderer.currentColor; | ||
| var alpha = this.renderer.getGlobalAlpha(); | ||
|
|
||
| if (vertexBuffer.isFull(vertexCount)) { | ||
| // is the vertex buffer full if we add more vertices | ||
| this.flush(); | ||
| } | ||
|
|
||
| // flush if drawing vertices with a different drawing mode | ||
| if (mode !== this.mode) { | ||
| this.flush(this.mode); | ||
| this.mode = mode; | ||
| } | ||
|
|
||
| if (!viewMatrix.isIdentity()) { | ||
| verts.forEach((vert) => { | ||
| viewMatrix.apply(vert); | ||
| vertexBuffer.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha)); | ||
| }); | ||
| } else { | ||
| verts.forEach((vert) => { | ||
| vertexBuffer.push(vert.x, vert.y, undefined, undefined, color.toUint32(alpha)); | ||
| }); | ||
| } | ||
|
|
||
| // disable batching for primitive using LINE_STRIP or LINE_LOOP | ||
| if (this.mode === this.gl.LINE_STRIP || this.mode === this.gl.LINE_LOOP) { | ||
| this.flush(this.mode); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,15 @@ | ||
| // Current vertex point | ||
| attribute vec2 aVertex; | ||
| attribute vec4 aColor; | ||
|
|
||
| // Projection matrix | ||
| uniform mat4 uProjectionMatrix; | ||
|
|
||
| // Vertex color | ||
| uniform vec4 uColor; | ||
|
|
||
| // Fragment color | ||
| varying vec4 vColor; | ||
|
|
||
| void main(void) { | ||
| // Transform the vertex position by the projection matrix | ||
| gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0); | ||
| // Pass the remaining attributes to the fragment shader | ||
| vColor = vec4(uColor.rgb * uColor.a, uColor.a); | ||
| vColor = vec4(aColor.bgr * aColor.a, aColor.a); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.