├── .gitignore ├── LICENSE.md ├── README.md ├── index.js ├── package.json └── test └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | *.log 4 | .DS_Store 5 | bundle.js 6 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2014 Jam3 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 20 | OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webgl-to-canvas2d 2 | 3 | [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges) 4 | 5 | Convert a webgl context or a webgl canvas into a 2d canvas. 6 | 7 | ## Usage 8 | 9 | [![NPM](https://nodei.co/npm/webgl-to-canvas2d.png)](https://www.npmjs.com/package/webgl-to-canvas2d) 10 | 11 | ### `webglToCanvas2d(gl, [canvas2d])` 12 | 13 | `gl` can be a canvas using webglrenderingcontext or a webglrenderingcontext. 14 | `canvas2d` can be a canvas or a CanvasRenderingContext2D. 15 | 16 | The returned value will be a canvas using CanvasRenderingContext2D. 17 | 18 | 19 | ```javascript 20 | var webglToCanvas2d = require('webgl-to-canvas2d'); 21 | 22 | var glCanvas = document.body.appendChild(document.createElement('canvas')); 23 | var gl = require('gl-context')(glCanvas, {preserveDrawingBuffer: true}); 24 | var canvas2d; 25 | 26 | // RENDER SOME STUFF 27 | 28 | canvas2d = webglToCanvas2d(glCanvas); 29 | 30 | // or 31 | 32 | canvas2d = webglToCanvas2d(gl); 33 | ``` 34 | 35 | ## License 36 | 37 | MIT, see [LICENSE.md](http://github.com/Jam3/webgl-to-canvas2d/blob/master/LICENSE.md) for details. 38 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var canvasPixels = require('canvas-pixels').get3d; 2 | 3 | module.exports = function(webgl, canvas2D) { 4 | 5 | var outCanvas = canvas2D ? canvas2D.canvas || canvas2D : document.createElement('canvas'); 6 | var outContext = outCanvas.getContext('2d'); 7 | var outImageData; 8 | 9 | webgl = webgl instanceof WebGLRenderingContext ? webgl : webgl.getContext('webgl') || webgl.getContext('experimental-webgl'); 10 | 11 | outCanvas.width = webgl.canvas.width; 12 | outCanvas.height = webgl.canvas.height; 13 | outImageData = outContext.getImageData(0, 0, outCanvas.width, outCanvas.height); 14 | 15 | outImageData.data.set(new Uint8ClampedArray(canvasPixels(webgl).buffer)); 16 | outContext.putImageData(outImageData, 0, 0); 17 | outContext.translate(0, outCanvas.height); 18 | outContext.scale(1, -1); 19 | outContext.drawImage(outCanvas, 0, 0); 20 | outContext.setTransform(1, 0, 0, 1, 0, 0); 21 | 22 | return outCanvas; 23 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl-to-canvas2d", 3 | "version": "1.1.0", 4 | "description": "Convert a webgl context or webgl canvas into a 2d canvas", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "author": { 8 | "name": "Mikko Haapoja", 9 | "email": "me@mikkoh.com", 10 | "url": "https://github.com/mikkoh" 11 | }, 12 | "dependencies": { 13 | "canvas-pixels": "0.0.0" 14 | }, 15 | "devDependencies": { 16 | "gl-context": "^0.1.1", 17 | "gl-texture2d": "^2.0.8", 18 | "gl-texture2d-display": "^1.0.0", 19 | "tape": "^4.0.0" 20 | }, 21 | "scripts": { 22 | "test": "node test.js" 23 | }, 24 | "keywords": [ 25 | "webgl,2d,canvas,3d" 26 | ], 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/Jam3/webgl-to-canvas2d.git" 30 | }, 31 | "homepage": "https://github.com/Jam3/webgl-to-canvas2d", 32 | "bugs": { 33 | "url": "https://github.com/Jam3/webgl-to-canvas2d/issues" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | var webglToCanvas2d = require('./..'); 2 | var tape = require('tape'); 3 | var glCanvas = document.body.appendChild(document.createElement('canvas')); 4 | var gl = require('gl-context')(glCanvas, {preserveDrawingBuffer: true}); 5 | var createTexture = require('gl-texture2d'); 6 | var display = require('gl-texture2d-display'); 7 | var textureCanvas = document.createElement('canvas'); 8 | var textureContext = textureCanvas.getContext('2d'); 9 | var texture; 10 | 11 | textureCanvas.width = 200; 12 | textureCanvas.height = 200; 13 | 14 | glCanvas.width = textureCanvas.width; 15 | glCanvas.height = textureCanvas.height; 16 | 17 | drawCorners(); 18 | 19 | texture = createTexture(gl, textureCanvas); 20 | 21 | render(); 22 | doTests(); 23 | 24 | function doTests() { 25 | 26 | tape('test creating from canvas', function(t) { 27 | doChecks(t, glCanvas); 28 | t.end(); 29 | }); 30 | 31 | tape('test creating from webglcanvascontext', function(t) { 32 | doChecks(t, gl); 33 | t.end(); 34 | }); 35 | 36 | tape('test creating with target canvas', function(t) { 37 | 38 | var canvas = document.createElement('canvas'); 39 | var returnedCanvas = doChecks(t, glCanvas, canvas); 40 | 41 | t.equal(canvas, returnedCanvas, 'the same canvas was returned'); 42 | t.end(); 43 | }); 44 | 45 | tape('test creating with target canvas context', function(t) { 46 | 47 | var canvas = document.createElement('canvas'); 48 | var context = canvas.getContext('2d'); 49 | var returnedCanvas = doChecks(t, glCanvas, context); 50 | 51 | t.equal(canvas, returnedCanvas, 'the same canvas was returned'); 52 | t.end(); 53 | }); 54 | } 55 | 56 | function doChecks(t, gl, canvas2d) { 57 | var canvas2d = webglToCanvas2d(gl, canvas2d); 58 | var context = canvas2d.getContext('2d'); 59 | var data = context.getImageData(0, 0, canvas2d.width, canvas2d.height).data; 60 | var pixel; 61 | 62 | document.body.appendChild(canvas2d); 63 | 64 | t.ok(canvas2d instanceof HTMLCanvasElement, 'canvas was returned'); 65 | t.equal(canvas2d.width, glCanvas.width, 'width was correct'); 66 | t.equal(canvas2d.height, glCanvas.height, 'height was correct'); 67 | 68 | pixel = getPixel(data, 0, 0); 69 | t.equal(pixel[ 0 ], 255, 'top right red correct'); 70 | t.equal(pixel[ 1 ], 0, 'top right green correct'); 71 | t.equal(pixel[ 2 ], 0, 'top right blue correct'); 72 | 73 | pixel = getPixel(data, canvas2d.width - 1, canvas2d.height - 1); 74 | t.equal(pixel[ 0 ], 0, 'bottom right red correct'); 75 | t.equal(pixel[ 1 ], 0, 'bottom right green correct'); 76 | t.equal(pixel[ 2 ], 255, 'bottom right blue correct'); 77 | 78 | return canvas2d; 79 | } 80 | 81 | function getPixel(data, x, y) { 82 | 83 | var i = y * glCanvas.width * 4 + x * 4; 84 | 85 | return Array.prototype.slice.call(data, i, i + 4); 86 | } 87 | 88 | function render() { 89 | 90 | gl.viewport(0, 0, glCanvas.width, glCanvas.height); 91 | gl.clearColor(0, 0, 0, 1); 92 | gl.clear(gl.COLOR_BUFFER_BIT); 93 | 94 | display(texture); 95 | 96 | gl.finish(); 97 | } 98 | 99 | function drawCorners() { 100 | 101 | textureContext.fillStyle = '#F00'; 102 | textureContext.fillRect(0, 0, 10, 10); 103 | 104 | textureContext.fillStyle = '#00F'; 105 | textureContext.fillRect(glCanvas.width - 10, glCanvas.height - 10, 10, 10); 106 | } --------------------------------------------------------------------------------