├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── example └── example.js ├── package.json └── triangle.js /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules/* 16 | *.DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules/* 16 | *.DS_Store 17 | example/* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2013 Mikola Lysenko 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | a-big-triangle 2 | ============== 3 | Draws a big triangle that covers the entire viewport. Useful for GPGPU or when applying fullscreen postprocessing effects. 4 | 5 | If you're wondering *why* a big triangle and not a big square made from two smaller triangles, there are potentially significant [performance advantages](http://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/) in taking the former approach. 6 | 7 | ## Example 8 | 9 | ```javascript 10 | var shell = require("gl-now")() 11 | var drawTriangle = require("a-big-triangle") 12 | var createShader = require("gl-shader") 13 | 14 | var shader 15 | 16 | shell.on("gl-init", function() { 17 | shader = createShader(shell.gl, 18 | "precision mediump float;\ 19 | attribute vec2 position;\ 20 | varying vec2 uv;\ 21 | void main() {\ 22 | uv = position.xy;\ 23 | gl_Position = vec4(position.xy, 0.0, 1.0);\ 24 | }", 25 | "precision mediump float;\ 26 | varying vec2 uv;\ 27 | void main() {\ 28 | gl_FragColor = vec4(uv, 0, 1);\ 29 | }") 30 | }) 31 | 32 | shell.on("gl-render", function() { 33 | shader.bind() 34 | drawTriangle(shell.gl) 35 | }) 36 | ``` 37 | 38 | [Check it out in your browser](http://mikolalysenko.github.io/a-big-triangle/) 39 | 40 | ## Install 41 | 42 | ```sh 43 | npm install a-big-triangle 44 | ``` 45 | 46 | ## API 47 | 48 | ### `require("a-big-triangle")(gl)` 49 | Draws a fullscreen triangle. 50 | 51 | * `gl` is a WebGL context 52 | 53 | ## Credits 54 | (c) 2013 55 | -------------------------------------------------------------------------------- /example/example.js: -------------------------------------------------------------------------------- 1 | var shell = require("gl-now")() 2 | var drawTriangle = require("../triangle.js") 3 | var createShader = require("gl-shader") 4 | 5 | var shader 6 | 7 | shell.on("gl-init", function() { 8 | shader = createShader(shell.gl, 9 | "attribute vec2 position;\ 10 | varying vec2 uv;\ 11 | void main() {\ 12 | uv = position;\ 13 | gl_Position = vec4(position, 0.0, 1.0);\ 14 | }", 15 | "precision highp float;\ 16 | varying vec2 uv;\ 17 | void main() {\ 18 | gl_FragColor = vec4(uv, 0.0, 1.0);\ 19 | }") 20 | }) 21 | 22 | shell.on("gl-render", function() { 23 | shader.bind() 24 | shader.attributes.position.enable() 25 | drawTriangle(shell.gl) 26 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "a-big-triangle", 3 | "version": "1.0.3", 4 | "description": "Draws a big triangle", 5 | "main": "triangle.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "dependencies": { 10 | "gl-vao": "^1.2.0", 11 | "gl-buffer": "^2.1.1", 12 | "weak-map": "^1.0.5" 13 | }, 14 | "devDependencies": { 15 | "gl-now": "~0.0.4", 16 | "gl-shader": "~0.0.6" 17 | }, 18 | "scripts": { 19 | "test": "echo \"Error: no test specified\" && exit 1" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git://github.com/mikolalysenko/a-big-triangle.git" 24 | }, 25 | "keywords": [ 26 | "triangle", 27 | "webgl", 28 | "draw" 29 | ], 30 | "author": "Mikola Lysenko", 31 | "license": "MIT", 32 | "readmeFilename": "README.md", 33 | "gitHead": "1b45763e3004bc480c72848ba7d079c9fe65d2a1", 34 | "bugs": { 35 | "url": "https://github.com/mikolalysenko/a-big-triangle/issues" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /triangle.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | var weakMap = typeof WeakMap === 'undefined' ? require('weak-map') : WeakMap 4 | var createBuffer = require('gl-buffer') 5 | var createVAO = require('gl-vao') 6 | 7 | var TriangleCache = new weakMap() 8 | 9 | function createABigTriangle(gl) { 10 | 11 | var triangleVAO = TriangleCache.get(gl) 12 | var handle = triangleVAO && (triangleVAO._triangleBuffer.handle || triangleVAO._triangleBuffer.buffer) 13 | if(!handle || !gl.isBuffer(handle)) { 14 | var buf = createBuffer(gl, new Float32Array([-1, -1, -1, 4, 4, -1])) 15 | triangleVAO = createVAO(gl, [ 16 | { buffer: buf, 17 | type: gl.FLOAT, 18 | size: 2 19 | } 20 | ]) 21 | triangleVAO._triangleBuffer = buf 22 | TriangleCache.set(gl, triangleVAO) 23 | } 24 | triangleVAO.bind() 25 | gl.drawArrays(gl.TRIANGLES, 0, 3) 26 | triangleVAO.unbind() 27 | } 28 | 29 | module.exports = createABigTriangle 30 | --------------------------------------------------------------------------------