-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
support baseInstance/baseVertex draw and multidraw calls
- Loading branch information
1 parent
151ef6d
commit 1894707
Showing
5 changed files
with
207 additions
and
11 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>PicoGL.js: Multi-draw</title> | ||
| <meta charset="utf-8"> | ||
| <script src="utils/compatibility.js"></script> | ||
| <script src="utils/utils.js"></script> | ||
| <link rel="stylesheet" href="../site/css/picogl-example.css"> | ||
| </head> | ||
| <!-- | ||
| The MIT License (MIT) | ||
| Copyright (c) 2017 Tarek Sherif | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy of | ||
| this software and associated documentation files (the "Software"), to deal in | ||
| the Software without restriction, including without limitation the rights to | ||
| use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of | ||
| the Software, and to permit persons to whom the Software is furnished to do so, | ||
| subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS | ||
| FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR | ||
| COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER | ||
| IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN | ||
| CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | ||
| --> | ||
| <body> | ||
| <div id="example-title"> | ||
| PicoGL.js Example: Multi-draw | ||
| <div> | ||
| <a href="https://github.com/tsherif/picogl.js/blob/master/examples/instanced.html">Source code</a> | ||
| </div> | ||
| </div> | ||
| <canvas id="gl-canvas"></canvas> | ||
| <script type="shader/vs" id="vs"> | ||
| #version 300 es | ||
| #extension GL_ANGLE_multi_draw : require | ||
|
|
||
| layout(location=0) in vec4 position; | ||
| layout(location=1) in float verticalOffset; | ||
| layout(location=2) in vec4 color; | ||
|
|
||
| out vec4 vColor; | ||
| void main() { | ||
| vColor = color; | ||
| gl_Position = position; | ||
| gl_Position.xy += vec2(-0.6 + 0.4 * float(gl_DrawID), verticalOffset); | ||
| } | ||
| </script> | ||
| <script type="shader/fs" id="fs"> | ||
| #version 300 es | ||
| precision highp float; | ||
|
|
||
| in vec4 vColor; | ||
|
|
||
| out vec4 fragColor; | ||
| void main() { | ||
| fragColor = vColor; | ||
| } | ||
| </script> | ||
|
|
||
| <script type="module"> | ||
| import { PicoGL } from "../src/picogl.js"; | ||
|
|
||
| if (!testExtension("WEBGL_multi_draw_instanced_base_vertex_base_instance") || !testExtension("WEBGL_draw_instanced_base_vertex_base_instance")) { | ||
| document.body.innerHTML = 'This example requires extension <b>WEBGL_multi_draw_instanced_base_vertex_base_instance</b> which is not supported on this system. You may need to enable <b>WebGL Draft Extensions</b> in your browser, via <b><code>chrome://flags</code></b> in Google Chrome, or <b><code>about:config</code></b> in Firefox.'; | ||
| } | ||
|
|
||
| let canvas = document.getElementById("gl-canvas"); | ||
| canvas.width = window.innerWidth; | ||
| canvas.height = window.innerHeight; | ||
|
|
||
| let app = PicoGL.createApp(canvas) | ||
| .clearColor(0.0, 0.0, 0.0, 1.0); | ||
|
|
||
| window.onresize = function() { | ||
| app.resize(window.innerWidth, window.innerHeight); | ||
| } | ||
|
|
||
| // PROGRAM | ||
| let vsSource = document.getElementById("vs").text; | ||
| let fsSource = document.getElementById("fs").text; | ||
|
|
||
| // PER-VERTEX POSITIONS | ||
| let positions = app.createVertexBuffer(PicoGL.FLOAT, 2, new Float32Array([ | ||
| // Triangle positions | ||
| -0.15, -0.15, | ||
| 0.15, -0.15, | ||
| 0.0, 0.15, | ||
| // Square positions | ||
| -0.15, 0.15, | ||
| -0.15, -0.15, | ||
| 0.15, -0.15, | ||
| -0.15, 0.15, | ||
| 0.15, -0.15, | ||
| 0.15, 0.15 | ||
| ])); | ||
|
|
||
| // PER-INSTANCE OFFSETS AND COLORS | ||
| let verticalOffets = app.createVertexBuffer(PicoGL.FLOAT, 1, new Float32Array([ | ||
| 0.5, | ||
| 0.0, | ||
| -0.5 | ||
| ])); | ||
|
|
||
| let colors = app.createVertexBuffer(PicoGL.UNSIGNED_BYTE, 3, new Uint8Array([ | ||
| 255, 0, 0, | ||
| 0, 255, 0, | ||
| 0, 0, 255 | ||
| ])); | ||
|
|
||
| let triangleArray = app.createVertexArray() | ||
| .vertexAttributeBuffer(0, positions) | ||
| .instanceAttributeBuffer(1, verticalOffets) | ||
| .instanceAttributeBuffer(2, colors, { normalized: true }); | ||
|
|
||
|
|
||
| // USE PARALLEL SHADER COMPILATION IF AVAILABLE | ||
| // https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile/ | ||
| app.createPrograms([vsSource, fsSource]).then(([program]) => { | ||
| let drawCall = app.createDrawCall(program, triangleArray) | ||
| .drawRanges( | ||
| [0, 3, 2, 1], | ||
| [3, 6, 2, 1], | ||
| [3, 6, 2], | ||
| [0, 3, 3], | ||
| ); | ||
|
|
||
| app.clear(); | ||
| drawCall.draw(); | ||
|
|
||
| // CLEANUP | ||
| program.delete(); | ||
| positions.delete(); | ||
| verticalOffets.delete(); | ||
| colors.delete(); | ||
| triangleArray.delete(); | ||
| }); | ||
|
|
||
|
|
||
| </script> | ||
| <a href="https://github.com/tsherif/picogl.js" id="github-ribbon"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> | ||
| <script src="../site/js/iframe.js"></script> | ||
| </body> | ||
| </html> |
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