├── .gitignore ├── .npmignore ├── LICENSE.md ├── README.md ├── css └── style.css ├── demo.frag ├── demo.js ├── index.glsl ├── index.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | bundle.js 5 | test 6 | test.js 7 | demo 8 | demo.* 9 | index.html 10 | example 11 | .npmignore -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | ===================== 3 | 4 | Copyright (c) 2016 [JC Leyba](https://github.com/Softwave) 5 | 6 | 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: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-superformula 2 | 3 | A GLSL function for generating 3D [supershapes](https://en.wikipedia.org/wiki/Superformula). 4 | 5 | Indended for use with [glslify](https://github.com/stackgl/glslify) and WebGL. 6 | 7 | Inspired by Daniel Shiffman's [3D Supershapes Processing tutorial](https://www.youtube.com/watch?v=akM4wMZIBWg). 8 | 9 | [Demo](https://softwave.github.io/glsl-superformula/) 10 | 11 | ## Screenshots 12 | 13 | ![screenshot](http://i.imgur.com/tA1uRcf.png) 14 | 15 | ## Usage 16 | 17 | [![NPM](https://nodei.co/npm/glsl-superformula.png)](https://nodei.co/npm/glsl-superformula/) 18 | 19 | ``` glsl 20 | #pragma glslify: superformula = require('glsl-superformula') 21 | 22 | vec2 doModel(vec3 p) { 23 | float id = 1.0; 24 | float d = length(p); 25 | float theta = atan(p.y / p.x); 26 | float phi = asin(p.z / d); 27 | 28 | float r1 = superformula(theta, 8.0, 60.0, 100.0, 30.0, 1.0, 1.0); 29 | float r2 = superformula(phi, 2.0, 10.0, 10.0, 10.0, 1.0, 1.0); 30 | 31 | vec3 q = r2 * vec3(r1 * cos(theta) * cos(phi), r1 * sin(theta) * cos(phi), sin(phi)); 32 | d = d - length(q); 33 | 34 | return vec2(d, id); 35 | } 36 | 37 | ``` 38 | 39 | ## License 40 | 41 | MIT. See [LICENSE.md](https://github.com/Softwave/glsl-superformula/blob/master/LICENSE.md) for details. -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | overflow: hidden; 3 | width: 100%; 4 | height: 100%; 5 | margin: 0px; 6 | background-color: #000000; 7 | font-family: 'Space Mono', monospace; 8 | font-weight: 800; 9 | } 10 | 11 | canvas { 12 | width: 100%; 13 | height: 100%; 14 | } 15 | 16 | #title { 17 | position: absolute; 18 | left: 0px; 19 | width: 100%; 20 | top: 0px; 21 | text-align: center; 22 | z-index: 10; 23 | font-size: 1.5em; 24 | color: #ffffff; 25 | } 26 | 27 | #ui { 28 | position: absolute; 29 | left: 0px; 30 | width: 100%; 31 | top: 0px; 32 | text-align: center; 33 | z-index: 10; 34 | font-size: 1.5em; 35 | color: #ffffff; 36 | } -------------------------------------------------------------------------------- /demo.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | uniform float iGlobalTime; 4 | uniform vec2 iResolution; 5 | 6 | vec2 doModel(vec3 p); 7 | 8 | #pragma glslify: raytrace = require('glsl-raytrace', map = doModel, steps = 90) 9 | #pragma glslify: normal = require('glsl-sdf-normal', map = doModel) 10 | #pragma glslify: camera = require('glsl-turntable-camera') 11 | #pragma glslify: superformula = require('./') 12 | 13 | float supershape(vec3 p) { 14 | float d = length(p); 15 | 16 | float theta = atan(p.y / p.x); 17 | float phi = asin(p.z / d); 18 | 19 | float r1=superformula(theta, 8.0, 60.0, 100.0, 30.0, 1.0, 1.0); 20 | float r2=superformula(phi, 2.0, 10.0, 10.0, 10.0, 1.0, 1.0); 21 | 22 | vec3 q = r2 * vec3(r1 * cos(theta) * cos(phi), r1 * sin(theta) * cos(phi), sin(phi)); 23 | d = d - length(q); 24 | 25 | return d; 26 | 27 | } 28 | 29 | vec2 doModel(vec3 p) { 30 | float id = 0.0; 31 | float d = supershape(p); 32 | 33 | return vec2(d, id); 34 | } 35 | 36 | 37 | void main() { 38 | vec3 color = vec3(0.0); 39 | vec3 ro, rd; 40 | 41 | float rotation = iGlobalTime; 42 | float height = 0.0; 43 | float dist = 8.0; 44 | camera(rotation, height, dist, iResolution.xy, ro, rd); 45 | 46 | vec2 t = raytrace(ro, rd, 20.0, 0.005); 47 | if (t.x > -0.5) { 48 | vec3 pos = ro + rd * t.x; 49 | vec3 nor = normal(pos); 50 | 51 | color = nor * 0.5 + 0.5; 52 | } 53 | 54 | gl_FragColor.rgb = color; 55 | gl_FragColor.a = 1.0; 56 | } -------------------------------------------------------------------------------- /demo.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | var toy = require('gl-toy') 3 | 4 | var shader = glslify('./demo.frag') 5 | var start = Date.now() 6 | 7 | toy(shader, function(gl, shader) { 8 | shader.uniforms.iResolution = [gl.drawingBufferWidth, gl.drawingBufferHeight] 9 | shader.uniforms.iGlobalTime = (Date.now() - start) / 1000 10 | }) 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /index.glsl: -------------------------------------------------------------------------------- 1 | float SuperFormula( float phi, float m, float n1, float n2, float n3, float a, float b ){ 2 | 3 | float t1 = abs((1.0 / a) * cos(m * phi / 4.0)); 4 | t1 = pow(t1, n2); 5 | 6 | float t2 = abs((a / b) * sin(m * phi / 4.0)); 7 | t2 = pow(t2, n3); 8 | 9 | float t3 = t1 + t2; 10 | 11 | float r = pow(t3, -1.0 / n1); 12 | 13 | return r; 14 | } 15 | 16 | #pragma glslify: export(SuperFormula) 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | glsl Supershapes 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
GLSL Supershapes
15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-superformula", 3 | "version": "1.0.3", 4 | "description": "A GLSL function for generating supershapes.", 5 | "main": "index.glsl", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "beefy --live=true demo.js:bundle.js -- -t glslify", 9 | "bundle": "browserify demo.js -o bundle.js -t glslify" 10 | }, 11 | "author": { 12 | "name": "JC Leyba", 13 | "email": "jcleyba92@gmail.com", 14 | "url": "http://s0ftwave.com/" 15 | }, 16 | "dependencies": {}, 17 | "devDependencies": { 18 | "a-big-triangle": "^1.0.0", 19 | "beefy": "^2.1.3", 20 | "browserify": "^9.0.3", 21 | "canvas-fit": "^1.3.0", 22 | "gl-context": "^0.1.1", 23 | "gl-shader": "^4.0.0", 24 | "gl-toy": "^2.0.3", 25 | "glsl-raytrace": "^1.0.0", 26 | "glsl-sdf-normal": "^1.0.0", 27 | "glsl-turntable-camera": "^1.0.0", 28 | "glslify": "^2.1.1" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "git://github.com/Softwave/glsl-superformula.git" 33 | }, 34 | "keywords": [ 35 | "glsl", 36 | "glslify", 37 | "webgl" 38 | ], 39 | "homepage": "https://github.com/Softwave/glsl-superformula", 40 | "bugs": { 41 | "url": "https://github.com/Softwave/glsl-superformula/issues" 42 | } 43 | } --------------------------------------------------------------------------------