├── .npmignore ├── .gitignore ├── example.png ├── package.json ├── LICENSE ├── README.md ├── example.js └── index.js /.npmignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | -------------------------------------------------------------------------------- /example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wwwtyro/regl-atmosphere-envmap/HEAD/example.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "regl-atmosphere-envmap", 3 | "license": "Unlicense", 4 | "author": "Rye Terrell (http://wwwtyro.net)", 5 | "version": "1.0.5", 6 | "scripts": { 7 | "start": "budo -H 0.0.0.0 example.js:bundle.js --live", 8 | "build": "browserify index.js -s createAtmosphereRenderer -o lib/bundle.js" 9 | }, 10 | "browserify": { 11 | "transform": [ 12 | "glslify" 13 | ] 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/wwwtyro/regl-atmosphere-envmap.git" 18 | }, 19 | "keywords": [ 20 | "regl", 21 | "atmosphere", 22 | "skybox", 23 | "cubemap", 24 | "environment map" 25 | ], 26 | "main": "./lib/bundle.js", 27 | "description": "Easily generate an environment map, or skybox, of Earth atmosphere given a 3D vector representing the direction of the sun.", 28 | "dependencies": { 29 | "glsl-atmosphere": "^2.0.0", 30 | "glslify": "^6.4.1", 31 | "primitive-cube": "^2.0.1", 32 | "regl-render-envmap": "^1.0.4", 33 | "unindex-mesh": "^2.0.0" 34 | }, 35 | "devDependencies": { 36 | "budo": "^11.6.4", 37 | "gl-matrix": "^2.8.1", 38 | "regl": "^1.7.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # regl-atmosphere-envmap 2 | 3 | Easily generate an environment map, or skybox, of Earth atmosphere given a 3D vector representing the direction of the 4 | sun. 5 | 6 |

7 | 8 |

9 | 10 | ## Install 11 | 12 | ``` 13 | npm install regl-atmosphere-envmap 14 | ``` 15 | 16 | ## Usage 17 | 18 | ```js 19 | const createAtmosphereRenderer = require("regl-atmosphere-envmap"); 20 | 21 | const renderAtmosphere = createAtmosphereRenderer(regl); 22 | 23 | const envMap = renderAtmosphere(opts); 24 | ``` 25 | 26 | `createAtmosphereRenderer` takes a regl context as a parameter, and returns the function `renderAtmosphere`. 27 | 28 | `renderAtmosphere` takes an `opts` parameter and returns a regl framebufferCube object that can be immediately used as 29 | a `samplerCube` in your shaders, or passed back into the `renderAtmosphere` function to update it. 30 | 31 | The `opts` parameter is an object with the following (optional) members: 32 | 33 | * **sunDirection**: the vector that points from the origin to the sun, 3D vector, default [0, 0.25, -1.0] 34 | * **resolution**: the resolution of each square face of the environment cubemap if `cubeFBO` is not provided, int, default 1024 35 | * **cubeFBO**: the regl `framebufferCube` object that will be returned, default `regl.framebufferCube(opts.resolution)` 36 | -------------------------------------------------------------------------------- /example.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const glsl = require("glslify"); 4 | const REGL = require("regl"); 5 | const createCube = require("primitive-cube"); 6 | const unindex = require("unindex-mesh"); 7 | const mat4 = require("gl-matrix").mat4; 8 | 9 | const createAtmosphereRenderer = require("./index"); 10 | 11 | const regl = REGL(); 12 | 13 | const cube = unindex(createCube(1)); 14 | 15 | const renderAtmosphere = createAtmosphereRenderer(regl); 16 | const envMap = renderAtmosphere({ 17 | sunDirection: [0, 0.25, -1], 18 | }); 19 | 20 | const skyboxCommand = regl({ 21 | vert: glsl` 22 | precision highp float; 23 | attribute vec3 position; 24 | uniform mat4 model, view, projection; 25 | varying vec3 pos; 26 | void main() { 27 | gl_Position = projection * view * model * vec4(position, 1); 28 | pos = position; 29 | } 30 | `, 31 | frag: glsl` 32 | precision highp float; 33 | uniform samplerCube envMap; 34 | varying vec3 pos; 35 | void main() { 36 | gl_FragColor = textureCube(envMap, normalize(pos)); 37 | } 38 | `, 39 | attributes: { 40 | position: cube, 41 | }, 42 | uniforms: { 43 | model: regl.prop("model"), 44 | view: regl.prop("view"), 45 | projection: regl.prop("projection"), 46 | envMap: regl.prop("envMap"), 47 | }, 48 | viewport: regl.prop("viewport"), 49 | count: cube.length / 3, 50 | }); 51 | 52 | function loop() { 53 | const t = performance.now(); 54 | const model = mat4.create(); 55 | mat4.rotateY(model, model, t * 0.002); 56 | const view = mat4.lookAt([], [0, 1, 2], [0, 0, 0], [0, 1, 0]); 57 | const projection = mat4.perspective( 58 | [], 59 | Math.PI / 3, 60 | window.innerWidth / window.innerHeight, 61 | 0.1, 62 | 1000 63 | ); 64 | 65 | regl.clear({ 66 | color: [1, 1, 1, 1], 67 | depth: 1, 68 | }); 69 | 70 | skyboxCommand({ 71 | model: model, 72 | view: view, 73 | projection: projection, 74 | envMap: envMap, 75 | viewport: { 76 | x: 0, 77 | y: 0, 78 | width: window.innerWidth, 79 | height: window.innerHeight, 80 | }, 81 | }); 82 | 83 | requestAnimationFrame(loop); 84 | } 85 | 86 | loop(); 87 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const glsl = require("glslify"); 4 | const createCube = require("primitive-cube"); 5 | const unindex = require("unindex-mesh"); 6 | const renderEnvMap = require("regl-render-envmap"); 7 | 8 | module.exports = function createAtmosphereRenderer(regl) { 9 | const cube = unindex(createCube(1)); 10 | 11 | const envmapCommand = regl({ 12 | vert: glsl(` 13 | precision highp float; 14 | 15 | attribute vec3 position; 16 | 17 | uniform mat4 view, projection; 18 | 19 | varying vec3 pos; 20 | 21 | void main() { 22 | gl_Position = projection * view * vec4(position, 1); 23 | pos = position; 24 | } 25 | `), 26 | frag: glsl(` 27 | precision highp float; 28 | 29 | uniform vec3 sundir; 30 | 31 | varying vec3 pos; 32 | 33 | #pragma glslify: atmosphere = require(glsl-atmosphere) 34 | 35 | void main() { 36 | vec3 color = atmosphere( 37 | normalize(pos), 38 | vec3(0,6372e3,0), 39 | normalize(sundir), 40 | 22.0, 41 | 6371e3, 42 | 6471e3, 43 | vec3(5.5e-6, 13.0e-6, 22.4e-6), 44 | 21e-6, 45 | 8e3, 46 | 1.2e3, 47 | 0.758 48 | ); 49 | 50 | gl_FragColor = vec4(color, 1); 51 | } 52 | `), 53 | attributes: { 54 | position: cube, 55 | }, 56 | uniforms: { 57 | sundir: regl.prop("sundir"), 58 | view: regl.prop("view"), 59 | projection: regl.prop("projection"), 60 | }, 61 | viewport: regl.prop("viewport"), 62 | framebuffer: regl.prop("framebuffer"), 63 | count: cube.length / 3, 64 | }); 65 | 66 | function render(opts) { 67 | opts = opts || {}; 68 | opts.sunDirection = 69 | opts.sunDirection === undefined ? [0, 0.25, -1] : opts.sunDirection; 70 | opts.resolution = opts.resolution === undefined ? 1024 : opts.resolution; 71 | 72 | function renderer(config) { 73 | regl.clear({ 74 | color: [0, 0, 0, 1], 75 | depth: 1, 76 | framebuffer: config.framebuffer, 77 | }); 78 | envmapCommand({ 79 | view: config.view, 80 | projection: config.projection, 81 | viewport: config.viewport, 82 | framebuffer: config.framebuffer, 83 | sundir: opts.sunDirection, 84 | }); 85 | } 86 | 87 | return renderEnvMap(regl, renderer, { 88 | resolution: opts.resolution, 89 | cubeFBO: opts.cubeFBO, 90 | }); 91 | } 92 | 93 | return render; 94 | }; 95 | --------------------------------------------------------------------------------