├── .gitignore ├── LICENSE.md ├── README.md ├── index.js ├── package.json ├── render.png └── 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 Mikko Haapoja 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 | # geo-chevron 2 | 3 | ![render](./render.png) 4 | [![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges) 5 | 6 | Creates a 2d chevron type shape in 3d space. 7 | 8 | ## Usage 9 | 10 | [![NPM](https://nodei.co/npm/geo-chevron.png)](https://www.npmjs.com/package/geo-chevron) 11 | 12 | ### Example 13 | 14 | An example can be found at `./test/index.js`. You can run this test by calling: 15 | ``` 16 | $ npm test 17 | ``` 18 | 19 | A simple usage example with default values being passed as settings: 20 | ```javascript 21 | var geoChevron = require('geo-chevron'); 22 | 23 | // geo will be a Object will two properties: 24 | // positions - the vertices 25 | // cells - the indices to draw the chevron 26 | var geo = geoChevron( { 27 | cellSize: 3, // 1 == points, 2 == lines, 3 == triangles 28 | x: 0, // x position of the center of the chevron 29 | y: 0, // y position of the center of the chevron 30 | z: 0 // z position of the center of the chevron 31 | width: 50, // how wide the chevron is 32 | depth: 100, // how far in depth the chevron goes 33 | thickness: 20 // how thick the chevron will be 34 | }); 35 | ``` 36 | 37 | ## License 38 | 39 | MIT, see [LICENSE.md](http://github.com/mikkoh/geo-chevron/blob/master/LICENSE.md) for details. 40 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = geoChevron; 2 | 3 | function geoChevron( options ) { 4 | 5 | var geo = { 6 | positions: [], 7 | cells: [] 8 | }; 9 | 10 | options = options || {}; 11 | options.cellSize = options.cellSize || 3; 12 | options.x = options.x || 0; 13 | options.y = options.y || 0; 14 | options.z = options.z || 0; 15 | options.width = options.width || 100; 16 | options.depth = options.depth || 50; 17 | options.thickness = options.thickness || 20; 18 | 19 | createGeometry( options, geo.positions, geo.cells ); 20 | 21 | return geo; 22 | } 23 | 24 | function createGeometry( options, positions, cells ) { 25 | 26 | var o = options; 27 | var halfWidth = o.width * 0.5; 28 | var halfDepth = o.depth * 0.5; 29 | var y = o.y; 30 | var tlX = -halfDepth + o.x; 31 | var tlZ = -halfWidth + o.z; 32 | var tliX = tlX + o.thickness + o.x; //inner 33 | var tliZ = tlZ + o.z; //inner 34 | var blX = tlX; 35 | var blZ = halfWidth; 36 | var bliX = tliX; //inner 37 | var bliZ = blZ; //inner 38 | var tipX = halfDepth; 39 | var tipZ = 0; 40 | var tipiX = halfDepth - o.thickness; //inner 41 | var tipiZ = 0; //inner 42 | var idxTL = 0; 43 | var idxTLI = 1; 44 | var idxTIPI = 2; 45 | var idxBLI = 3; 46 | var idxBL = 4; 47 | var idxTIP = 5; 48 | 49 | positions.push( [ tlX, y, tlZ ] ); 50 | positions.push( [ tliX, y, tliZ ] ); 51 | positions.push( [ tipiX, y, tipiZ ] ); 52 | positions.push( [ bliX, y, bliZ ] ); 53 | positions.push( [ blX, y, blZ ] ); 54 | positions.push( [ tipX, y, tipZ ] ); 55 | 56 | if( o.cellSize == 1 ) { 57 | 58 | cells.push( [ idxTL ], 59 | [ idxTLI ], 60 | [ idxTIPI ], 61 | [ idxBLI ], 62 | [ idxBL ], 63 | [ idxTIP ] ); 64 | } else if( o.cellSize == 2 ) { 65 | 66 | cells.push( [ idxTL, idxTLI ], 67 | [ idxTLI, idxTIP ], 68 | [ idxTIP, idxBLI ], 69 | [ idxBLI, idxBL ], 70 | [ idxBL, idxTIPI ], 71 | [ idxTIPI, idxTL ] ); 72 | } else if( o.cellSize == 3 ) { 73 | 74 | cells.push( [ idxTL, idxTLI, idxTIP ], 75 | [ idxTL, idxTIPI, idxTIP ], 76 | 77 | [ idxBL, idxBLI, idxTIP ], 78 | [ idxBL, idxTIPI, idxTIP ] ); 79 | } 80 | 81 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geo-chevron", 3 | "version": "1.0.3", 4 | "description": "Creates a 2d chevron type shape in 3d space", 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 | "devDependencies": { 14 | "wzrd": "^1.2.1", 15 | "gl-geometry": "^1.0.3", 16 | "gl-matrix": "^2.1.0", 17 | "gl-now": "^1.4.0", 18 | "mesh-combine": "^1.1.0", 19 | "simple-3d-shader": "0.0.0" 20 | }, 21 | "scripts": { 22 | "test": "open http://localhost:9966 && wzrd test/index.js" 23 | }, 24 | "keywords": [ 25 | "chevron,geometry,generate,mesh,webgl,3d,model" 26 | ], 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/mikkoh/geo-chevron.git" 30 | }, 31 | "homepage": "https://github.com/mikkoh/geo-chevron", 32 | "bugs": { 33 | "url": "https://github.com/mikkoh/geo-chevron/issues" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /render.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikkoh/geo-chevron/57b1355f8c5e8f9b8ba9d9aabc70d73341cfd397/render.png -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | var shell = require('gl-now')( { 2 | 3 | clearColor: [ 1, 1, 1, 1 ] 4 | }); 5 | var simple3DShader = require('simple-3d-shader'); 6 | var createGeometry = require('gl-geometry'); 7 | var meshCombine = require('mesh-combine'); 8 | var mat4 = require('gl-matrix').mat4; 9 | var geoChevron = require('./..'); 10 | 11 | var rotation = 0; 12 | var cellSize = 2; 13 | var gl, geo, shader, model, projection, drawWith; 14 | 15 | 16 | shell.on( 'gl-init', function() { 17 | 18 | var allGeo = []; 19 | 20 | gl = shell.gl; 21 | 22 | switch( cellSize ) { 23 | 24 | case 1: 25 | drawWith = gl.POINTS; 26 | break; 27 | 28 | case 2: 29 | drawWith = gl.LINES; 30 | break; 31 | 32 | case 3: 33 | drawWith = gl.TRIANGLES; 34 | break; 35 | } 36 | 37 | allGeo.push(geoChevron( { 38 | cellSize: cellSize, 39 | width: 230, 40 | depth: 300, 41 | thickness: 40 42 | })); 43 | 44 | allGeo.push(geoChevron( { 45 | cellSize: cellSize, 46 | y: 130 47 | })); 48 | 49 | allGeo.push(geoChevron( { 50 | cellSize: cellSize, 51 | y: -130, 52 | width: 300, 53 | depth: 100, 54 | thickness: 80 55 | })); 56 | 57 | 58 | geo = meshCombine( allGeo ); 59 | 60 | shader = simple3DShader( gl ); 61 | 62 | mesh = createGeometry( gl ) 63 | .attr( 'positions', geo.positions ) 64 | .faces( geo.cells, { size: cellSize } ); 65 | }); 66 | 67 | shell.on( 'gl-render', function() { 68 | 69 | projection = mat4.create(); 70 | mat4.perspective( projection, Math.PI * 0.25, shell.width / shell.height, 0.1, 10000 ); 71 | 72 | model = mat4.create(); 73 | mat4.translate( model, model, [ 0, 0, -1000 ] ); 74 | mat4.rotateX( model, model, Math.PI * 0.1 ); 75 | mat4.rotateY( model, model, rotation += 0.005 ); 76 | 77 | shader.bind(); 78 | 79 | shader.uniforms.projection = projection; 80 | shader.uniforms.model = model; 81 | shader.uniforms.view = mat4.create(); 82 | 83 | shader.attributes.color = [ 0, 0, 0 ]; 84 | 85 | mesh.bind( shader ); 86 | mesh.draw( drawWith ); 87 | mesh.unbind(); 88 | }); 89 | --------------------------------------------------------------------------------