├── article
    ├── subthing.png
    ├── antialiasing.png
    ├── iterations.png
    ├── linear_fog.png
    ├── perspective.png
    ├── repetition.png
    ├── softshadows.png
    ├── twisted_box.png
    ├── window-to-uv.png
    ├── modulo_preview.png
    ├── ambientocclusion.png
    ├── raymarching-alg.png
    ├── subtract_modulo.png
    ├── subtract_modulo2.png
    ├── eq-window-to-world-ortho.png
    ├── eq-window-to-world-perspective.png
    └── raymarch-distance-fields.txt
├── src
    ├── fileio.h
    ├── fileio.cpp
    ├── opengl.h
    ├── opengl.cpp
    └── main.cpp
├── .gitignore
├── data
    ├── raymarch.vs
    ├── default.vs
    ├── default.fs
    └── raymarch.fs
├── README.md
├── raymarch-dev.md
└── webgl
    ├── webgl-utils.js
    ├── raymarching.js
    ├── raymarching.html
    └── gl-matrix-min.js


/article/subthing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/subthing.png


--------------------------------------------------------------------------------
/src/fileio.h:
--------------------------------------------------------------------------------
1 | #include <fstream>
2 | 
3 | bool readFile(const char *filename, std::string &dest);


--------------------------------------------------------------------------------
/article/antialiasing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/antialiasing.png


--------------------------------------------------------------------------------
/article/iterations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/iterations.png


--------------------------------------------------------------------------------
/article/linear_fog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/linear_fog.png


--------------------------------------------------------------------------------
/article/perspective.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/perspective.png


--------------------------------------------------------------------------------
/article/repetition.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/repetition.png


--------------------------------------------------------------------------------
/article/softshadows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/softshadows.png


--------------------------------------------------------------------------------
/article/twisted_box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/twisted_box.png


--------------------------------------------------------------------------------
/article/window-to-uv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/window-to-uv.png


--------------------------------------------------------------------------------
/article/modulo_preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/modulo_preview.png


--------------------------------------------------------------------------------
/article/ambientocclusion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/ambientocclusion.png


--------------------------------------------------------------------------------
/article/raymarching-alg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/raymarching-alg.png


--------------------------------------------------------------------------------
/article/subtract_modulo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/subtract_modulo.png


--------------------------------------------------------------------------------
/article/subtract_modulo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/subtract_modulo2.png


--------------------------------------------------------------------------------
/article/eq-window-to-world-ortho.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/eq-window-to-world-ortho.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.sdf
 2 | *.sln
 3 | *.vcxproj
 4 | *.vcxproj.user
 5 | *.vcxproj.filters
 6 | *.opensdf
 7 | *.v11.suo
 8 | bin
 9 | ipch
10 | obj


--------------------------------------------------------------------------------
/article/eq-window-to-world-perspective.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lightbits/ray-march/HEAD/article/eq-window-to-world-perspective.png


--------------------------------------------------------------------------------
/data/raymarch.vs:
--------------------------------------------------------------------------------
 1 | #version 140
 2 | 
 3 | in vec2 position;
 4 | smooth out vec2 uv;
 5 | 
 6 | void main()
 7 | {
 8 | 	uv = position;
 9 | 	gl_Position = vec4(position.xy, 0.0f, 1.0f);
10 | }


--------------------------------------------------------------------------------
/data/default.vs:
--------------------------------------------------------------------------------
 1 | #version 140
 2 | 
 3 | in vec3 position;
 4 | in vec2 texel;
 5 | in vec4 color;
 6 | 
 7 | out vec2 vertTexel;
 8 | out vec4 vertColor;
 9 | 
10 | void main()
11 | {
12 | 	vertTexel = texel;
13 | 	vertColor = color;
14 | 	gl_Position = vec4(position.xyz, 1.0f);
15 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Raymarching Distance Fields
2 | =========
3 | Rendering procedural 3D geometry by raymarching through a distance field.
4 | See `raymarch-dev.md` for details.
5 | 
6 | An interactive WebGL demo can be found [here](https://dl.dropboxusercontent.com/u/27844576/raymarch/raymarching.html)
7 | 


--------------------------------------------------------------------------------
/data/default.fs:
--------------------------------------------------------------------------------
 1 | #version 140
 2 | 
 3 | in vec2 vertTexel;
 4 | in vec4 vertColor;
 5 | 
 6 | out vec4 fragColor;
 7 | 
 8 | uniform sampler2D tex;
 9 | // uniform float texBlend;
10 | 
11 | void main()
12 | {
13 | 	fragColor = texture(tex, vertTexel);
14 | 	// fragColor = mix(vertColor, texture(tex, vertTexel), texBlend);
15 | }


--------------------------------------------------------------------------------
/src/fileio.cpp:
--------------------------------------------------------------------------------
 1 | #include <src/fileio.h>
 2 | 
 3 | bool readFile(const char *filename, std::string &dest)
 4 | {
 5 | 	std::ifstream in(filename, std::ios::in | std::ios::binary);
 6 | 	if(!in.is_open())
 7 | 		return false;
 8 | 
 9 | 	if(in.good())
10 | 	{
11 | 		in.seekg(0, std::ios::end);			// Set get position to end
12 | 		dest.resize(in.tellg());			// Resize string to support enough bytes
13 | 		in.seekg(0, std::ios::beg);			// Set get position to beginning
14 | 		in.read(&dest[0], dest.size());		// Read file to string
15 | 		in.close();
16 | 	}
17 | 
18 | 	return true;
19 | }


--------------------------------------------------------------------------------
/src/opengl.h:
--------------------------------------------------------------------------------
 1 | /*
 2 | Provides functions for context creation and destruction, as well as OpenGL helper functions such
 3 | as compiling shaders and GLSL programs.
 4 | */
 5 | 
 6 | #include <glload/gl_3_1_comp.h> // OpenGL version 3.1, compatability profile
 7 | #include <glload/gll.hpp>		// The C-style loading interface
 8 | #include <GL/glfw.h>			// Context
 9 | #include <glm/glm.hpp>			// OpenGL mathematics
10 | #include <glm/gtc/type_ptr.hpp> // for value_ptr(matrix)
11 | #include <string>
12 | 
13 | const int OPENGL_VERSION_MAJOR = 3;
14 | const int OPENGL_VERSION_MINOR = 1; 
15 | 
16 | bool createContext(const char *title, int w, int h, int depthbits, int stencilbits, int fsaa, bool fullscreen);
17 | void destroyContext();
18 | GLuint compileShader(GLenum shaderType, GLsizei count, const std::string &shaderSrc);
19 | GLuint createProgram(GLuint vertexShader, GLuint fragmentShader, GLuint geometryShader = 0);


--------------------------------------------------------------------------------
/src/opengl.cpp:
--------------------------------------------------------------------------------
  1 | #include <src/opengl.h>
  2 | #include <vector>
  3 | #include <iostream>
  4 | 
  5 | bool createContext(const char *title, int width, int height, 
  6 | int depthbits, int stencilbits, int fsaa, bool fullscreen)
  7 | {
  8 | 	if(glfwInit() != GL_TRUE)
  9 | 		return false;
 10 | 
 11 | 	glfwOpenWindowHint(GLFW_OPENGL_PROFILE,			0);	// 0 lets the system choose the profile
 12 | 	glfwOpenWindowHint(GLFW_OPENGL_VERSION_MAJOR,	OPENGL_VERSION_MAJOR);
 13 | 	glfwOpenWindowHint(GLFW_OPENGL_VERSION_MINOR,	OPENGL_VERSION_MINOR);
 14 | 	glfwOpenWindowHint(GLFW_FSAA_SAMPLES,			fsaa);
 15 | 	glfwOpenWindowHint(GLFW_WINDOW_NO_RESIZE,		GL_TRUE);
 16 | 
 17 | 	if(glfwOpenWindow(
 18 | 		width, height,
 19 | 		0, 0, 0, 0, // Default color bits
 20 | 		depthbits, stencilbits,
 21 | 		(fullscreen ? GLFW_FULLSCREEN : GLFW_WINDOW)) != GL_TRUE)
 22 | 		return false;
 23 | 
 24 | 	glfwSetWindowTitle(title);
 25 | 
 26 | 	// Note that this function fails if no GL context has been made current
 27 | 	if(glload::LoadFunctions() == glload::LS_LOAD_FAILED)
 28 | 		return false;
 29 | 	
 30 | 	std::cout						<<"Hello World!"<<std::endl<<"Running OpenGL ";
 31 | 	std::cout						<<glfwGetWindowParam(GLFW_OPENGL_VERSION_MAJOR)<<".";
 32 | 	std::cout						<<glfwGetWindowParam(GLFW_OPENGL_VERSION_MINOR)<<std::endl;
 33 | 	std::cout<<"Debug context: "	<<(glfwGetWindowParam(GLFW_OPENGL_DEBUG_CONTEXT) ? "true" : "false")<<std::endl;
 34 | 	std::cout<<"HW accelerated: "	<<(glfwGetWindowParam(GLFW_ACCELERATED) ? "true" : "false")<<std::endl;
 35 | 	std::cout<<"Depth bits: "		<<glfwGetWindowParam(GLFW_DEPTH_BITS)<<std::endl;
 36 | 	std::cout<<"Stencil bits: "		<<glfwGetWindowParam(GLFW_STENCIL_BITS)<<std::endl;
 37 | 	std::cout<<"FSAA samples: "		<<glfwGetWindowParam(GLFW_FSAA_SAMPLES)<<std::endl;
 38 | 	std::cout<<"Vendor: "			<<glGetString(GL_VENDOR)<<std::endl;
 39 | 	std::cout<<"Renderer: "			<<glGetString(GL_RENDERER)<<std::endl;
 40 | 	std::cout<<"GL ver.: "			<<glGetString(GL_VERSION)<<std::endl;
 41 | 	std::cout<<"GLSL ver.: "		<<glGetString(GL_SHADING_LANGUAGE_VERSION)<<std::endl;
 42 | 
 43 | 	return true;
 44 | }
 45 | 
 46 | void destroyContext()
 47 | {
 48 | 	glfwTerminate();
 49 | }
 50 | 
 51 | GLuint compileShader(GLenum shaderType, GLsizei count, const std::string &shaderSrc)
 52 | {
 53 | 	const char *shaderSrcStr = shaderSrc.c_str();
 54 | 	GLuint shader = glCreateShader(shaderType);
 55 | 	glShaderSource(shader, count, &shaderSrcStr, NULL);
 56 | 	glCompileShader(shader);
 57 | 
 58 | 	// Check status
 59 | 	GLint status;
 60 | 	glGetShaderiv(shader, GL_COMPILE_STATUS, &status);
 61 | 	if(status == GL_FALSE)
 62 | 	{
 63 | 		GLint infoLogLength;
 64 | 		glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &infoLogLength);
 65 | 		GLchar *infoLog = new GLchar[infoLogLength + 1];
 66 | 		glGetShaderInfoLog(shader, infoLogLength, NULL, infoLog);
 67 | 		std::cerr<<"Compile failure: "<<infoLog<<std::endl;
 68 | 		delete[] infoLog;
 69 | 	}
 70 | 
 71 | 	return shader;
 72 | }
 73 | 
 74 | GLuint createProgram(GLuint vertexShader, GLuint fragmentShader, GLuint geometryShader)
 75 | {
 76 | 	GLuint program = glCreateProgram();
 77 | 
 78 | 	if(vertexShader != 0) glAttachShader(program, vertexShader);
 79 | 	if(fragmentShader != 0) glAttachShader(program, fragmentShader);
 80 | 	if(geometryShader != 0) glAttachShader(program, geometryShader);
 81 | 
 82 | 	glLinkProgram(program);
 83 | 
 84 | 	// Check for (and print) errors
 85 | 	GLint status;
 86 | 	glGetProgramiv(program, GL_LINK_STATUS, &status);
 87 | 	if(status == GL_FALSE)
 88 | 	{
 89 | 		GLint infoLogLength;
 90 | 		glGetProgramiv(program, GL_INFO_LOG_LENGTH, &infoLogLength);
 91 | 
 92 | 		GLchar *strInfoLog = new GLchar[infoLogLength + 1];
 93 | 		glGetProgramInfoLog(program, infoLogLength, NULL, strInfoLog);
 94 | 		std::cerr<<"Linker failure: "<<std::endl<<strInfoLog<<std::endl;
 95 | 		delete[] strInfoLog;
 96 | 	}
 97 | 
 98 | 	if(vertexShader != 0) glDetachShader(program, vertexShader);
 99 | 	if(fragmentShader != 0) glDetachShader(program, fragmentShader);
100 | 	if(geometryShader != 0) glDetachShader(program, geometryShader);
101 | 
102 | 	return program;
103 | }


--------------------------------------------------------------------------------
/raymarch-dev.md:
--------------------------------------------------------------------------------
  1 | Raymarching Distance Fields Development Description
  2 | ============================================
  3 | 
  4 | Contents
  5 | --------
  6 | *	The raymarching algorithm
  7 | *	Orthographic scene
  8 | *	Transformations and perspective
  9 | *	Shading
 10 | *	Displaying the results
 11 | *	Resources
 12 | 
 13 | The raymarching algorithm
 14 | -------------------------
 15 | The raymarching algorithm being used is inspired by the work of Inigo Quilez in the demoscene.
 16 | The algorithm can be formulated as such:
 17 | 
 18 | ###Problem:###
 19 | For each pixel in the result image, we wish to cast a ray into the world and find the closest surface intersection.
 20 | 
 21 | ###Solution:###
 22 | Instead of analytically solving the ray intersection problem, we look for an approximation.
 23 | First, we define our scene using distance functions that, for any given point in the world, return the
 24 | closest distance from the point to a surface.
 25 | 
 26 | For example, the (signed) distance function for a sphere centered at the origin would be:
 27 | ```c
 28 | float sdSphere(vec3 p, float radius) {
 29 | 	return length(p) - radius;
 30 | }
 31 | ```
 32 | The distance function for the composed scene will then be the minimum of all the individual distance functions.
 33 | 
 34 | To solve for intersection, we march along the ray in variable steps. That is: for any point along the ray, we find the smallest distance to any surface in the scene and step forward this distance. Repeat until the distance is below a given epsilon. This way we can speed up the raymarching, and prevent missing surfaces
 35 | 
 36 | Displaying the results
 37 | ---------------------
 38 | Using OpenGL we create a quadrilateral and a texture to be rendered onto that quad.
 39 | This allows us to render at a resolution lower than the window and simply scale the quad in the vertex shader.
 40 | The raymarching algorithm will be implemented in the fragment shader.
 41 | 
 42 | Perspective
 43 | -----------
 44 | An advantage of ray-casting-based rendering approaches is that changing from an orthographic view to a
 45 | perspective view does not change the behaviour of the rays.
 46 | 
 47 | A perspective view can be modeled by positioning the eye somewhere in the world, and defining the orientation
 48 | of the image plane and the distance from the eye to the plane.
 49 | 
 50 | We define the orientation of the image plane using a right-vector and an up-vector. The crossproduct of these
 51 | gives us the forward-vector. If we wanted an orthographic view, all the rays would be cast parallell to this direction.
 52 | 
 53 | Image plane position = s = eye + focalLength * (right x up) + u * right + v * up
 54 | Ray direction = d = normalize(s - eye) = focalLength * (right x up) + u * right + v * up
 55 | 
 56 | Dependencies
 57 | ------------
 58 | *	[GLFW](http://www.glfw.org/docs/3.0/quick.html)
 59 | *	[OpenGL Mathematics (GLM)](http://glm.g-truc.net/)
 60 | 
 61 | References
 62 | ----------
 63 | ###OpenGL###
 64 | *	[Rendering to texture](http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-14-render-to-texture/)
 65 | *	[glDrawPixels](http://www.opengl.org/sdk/docs/man2/xhtml/glDrawPixels.xml)
 66 | 
 67 | ###Raymarching###
 68 | *	[Presentation by iq](http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf)
 69 | *	[Distance functions](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
 70 | *	[Camera](http://sizecoding.blogspot.no/2008/12/code-for-moving-camera-in-glsl.html)
 71 | *	http://www.rpenalva.com/blog/?p=254
 72 | *	http://www.iquilezles.org/prods/index.htm
 73 | *	http://web.cs.wpi.edu/~emmanuel/courses/cs563/write_ups/zackw/realistic_raytracing.html
 74 | *	http://www.codermind.com/articles/Raytracer-in-C++-Part-I-First-rays.html
 75 | *	http://pouet.net/topic.php?which=6675&page=2
 76 | *	http://pouet.net/topic.php?which=6675&page=9
 77 | *	http://pouet.net/topic.php?which=7931&page=8
 78 | *	[Toolbox](http://pouet.net/topic.php?which=7931&page=1&x=29&y=6)
 79 | *	[Normal calculation](http://pouet.net/topic.php?which=6803)
 80 | 
 81 | ###Lighting###
 82 | *	http://www.arcsynthesis.org/gltut/Illumination/Tutorial%2011.html
 83 | *	http://www.arcsynthesis.org/gltut/Illumination/Tutorial%2009.html
 84 | *	http://pouet.net/topic.php?which=7535
 85 | *	http://www.danknowlton.com/blog.php?id=480
 86 | 
 87 | Resources
 88 | ---------
 89 | *	[Summary of using raytracing to solve the rendering equation](http://web.cs.wpi.edu/~emmanuel/courses/cs563/write_ups/zackw/realistic_raytracing.html)
 90 | *	[Stackoverflow](http://stackoverflow.com/questions/779550/are-there-any-rendering-alternatives-to-rasterisation-or-ray-tracing)
 91 | *	[Fragmentarium](http://syntopia.github.io/Fragmentarium/)
 92 | *	[Various examples created using Fragmentarium](http://blog.hvidtfeldts.net/)
 93 | *	[Raymarching beginner's thread](http://pouet.net/topic.php?which=7920&page=52)
 94 | *	[Basic raymarching tutorial](http://pouet.net/topic.php?which=8177&page=2)
 95 | *	[GPU gems](http://http.developer.nvidia.com/GPUGems3/gpugems3_ch34.html)
 96 | *	[Simple pathtracing](http://www.iquilezles.org/www/articles/simplepathtracing/simplepathtracing.htm)
 97 | *	[hvidtfeldt: Distance estimators](http://blog.hvidtfeldts.net/index.php/2011/08/distance-estimated-3d-fractals-iii-folding-space/)
 98 | *	[Kaleidoscopic (escape time) IFS](http://www.fractalforums.com/ifs-iterated-function-systems/kaleidoscopic-(escape-time-ifs)/)
 99 | 
100 | Raytracing
101 | ----------
102 | *	[Codermind](http://www.codermind.com/articles/Raytracer-in-C++-Introduction-What-is-ray-tracing.html)
103 | *	[Minilight](http://www.hxa.name/minilight/)
104 | *	[Smallpt](http://www.kevinbeason.com/smallpt/)
105 | *	[Smallpt presentation](https://docs.google.com/file/d/0B8g97JkuSSBwUENiWTJXeGtTOHFmSm51UC01YWtCZw/edit)
106 | 


--------------------------------------------------------------------------------
/webgl/webgl-utils.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright 2010, Google Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * Redistribution and use in source and binary forms, with or without
  6 |  * modification, are permitted provided that the following conditions are
  7 |  * met:
  8 |  *
  9 |  *     * Redistributions of source code must retain the above copyright
 10 |  * notice, this list of conditions and the following disclaimer.
 11 |  *     * Redistributions in binary form must reproduce the above
 12 |  * copyright notice, this list of conditions and the following disclaimer
 13 |  * in the documentation and/or other materials provided with the
 14 |  * distribution.
 15 |  *     * Neither the name of Google Inc. nor the names of its
 16 |  * contributors may be used to endorse or promote products derived from
 17 |  * this software without specific prior written permission.
 18 |  *
 19 |  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 20 |  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 21 |  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 22 |  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 23 |  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 24 |  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 25 |  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 26 |  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 27 |  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 28 |  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 29 |  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 30 |  */
 31 | 
 32 | 
 33 | /**
 34 |  * @fileoverview This file contains functions every webgl program will need
 35 |  * a version of one way or another.
 36 |  *
 37 |  * Instead of setting up a context manually it is recommended to
 38 |  * use. This will check for success or failure. On failure it
 39 |  * will attempt to present an approriate message to the user.
 40 |  *
 41 |  *       gl = WebGLUtils.setupWebGL(canvas);
 42 |  *
 43 |  * For animated WebGL apps use of setTimeout or setInterval are
 44 |  * discouraged. It is recommended you structure your rendering
 45 |  * loop like this.
 46 |  *
 47 |  *       function render() {
 48 |  *         window.requestAnimFrame(render, canvas);
 49 |  *
 50 |  *         // do rendering
 51 |  *         ...
 52 |  *       }
 53 |  *       render();
 54 |  *
 55 |  * This will call your rendering function up to the refresh rate
 56 |  * of your display but will stop rendering if your app is not
 57 |  * visible.
 58 |  */
 59 | 
 60 | WebGLUtils = function() {
 61 | 
 62 | /**
 63 |  * Creates the HTLM for a failure message
 64 |  * @param {string} canvasContainerId id of container of th
 65 |  *        canvas.
 66 |  * @return {string} The html.
 67 |  */
 68 | var makeFailHTML = function(msg) {
 69 |   return '' +
 70 |     '<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
 71 |     '<td align="center">' +
 72 |     '<div style="display: table-cell; vertical-align: middle;">' +
 73 |     '<div style="">' + msg + '</div>' +
 74 |     '</div>' +
 75 |     '</td></tr></table>';
 76 | };
 77 | 
 78 | /**
 79 |  * Mesasge for getting a webgl browser
 80 |  * @type {string}
 81 |  */
 82 | var GET_A_WEBGL_BROWSER = '' +
 83 |   'This page requires a browser that supports WebGL.<br/>' +
 84 |   '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
 85 | 
 86 | /**
 87 |  * Mesasge for need better hardware
 88 |  * @type {string}
 89 |  */
 90 | var OTHER_PROBLEM = '' +
 91 |   "It doesn't appear your computer can support WebGL.<br/>" +
 92 |   '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
 93 | 
 94 | /**
 95 |  * Creates a webgl context. If creation fails it will
 96 |  * change the contents of the container of the <canvas>
 97 |  * tag to an error message with the correct links for WebGL.
 98 |  * @param {Element} canvas. The canvas element to create a
 99 |  *     context from.
100 |  * @param {WebGLContextCreationAttirbutes} opt_attribs Any
101 |  *     creation attributes you want to pass in.
102 |  * @param {function:(msg)} opt_onError An function to call
103 |  *     if there is an error during creation.
104 |  * @return {WebGLRenderingContext} The created context.
105 |  */
106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) {
107 |   function handleCreationError(msg) {
108 |     var container = canvas.parentNode;
109 |     if (container) {
110 |       var str = window.WebGLRenderingContext ?
111 |            OTHER_PROBLEM :
112 |            GET_A_WEBGL_BROWSER;
113 |       if (msg) {
114 |         str += "<br/><br/>Status: " + msg;
115 |       }
116 |       container.innerHTML = makeFailHTML(str);
117 |     }
118 |   };
119 | 
120 |   opt_onError = opt_onError || handleCreationError;
121 | 
122 |   if (canvas.addEventListener) {
123 |     canvas.addEventListener("webglcontextcreationerror", function(event) {
124 |           opt_onError(event.statusMessage);
125 |         }, false);
126 |   }
127 |   var context = create3DContext(canvas, opt_attribs);
128 |   if (!context) {
129 |     if (!window.WebGLRenderingContext) {
130 |       opt_onError("");
131 |     }
132 |   }
133 |   return context;
134 | };
135 | 
136 | /**
137 |  * Creates a webgl context.
138 |  * @param {!Canvas} canvas The canvas tag to get context
139 |  *     from. If one is not passed in one will be created.
140 |  * @return {!WebGLContext} The created context.
141 |  */
142 | var create3DContext = function(canvas, opt_attribs) {
143 |   var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
144 |   var context = null;
145 |   for (var ii = 0; ii < names.length; ++ii) {
146 |     try {
147 |       context = canvas.getContext(names[ii], opt_attribs);
148 |     } catch(e) {}
149 |     if (context) {
150 |       break;
151 |     }
152 |   }
153 |   return context;
154 | }
155 | 
156 | return {
157 |   create3DContext: create3DContext,
158 |   setupWebGL: setupWebGL
159 | };
160 | }();
161 | 
162 | /**
163 |  * Provides requestAnimationFrame in a cross browser way.
164 |  */
165 | window.requestAnimFrame = (function() {
166 |   return window.requestAnimationFrame ||
167 |          window.webkitRequestAnimationFrame ||
168 |          window.mozRequestAnimationFrame ||
169 |          window.oRequestAnimationFrame ||
170 |          window.msRequestAnimationFrame ||
171 |          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
172 |            window.setTimeout(callback, 1000/60);
173 |          };
174 | })();
175 | 
176 | 


--------------------------------------------------------------------------------
/src/main.cpp:
--------------------------------------------------------------------------------
  1 | #include <iostream>
  2 | #include <src/opengl.h>
  3 | #include <src/fileio.h>
  4 | using namespace glm;
  5 | 
  6 | // Camera
  7 | float g_theta = 0.0f;										// Horizontal angle
  8 | float g_phi = 0.0f;											// Vertical angle
  9 | vec3 g_camUp		= normalize(vec3(0.0f, 1.0f, 0.0f));	// The upward-vector of the image plane
 10 | vec3 g_camRight		= normalize(vec3(1.0f, 0.0f, 0.0f));	// The right-vector of the image plane
 11 | vec3 g_camForward	= cross(g_camRight, g_camUp);			// The forward-vector of the image plane
 12 | vec3 g_eye			= vec3(0.0f, 0.0f, -2.0f);				// The eye position in the world
 13 | float g_focalLength = 1.67f;								// Distance between eye and image-plane
 14 | float g_zNear		= 0.0f;									// Near plane distance from camera
 15 | float g_zFar		= 15.0f;								// Far plane distance from camera
 16 | float g_moveSpeed	= 0.1f;
 17 | 
 18 | // Raymarch parameters
 19 | int g_rmSteps		= 64;
 20 | float g_rmEpsilon	= 0.001f;
 21 | 
 22 | // Scene
 23 | vec4 g_skyColor 		= vec4(0.31f, 0.47f, 0.67f, 1.0f);
 24 | vec4 g_ambient			= vec4(0.15, 0.2f, 0.32f, 1.0f);
 25 | vec3 g_light0Position 	= vec3(0.25f, 2.0f, 0.0f);
 26 | vec4 g_light0Color 		= vec4(0.67f, 0.87f, 0.93f, 1.0f);
 27 | 
 28 | const int g_windowWidth = 640;
 29 | const int g_windowHeight = 480;
 30 | float g_aspectRatio = g_windowWidth / (float)g_windowHeight;
 31 | 
 32 | void updateCamera(float dt)
 33 | {
 34 | 	if(glfwGetKey('A'))
 35 | 		g_eye -= g_camRight * g_moveSpeed;
 36 | 	else if(glfwGetKey('D'))
 37 | 		g_eye += g_camRight * g_moveSpeed;
 38 | 
 39 | 	if(glfwGetKey('W'))
 40 | 		g_eye += g_camForward * g_moveSpeed;
 41 | 	else if(glfwGetKey('S'))
 42 | 		g_eye -= g_camForward * g_moveSpeed;
 43 | 
 44 | 	if(glfwGetKey(GLFW_KEY_SPACE))
 45 | 		g_eye += g_camUp * g_moveSpeed;
 46 | 	else if(glfwGetKey(GLFW_KEY_LCTRL))
 47 | 		g_eye -= g_camUp * g_moveSpeed;
 48 | 
 49 | 	if(glfwGetKey(GLFW_KEY_LEFT))
 50 | 		g_light0Position -= g_camRight * g_moveSpeed;
 51 | 	else if(glfwGetKey(GLFW_KEY_RIGHT))
 52 | 		g_light0Position += g_camRight * g_moveSpeed;
 53 | 
 54 | 	if(glfwGetKey(GLFW_KEY_UP))
 55 | 		g_light0Position += g_camUp * g_moveSpeed;
 56 | 	else if(glfwGetKey(GLFW_KEY_DOWN))
 57 | 		g_light0Position -= g_camUp * g_moveSpeed;
 58 | 
 59 | 	int mposX, mposY;
 60 | 	glfwGetMousePos(&mposX, &mposY);
 61 | 	glfwSetMousePos(g_windowWidth / 2, g_windowHeight / 2);
 62 | 	int dx = mposX - g_windowWidth / 2;
 63 | 	int dy = mposY - g_windowHeight / 2;
 64 | 	g_theta += dx * 0.01f;
 65 | 	static const float TWO_PI = 6.28318530718f;
 66 | 	if(g_theta > TWO_PI) g_theta -= TWO_PI;
 67 | 	else if(g_theta < 0.0f) g_theta += TWO_PI;
 68 | 
 69 | 	g_phi += dy * 0.01f;
 70 | 	if(g_phi > TWO_PI) g_phi -= TWO_PI;
 71 | 	else if(g_phi < 0.0f) g_phi += TWO_PI;
 72 | 
 73 | 	float sintheta = sinf(g_theta);
 74 | 	float costheta = cosf(g_theta);
 75 | 	float sinphi = sinf(g_phi);
 76 | 	float cosphi = cosf(g_phi);
 77 | 	g_camForward = vec3(cosphi * sintheta, -sinphi, cosphi * costheta);
 78 | 	g_camRight = vec3(costheta, 0.0f, -sintheta);
 79 | 	g_camUp = normalize(cross(g_camForward, g_camRight));
 80 | }
 81 | 
 82 | std::ostream &operator<<(std::ostream &out, const vec3 &v)
 83 | {
 84 | 	out<<"("<<v.x<<" "<<v.y<<" "<<v.z<<")";
 85 | 	return out;
 86 | }
 87 | 
 88 | int main()
 89 | {
 90 | 	if(!createContext("Raymarching Distance Fields", g_windowWidth, g_windowHeight, 0, 0, 0, false))
 91 | 		return EXIT_FAILURE;
 92 | 
 93 | 	glfwSetWindowPos(300, 10);
 94 | 	glfwSetMousePos(g_windowWidth / 2, g_windowHeight / 2);
 95 | 	glfwDisable(GLFW_MOUSE_CURSOR);
 96 | 
 97 | 	std::string raymarch_vs, raymarch_fs;
 98 | 	if(!readFile("data/raymarch.vs", raymarch_vs) ||
 99 | 		!readFile("data/raymarch.fs", raymarch_fs))
100 | 		return EXIT_FAILURE;
101 | 
102 | 	GLuint raymarchVsObj = compileShader(GL_VERTEX_SHADER, 1, raymarch_vs);
103 | 	GLuint raymarchFsObj = compileShader(GL_FRAGMENT_SHADER, 1, raymarch_fs);
104 | 	GLuint program0 = createProgram(raymarchVsObj, raymarchFsObj);
105 | 	glUseProgram(program0);
106 | 
107 | 	// A quad extending from -1 to 1 on the x and y axis (the entire screen)
108 | 	GLfloat vertices[] = {
109 | 		-1.0f, -1.0f,
110 | 		-1.0f,  1.0f,
111 | 		 1.0f, -1.0f,
112 | 		 1.0f,  1.0f
113 | 	};
114 | 
115 | 	GLuint vao;
116 | 	glGenVertexArrays(1, &vao);
117 | 	glBindVertexArray(vao);
118 | 
119 | 	GLuint vbo;
120 | 	glGenBuffers(1, &vbo);
121 | 	glBindBuffer(GL_ARRAY_BUFFER, vbo);
122 | 	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
123 | 
124 | 	GLuint positionAttrib = glGetAttribLocation(program0, "position");
125 | 	glEnableVertexAttribArray(positionAttrib);
126 | 	glVertexAttribPointer(positionAttrib, 2, GL_FLOAT, GL_FALSE, 0, 0);
127 | 
128 | 	GLuint g_resolutionLoc	= glGetUniformLocation(program0, "g_resolution");
129 | 	GLuint g_camUpLoc		= glGetUniformLocation(program0, "g_camUp");
130 | 	GLuint g_camRightLoc	= glGetUniformLocation(program0, "g_camRight");
131 | 	GLuint g_camForwardLoc	= glGetUniformLocation(program0, "g_camForward");
132 | 	GLuint g_eyeLoc			= glGetUniformLocation(program0, "g_eye");
133 | 	GLuint g_focalLengthLoc	= glGetUniformLocation(program0, "g_focalLength");
134 | 	GLuint g_zNearLoc		= glGetUniformLocation(program0, "g_zNear");
135 | 	GLuint g_zFarLoc		= glGetUniformLocation(program0, "g_zFar");
136 | 	GLuint g_aspectRatioLoc	= glGetUniformLocation(program0, "g_aspectRatio");
137 | 	GLuint g_rmStepsLoc		= glGetUniformLocation(program0, "g_rmSteps");
138 | 	GLuint g_rmEpsilonLoc	= glGetUniformLocation(program0, "g_rmEpsilon");
139 | 	GLuint g_skyColorLoc	= glGetUniformLocation(program0, "g_skyColor");
140 | 	GLuint g_ambientLoc		= glGetUniformLocation(program0, "g_ambient");
141 | 	GLuint g_light0PosLoc	= glGetUniformLocation(program0, "g_light0Position");
142 | 	GLuint g_light0ColorLoc	= glGetUniformLocation(program0, "g_light0Color");
143 | 	
144 | 	glUniform2f(g_resolutionLoc,	g_windowWidth, g_windowHeight);
145 | 	glUniform1f(g_zNearLoc,			g_zNear);
146 | 	glUniform1f(g_zFarLoc,			g_zFar);
147 | 	glUniform1f(g_aspectRatioLoc,	g_aspectRatio);
148 | 	glUniform1f(g_rmEpsilonLoc,		g_rmEpsilon);
149 | 	glUniform1i(g_rmStepsLoc,		g_rmSteps);
150 | 
151 | 	double renderTime = 0.0;
152 | 	double targetFrameTime = 1.0 / 30.0;
153 | 	while(glfwGetWindowParam(GLFW_OPENED) == GL_TRUE)
154 | 	{
155 | 		if(glfwGetKey(GLFW_KEY_ESC))
156 | 			glfwCloseWindow();
157 | 
158 | 		updateCamera(renderTime);
159 | 
160 | 		double renderStart = glfwGetTime();
161 | 		glClearColor(0, 0, 0, 0);
162 | 		glClear(GL_COLOR_BUFFER_BIT);
163 | 
164 | 		glUniform3fv(g_camUpLoc,			1, value_ptr(g_camUp));
165 | 		glUniform3fv(g_camRightLoc,			1, value_ptr(g_camRight));
166 | 		glUniform3fv(g_camForwardLoc,		1, value_ptr(g_camForward));
167 | 		glUniform3fv(g_eyeLoc,				1, value_ptr(g_eye));
168 | 		glUniform1f(g_focalLengthLoc,		g_focalLength);
169 | 		glUniform4fv(g_skyColorLoc,			1, value_ptr(g_skyColor));
170 | 		glUniform4fv(g_ambientLoc,			1, value_ptr(g_ambient));
171 | 		glUniform3fv(g_light0PosLoc,		1, value_ptr(g_light0Position));
172 | 		glUniform4fv(g_light0ColorLoc,		1, value_ptr(g_light0Color));
173 | 
174 | 		glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
175 | 
176 | 		glfwSwapBuffers();
177 | 		renderTime = glfwGetTime() - renderStart;
178 | 		if(renderTime < targetFrameTime)
179 | 			glfwSleep(targetFrameTime - renderTime);
180 | 
181 | 		glfwPollEvents();
182 | 	}
183 | 
184 | 	destroyContext();
185 | 	return EXIT_SUCCESS;
186 | }


--------------------------------------------------------------------------------
/webgl/raymarching.js:
--------------------------------------------------------------------------------
  1 | var gl = null;
  2 | 
  3 | function initGL(canvas) {
  4 | 	var container = document.getElementById("container");
  5 | 	if(!window.WebGLRenderingContext) {
  6 | 		container.innerHTML = "Unable to initialize <a href=\"http://get.webgl.org\">WebGL</a>. Your browser may not support it.";
  7 | 	}
  8 | 
  9 | 	try { gl = canvas.getContext("webgl"); } 
 10 | 	catch(e) { }
 11 | 
 12 | 	if(gl == null) {
 13 | 		try { gl = canvas.getContext("experimental-webgl"); }
 14 | 		catch (e) { gl = null };
 15 | 	}
 16 | }
 17 | 
 18 | function getShader(gl, id) {
 19 | 	var script = document.getElementById(id);
 20 | 	if(!script) {
 21 | 		return null;
 22 | 	}
 23 | 
 24 | 	var src = "";
 25 | 	var k = script.firstChild;
 26 | 	while(k) {
 27 | 		if(k.nodeType == 3) {
 28 | 			src += k.textContent;
 29 | 		}
 30 | 		k = k.nextSibling;
 31 | 	}
 32 | 
 33 | 	var shader;
 34 | 	if(script.type == "x-shader/x-fragment") {
 35 | 		shader = gl.createShader(gl.FRAGMENT_SHADER);
 36 | 	} else if(script.type == "x-shader/x-vertex") {
 37 | 		shader = gl.createShader(gl.VERTEX_SHADER);
 38 | 	} else {
 39 | 		return null;
 40 | 	}
 41 | 
 42 | 	gl.shaderSource(shader, src);
 43 | 	gl.compileShader(shader);
 44 | 
 45 | 	if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
 46 | 		alert(gl.getShaderInfoLog(shader));
 47 | 		return null;
 48 | 	}
 49 | 
 50 | 	return shader;
 51 | }
 52 | 
 53 | var program;
 54 | var vbo;
 55 | 
 56 | function initProgram() {
 57 | 	var fragmentShader = getShader(gl, "fshader");
 58 | 	var vertexShader = getShader(gl, "vshader");
 59 | 
 60 | 	program = gl.createProgram();
 61 | 	gl.attachShader(program, vertexShader);
 62 | 	gl.attachShader(program, fragmentShader);
 63 | 	gl.linkProgram(program);
 64 | 
 65 | 	if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
 66 | 		alert("Unable to initialize the shader program");
 67 | 	}
 68 | 
 69 | 	gl.useProgram(program);
 70 | 
 71 | 	var quad = [
 72 | 		-1.0, -1.0, 0.0,
 73 | 		-1.0,  1.0, 0.0,
 74 | 		 1.0, -1.0, 0.0,
 75 | 		 1.0,  1.0, 0.0
 76 | 	];
 77 | 
 78 | 	vbo = gl.createBuffer();
 79 | 	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
 80 | 	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(quad), gl.STATIC_DRAW);
 81 | 
 82 | 	program.positionAttrib = gl.getAttribLocation(program, "position");
 83 | 	gl.enableVertexAttribArray(program.positionAttrib);
 84 | 	gl.vertexAttribPointer(program.positionAttrib, 3, gl.FLOAT, false, 0, 0);
 85 | 
 86 | 	program.resolutionUniform = gl.getUniformLocation(program, "g_resolution");
 87 | 	program.camUpUniform = gl.getUniformLocation(program, "g_camUp");
 88 | 	program.camRightUniform = gl.getUniformLocation(program, "g_camRight");
 89 | 	program.camForwardUniform = gl.getUniformLocation(program, "g_camForward");
 90 | 	program.eyeUniform = gl.getUniformLocation(program, "g_eye");
 91 | 	program.light0PositionUniform = gl.getUniformLocation(program, "g_light0Position");
 92 | 	program.light0ColorUniform = gl.getUniformLocation(program, "g_light0Color");
 93 | }
 94 | 
 95 | var g_eye;
 96 | var g_camUp;
 97 | var g_camRight;
 98 | var g_camForward;
 99 | var g_light0Position = [0, 4, 0];
100 | var g_light0Color = [0.67, 0.87, 0.93, 1.0];
101 | var horizontalAngle = 0.0;
102 | var verticalAngle = 0.0;
103 | 
104 | function initCamera() {
105 | 	g_eye = [0, 1, -2];
106 | 	g_camUp = [0, 1, 0];
107 | 	g_camRight = [1, 0, 0];
108 | 	g_camForward = vec3.create();
109 | 	vec3.cross(g_camForward, g_camRight, g_camUp);
110 | 	vec3.normalize(g_camForward, g_camForward);
111 | }
112 | 
113 | var mouseSpeedX = null;
114 | var mouseSpeedY = null;
115 | 
116 | function handleMouseMove(event) {
117 | 	var mouseX = event.clientX;
118 | 	var mouseY = event.clientY;
119 | 
120 | 	var rect = document.getElementById("glcanvas").getBoundingClientRect();
121 | 	var dx = mouseX - (rect.left + rect.width / 2);
122 | 	var dy = mouseY - (rect.top + rect.height / 2);
123 | 
124 | 	mouseSpeedX = dx * 0.00005;
125 | 	mouseSpeedY = dy * 0.00005;
126 | }
127 | 
128 | var currentKeys = {};
129 | 
130 | function handleKeyDown(event) {
131 | 	currentKeys[event.keyCode] = true;
132 | }
133 | 
134 | function handleKeyUp(event) {
135 | 	currentKeys[event.keyCode] = false;
136 | }
137 | 
138 | function handleInput() {
139 | 	var moveSpeed = 0.05;
140 | 	if(currentKeys[87]) { // Forward
141 | 		g_eye[0] += g_camForward[0] * moveSpeed;
142 | 		g_eye[1] += g_camForward[1] * moveSpeed;
143 | 		g_eye[2] += g_camForward[2] * moveSpeed;
144 | 	} else if(currentKeys[83]) { // Backward
145 | 		g_eye[0] -= g_camForward[0] * moveSpeed;
146 | 		g_eye[1] -= g_camForward[1] * moveSpeed;
147 | 		g_eye[2] -= g_camForward[2] * moveSpeed;
148 | 	}
149 | 
150 | 	if(currentKeys[68]) { // Right
151 | 		g_eye[0] += g_camRight[0] * moveSpeed;
152 | 		g_eye[1] += g_camRight[1] * moveSpeed;
153 | 		g_eye[2] += g_camRight[2] * moveSpeed;
154 | 	} else if(currentKeys[65]) { // Left
155 | 		g_eye[0] -= g_camRight[0] * moveSpeed;
156 | 		g_eye[1] -= g_camRight[1] * moveSpeed;
157 | 		g_eye[2] -= g_camRight[2] * moveSpeed;
158 | 	}
159 | 
160 | 	if(currentKeys[37]) { // Arrow left
161 | 		g_light0Position[0] -= g_camRight[0] * moveSpeed;
162 | 		g_light0Position[1] -= g_camRight[1] * moveSpeed;
163 | 		g_light0Position[2] -= g_camRight[2] * moveSpeed;
164 | 	} else if(currentKeys[39]) { // Arrow right
165 | 		g_light0Position[0] += g_camRight[0] * moveSpeed;
166 | 		g_light0Position[1] += g_camRight[1] * moveSpeed;
167 | 		g_light0Position[2] += g_camRight[2] * moveSpeed;
168 | 	}
169 | 
170 | 	if(currentKeys[38]) { // Arrow up
171 | 		g_light0Position[0] += g_camUp[0] * moveSpeed;
172 | 		g_light0Position[1] += g_camUp[1] * moveSpeed;
173 | 		g_light0Position[2] += g_camUp[2] * moveSpeed;
174 | 	} else if(currentKeys[40]) { // Arrow down
175 | 		g_light0Position[0] -= g_camUp[0] * moveSpeed;
176 | 		g_light0Position[1] -= g_camUp[1] * moveSpeed;
177 | 		g_light0Position[2] -= g_camUp[2] * moveSpeed;
178 | 	}
179 | }
180 | 
181 | function updateCamera() {
182 | 	horizontalAngle += mouseSpeedX;
183 | 	verticalAngle += mouseSpeedY;
184 | 
185 | 	if(horizontalAngle > 2.0 * Math.PI)
186 | 		horizontalAngle -= 2.0 * Math.PI;
187 | 	else if(horizontalAngle < 0.0)
188 | 		horizontalAngle += 2.0 * Math.PI;
189 | 
190 | 	if(verticalAngle > 2.0 * Math.PI)
191 | 		verticalAngle -= 2.0 * Math.PI;
192 | 	else if(verticalAngle < 0.0)
193 | 		verticalAngle += 2.0 * Math.PI;
194 | 
195 | 	// Update camera vectors
196 | 	var sintheta = Math.sin(horizontalAngle);
197 | 	var costheta = Math.cos(horizontalAngle);
198 | 	var sinphi = Math.sin(verticalAngle);
199 | 	var cosphi = Math.cos(verticalAngle);
200 | 	g_camForward = [cosphi * sintheta, -sinphi, cosphi * costheta];
201 | 	g_camRight = [costheta, 0.0, -sintheta];
202 | 	vec3.cross(g_camUp, g_camForward, g_camRight);
203 | 	vec3.normalize(g_camUp, g_camUp);
204 | }
205 | 
206 | function updateUniforms() {
207 | 	gl.uniform2f(program.resolutionUniform, gl.viewportWidth, gl.viewportHeight);
208 | 	gl.uniform3f(program.camUpUniform, g_camUp[0], g_camUp[1], g_camUp[2]);
209 | 	gl.uniform3f(program.camRightUniform, g_camRight[0], g_camRight[1], g_camRight[2]);
210 | 	gl.uniform3f(program.camForwardUniform, g_camForward[0], g_camForward[1], g_camForward[2]);
211 | 	gl.uniform3f(program.eyeUniform, g_eye[0], g_eye[1], g_eye[2]);
212 | 	gl.uniform3f(program.light0PositionUniform, g_light0Position[0], g_light0Position[1], g_light0Position[2]);
213 | 	gl.uniform4f(program.light0ColorUniform, g_light0Color[0], g_light0Color[1], g_light0Color[2], g_light0Color[3]);
214 | }
215 | 
216 | function render(canvas) {
217 | 	gl.clear(gl.COLOR_BUFFER_BIT);
218 | 
219 | 	handleInput();
220 | 	updateCamera();
221 | 	updateUniforms();
222 | 
223 | 	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
224 | }
225 | 
226 | function tick() {
227 | 	requestAnimFrame(tick);
228 | 	render();
229 | }
230 | 
231 | function start() {
232 | 	var canvas = document.getElementById("glcanvas");
233 | 
234 | 	initGL(canvas);
235 | 
236 | 	if(gl)
237 | 	{
238 | 		gl.viewportWidth = canvas.width;
239 | 		gl.viewportHeight = canvas.height;
240 | 
241 | 		initProgram();
242 | 		initCamera();
243 | 
244 | 		gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
245 | 		gl.clearColor(0.3, 0.3, 0.3, 1);
246 | 
247 | 		document.onmousemove = handleMouseMove;
248 | 		document.onkeydown = handleKeyDown;
249 | 		document.onkeyup = handleKeyUp;
250 | 
251 | 		tick();
252 | 	}
253 | }


--------------------------------------------------------------------------------
/data/raymarch.fs:
--------------------------------------------------------------------------------
  1 | #version 140
  2 | 
  3 | // A quad is uploaded extending from -1 to 1 on both axes
  4 | // The uv variable interpolates between the quad vertices
  5 | smooth in vec2 uv;
  6 | 
  7 | out vec4 outColor;
  8 | 
  9 | // Camera
 10 | uniform vec2 g_resolution;
 11 | uniform vec3 g_camUp;
 12 | uniform vec3 g_camRight;
 13 | uniform vec3 g_camForward;
 14 | uniform vec3 g_eye;
 15 | uniform float g_focalLength;
 16 | uniform float g_zNear;
 17 | uniform float g_zFar;
 18 | uniform float g_aspectRatio;
 19 | 
 20 | // Raymarch parameters
 21 | uniform int g_rmSteps; // Max steps
 22 | uniform float g_rmEpsilon; // Distance threshold
 23 | 
 24 | // Scene
 25 | uniform vec4 g_skyColor;
 26 | uniform vec4 g_ambient;
 27 | uniform vec3 g_light0Position;
 28 | uniform vec4 g_light0Color;
 29 | 
 30 | // Rotates a point t radians around the y-axis
 31 | vec3 rotateY(vec3 v, float t)
 32 | {
 33 | 	float cost = cos(t); float sint = sin(t);
 34 | 	return vec3(v.x * cost + v.z * sint, v.y, -v.x * sint + v.z * cost);
 35 | }
 36 | 
 37 | // Rotates a point t radians around the x-axis
 38 | vec3 rotateX(vec3 v, float t)
 39 | {
 40 | 	float cost = cos(t); float sint = sin(t);
 41 | 	return vec3(v.x, v.y * cost - v.z * sint, v.y * sint + v.z * cost);
 42 | }
 43 | 
 44 | // Maps x from the range [minX, maxX] to the range [minY, maxY]
 45 | // The function does not clamp the result, as it may be useful
 46 | float mapTo(float x, float minX, float maxX, float minY, float maxY)
 47 | {
 48 | 	float a = (maxY - minY) / (maxX - minX);
 49 | 	float b = minY - a * minX;
 50 | 	return a * x + b;
 51 | }
 52 | 
 53 | // Returns the signed distance to a sphere at the origin
 54 | float sdSphere(vec3 p, float radius)
 55 | {
 56 | 	return length(p) - radius;
 57 | }
 58 | 
 59 | // Returns the unsigned distance estimate to a box at the origin of the given size
 60 | float udBox(vec3 p, vec3 size)
 61 | {
 62 | 	return length(max(abs(p) - size, vec3(0.0f)));
 63 | }
 64 | 
 65 | // Returns the signed distance estimate to a box at the origin of the given size
 66 | float sdBox(vec3 p, vec3 size)
 67 | {
 68 | 	vec3 d = abs(p) - size;
 69 | 	return min(max(d.x, max(d.y, d.z)), 0.0f) + udBox(p, size);
 70 | }
 71 | 
 72 | // Subtracts d1 from d0, assuming d1 is a signed distance
 73 | float opSubtract(float d0, float d1)
 74 | {
 75 | 	return max(d0, -d1);
 76 | }
 77 | 
 78 | // Defines the distance field for the scene
 79 | float distScene(vec3 p)
 80 | {
 81 | 	p.xz = mod(p.xz, 1.0f) - vec2(0.5f);
 82 | 	return sdBox(p - vec3(0.0f, -0.25f, 0.0f), vec3(0.25f));
 83 | 
 84 | 	// p = rotateY(p, 0.5f * p.y);
 85 | 	// float d1 = sdBox(p - vec3(0, 0.5, 0), vec3(0.5, 1.0, 0.5));
 86 | 	// float d2 = sdBox(p, vec3(2.0, 0.3, 0.25));
 87 | 	// return opSubtract(d1, d2);
 88 | }
 89 | 
 90 | // Finds the closest intersecting object along the ray at origin ro, and direction rd.
 91 | // i: step count
 92 | // t: distance traveled by the ray
 93 | void raymarch(vec3 ro, vec3 rd, out int i, out float t)
 94 | {
 95 | 	t = 0.0f;
 96 | 	for(i = 0; i < g_rmSteps; ++i)
 97 | 	{
 98 | 		float dist = distScene(ro + rd * t);
 99 | 
100 | 		// We make epsilon proportional to t so that we drop accuracy the further into the scene we get
101 | 		// We also drop the ray as soon as it leaves the clipping volume as defined by g_zFar
102 | 		if(dist < g_rmEpsilon * t * 2.0f || t > g_zFar)
103 | 			break;
104 | 		t += dist;
105 | 	}
106 | }
107 | 
108 | // Returns a value between [0, 1] depending on how visible p0 is from p1
109 | // k: denotes the soft-shadow strength
110 | // See http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm
111 | float getVisibility(vec3 p0, vec3 p1, float k)
112 | {
113 | 	vec3 rd = normalize(p1 - p0);
114 | 	float t = 10.0f * g_rmEpsilon;
115 | 	float maxt = length(p1 - p0);
116 | 	float f = 1.0f;
117 | 	while(t < maxt)
118 | 	{
119 | 		float d = distScene(p0 + rd * t);
120 | 
121 | 		// A surface was hit before we reached p1
122 | 		if(d < g_rmEpsilon)
123 | 			return 0.0f;
124 | 
125 | 		// Penumbra factor
126 | 		f = min(f, k * d / t);
127 | 
128 | 		t += d;
129 | 	}
130 | 
131 | 	return f;
132 | }
133 | 
134 | // Approximates the (normalized) gradient of the distance function at the given point.
135 | // If p is near a surface, the function will approximate the surface normal.
136 | vec3 getNormal(vec3 p)
137 | {
138 | 	float h = 0.0001f;
139 | 
140 | 	return normalize(vec3(
141 | 		distScene(p + vec3(h, 0, 0)) - distScene(p - vec3(h, 0, 0)),
142 | 		distScene(p + vec3(0, h, 0)) - distScene(p - vec3(0, h, 0)),
143 | 		distScene(p + vec3(0, 0, h)) - distScene(p - vec3(0, 0, h))));
144 | }
145 | 
146 | // Calculate the light intensity with soft shadows
147 | // p: point on surface
148 | // lightPos: position of the light source
149 | // lightColor: the radiance of the light source
150 | // returns: the color of the point
151 | vec4 getShading(vec3 p, vec3 normal, vec3 lightPos, vec4 lightColor)
152 | {
153 | 	float intensity = 0.0f;
154 | 	float vis = getVisibility(p, lightPos, 16);
155 | 	if(vis > 0.0f)
156 | 	{
157 | 		vec3 lightDirection = normalize(lightPos - p);
158 | 		intensity = clamp(dot(normal, lightDirection), 0, 1) * vis;
159 | 	}
160 | 
161 | 	return lightColor * intensity + g_ambient * (1.0f - intensity);
162 | }
163 | 
164 | // Compute an ambient occlusion factor
165 | // p: point on surface
166 | // n: normal of the surface at p
167 | // returns: a value clamped to [0, 1], where 0 means there were no other surfaces around the point,
168 | // and 1 means that the point is occluded by other surfaces.
169 | float ambientOcclusion(vec3 p, vec3 n)
170 | {
171 | 	float stepSize = 0.01f;
172 | 	float t = stepSize;
173 | 	float oc = 0.0f;
174 | 	for(int i = 0; i < 10; ++i)
175 | 	{
176 | 		float d = distScene(p + n * t);
177 | 		oc += t - d; // Actual distance to surface - distance field value
178 | 		t += stepSize;
179 | 	}
180 | 
181 | 	return clamp(oc, 0, 1);
182 | }
183 | 
184 | // Create a checkboard texture
185 | vec4 getFloorTexture(vec3 p)
186 | {
187 | 	vec2 m = mod(p.xz, 2.0f) - vec2(1.0f);
188 | 	return m.x * m.y > 0.0f ? vec4(0.1f) : vec4(1.0f);
189 | }
190 | 
191 | // To improve performance we raytrace the floor
192 | // n: floor normal
193 | // o: floor position
194 | float raytraceFloor(vec3 ro, vec3 rd, vec3 n, vec3 o)
195 | {
196 | 	return dot(o - ro, n) / dot(rd, n);
197 | }
198 | 
199 | vec4 computeColor(vec3 ro, vec3 rd)
200 | {
201 | 	float t0;
202 | 	int i;
203 | 	raymarch(ro, rd, i, t0);
204 | 
205 | 	vec3 floorNormal = vec3(0, 1, 0);
206 | 	float t1 = raytraceFloor(ro, rd, floorNormal, vec3(0, -0.5, 0));
207 | 
208 | 	vec3 p; // Surface point
209 | 	vec3 normal; // Surface normal
210 | 	float t; // Distance traveled by ray from eye
211 | 	vec4 texture = vec4(1.0); // Surface texture
212 | 
213 | 	if(t1 < t0 && t1 >= g_zNear && t1 <= g_zFar) // The floor was closest
214 | 	{
215 | 		t = t1;
216 | 		p = ro + rd * t1;
217 | 		normal = floorNormal;
218 | 		texture = getFloorTexture(p);
219 | 	}
220 | 	else if(i < g_rmSteps && t0 >= g_zNear && t0 <= g_zFar) // Raymarching hit a surface
221 | 	{
222 | 		t = t0;
223 | 		p = ro + rd * t0;
224 | 		normal = getNormal(p);
225 | 	}
226 | 	else
227 | 	{
228 | 		return g_skyColor;
229 | 	}
230 | 
231 | 	vec4 color;
232 | 	float z = mapTo(t, g_zNear, g_zFar, 1, 0); // Map depth to [0, 1]
233 | 
234 | 	// Color based on depth
235 | 	//color = vec4(1.0f) * z;
236 | 
237 | 	// Diffuse lighting
238 | 	color = texture * (
239 | 		getShading(p, normal, g_light0Position, g_light0Color) +
240 | 		getShading(p, normal, vec3(2.0f, 1.0f, 0.0f), vec4(1.0f, 0.5f, 0.5f, 1.0f))
241 | 		) / 2.0f;
242 | 
243 | 	// Color based on surface normal
244 | 	//color = vec4(abs(normal), 1.0);
245 | 
246 | 	// Blend in ambient occlusion factor
247 | 	float ao = ambientOcclusion(p, normal);
248 | 	color = color * (1.0f - ao);
249 | 
250 | 	// Blend the background color based on the distance from the camera
251 | 	float zSqrd = z * z;
252 | 	color = mix(g_skyColor, color, zSqrd * (3.0f - 2.0f * z)); // Fog
253 | 
254 | 	return color;
255 | }
256 | 
257 | void main()
258 | {
259 | 	vec2 hps = vec2(1.0) / (g_resolution * 2.0);
260 | 	vec3 ro = g_eye;
261 | 	vec3 rd = normalize(g_camForward * g_focalLength + g_camRight * uv.x * g_aspectRatio + g_camUp * uv.y);
262 | 
263 | 	vec4 color = computeColor(ro, rd);
264 | 
265 | 	// 4xAA
266 | 	//vec3 rd0 = normalize(g_camForward * g_focalLength + g_camRight * (uv.x - hps.x) * g_aspectRatio + g_camUp * uv.y);
267 | 	//vec3 rd1 = normalize(g_camForward * g_focalLength + g_camRight * (uv.x + hps.x) * g_aspectRatio + g_camUp * uv.y);
268 | 	//vec3 rd2 = normalize(g_camForward * g_focalLength + g_camRight * uv.x * g_aspectRatio + g_camUp * (uv.y - hps.y));
269 | 	//vec3 rd3 = normalize(g_camForward * g_focalLength + g_camRight * uv.x * g_aspectRatio + g_camUp * (uv.y + hps.y));
270 | 
271 | 	//vec4 color = (computeColor(ro, rd0) + computeColor(ro, rd1) + computeColor(ro, rd2) + computeColor(ro, rd3)) / 4.0;
272 | 
273 | 	outColor = vec4(color.xyz, 1.0f);
274 | }


--------------------------------------------------------------------------------
/webgl/raymarching.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Raymarching Distance Fields</title>
  5 | 	<meta charset="utf-8">
  6 | 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7 | 	<script type="text/javascript" src="gl-matrix-min.js"></script>
  8 | 	<script type="text/javascript" src="webgl-utils.js"></script>
  9 | 	<script type="text/javascript" src="raymarching.js"></script>
 10 | 
 11 | <script id="vshader" type="x-shader/x-vertex">
 12 | 
 13 | attribute vec3 position;
 14 | varying vec2 uv;
 15 | 
 16 | void main(void) {
 17 | 	gl_Position = vec4(position, 1.0);
 18 | 
 19 | 	// Interpolate quad coordinates in the fragment shader
 20 | 	uv = position.xy;
 21 | }
 22 | 
 23 | </script>
 24 | 
 25 | <script id="fshader" type="x-shader/x-fragment">
 26 | 
 27 | precision mediump float;
 28 | 
 29 | // The interpolated quad coordinates from [-1, 1] on the x and y axis
 30 | varying vec2 uv;
 31 | 
 32 | // Camera uniforms
 33 | uniform vec2 g_resolution;
 34 | uniform vec3 g_camUp;
 35 | uniform vec3 g_camRight;
 36 | uniform vec3 g_camForward;
 37 | uniform vec3 g_eye;
 38 | 
 39 | // Light uniforms
 40 | uniform vec3 g_light0Position;
 41 | uniform vec4 g_light0Color;
 42 | 
 43 | // Constants
 44 | const float g_focalLength = 1.97; // Distance between the eye and the image plane
 45 | const float g_zNear = 0.0; // Near clip depth
 46 | const float g_zFar = 25.0; // Far clip depth
 47 | const int g_rmSteps = 64; // Max raymarch steps
 48 | const float g_rmEpsilon = 0.001; // Surface threshold
 49 | const vec4 g_skyColor = vec4(0.31, 0.47, 0.67, 1.0);
 50 | const vec4 g_ambient = vec4(0.15, 0.2, 0.32, 1.0);
 51 | 
 52 | // Maps x from [minX, maxX] to [minY, maxY], without clamping
 53 | float mapTo(float x, float minX, float maxX, float minY, float maxY)
 54 | {
 55 | 	float a = (maxY - minY) / (maxX - minX);
 56 | 	float b = minY - a * minX;
 57 | 	return a * x + b;
 58 | }
 59 | 
 60 | // Returns the unsigned distance estimate to a box of the given size
 61 | float udBox(vec3 p, vec3 size)
 62 | {
 63 | 	return length(max(abs(p) - size, vec3(0.0)));
 64 | }
 65 | 
 66 | // Returns the signed distance estimate to a box of the given size
 67 | float sdBox(vec3 p, vec3 size)
 68 | {
 69 | 	vec3 d = abs(p) - size;
 70 | 	return min(max(d.x, max(d.y, d.z)), 0.0) + udBox(p, size);
 71 | }
 72 | 
 73 | float sdSphere(vec3 p, float radius)
 74 | {
 75 | 	return length(p) - radius;
 76 | }
 77 | 
 78 | // Subtracts distance field db from da, where db is a signed distance
 79 | float opSubtract(float da, float db)
 80 | {
 81 | 	return max(da, -db);
 82 | }
 83 | 
 84 | // Returns the closest distance to a surface from p in our scene
 85 | float distScene(vec3 p)
 86 | {
 87 | 	// Cool sphere fractal
 88 | 	// float db = sdSphere(p, 2.0);
 89 | 	// p.xyz = mod(p.xyz, 0.5) - vec3(0.25);
 90 | 	// float d1 = opSubtract(db, sdBox(p, vec3(0.2)));
 91 | 	// return d1;
 92 | 
 93 | 	// Repeated spheres
 94 | 	p.xyz = mod(p.xyz, 1.0) - vec3(0.5);
 95 | 	return sdSphere(p, 0.25);
 96 | 
 97 | 	// float d0 = sdSphere(p - vec3(0, 0.6, 0), 1.5);
 98 | 	// float d1 = sdBox(p - vec3(-1.8, 0.25, 0), vec3(0.8));
 99 | 
100 | 	// vec3 q = p;
101 | 	// q.xyz = mod(p.xyz, 1.0) - vec3(0.5);
102 | 	// float extrusionField0 = sdBox(q, vec3(0.28));
103 | 
104 | 	// vec3 r = p;
105 | 	// r.xyz = mod(p.xyz, 0.5) - vec3(0.25);
106 | 	// float extrusionField1 = sdSphere(r, 0.125);
107 | 
108 | 	// float df = min(d0, d1);
109 | 	// float df0 = max(df, extrusionField0);
110 | 	// float df1 = min(df0, df + 0.2);
111 | 	// return df1;
112 | 
113 | 	// return sdSphere(p, 0.25);
114 | 
115 | 	// float da = sdBox(p - vec3(4.0, 0.5, 0.3), vec3(2.0));
116 | 	// float d1 = opSubtract(db, sdSphere(p, 0.32));
117 | 	// float d1 = opSubtract(ds, sdBox(p, vec3(0.2)));
118 | 	// float d2 = opSubtract(da, sdSphere(p, 0.3));
119 | 	// float d2 = sdBox(p - vec3(0, -0.5, 0), vec3(2.0, 0.5, 2.0));
120 | 	// return min(d1, d2);
121 | }
122 | 
123 | // Approximates the (normalized) gradient of the distance function at the given point.
124 | // If p is near a surface, the function will approximate the surface normal.
125 | vec3 getNormal(vec3 p)
126 | {
127 | 	float h = 0.0001;
128 | 
129 | 	return normalize(vec3(
130 | 		distScene(p + vec3(h, 0, 0)) - distScene(p - vec3(h, 0, 0)),
131 | 		distScene(p + vec3(0, h, 0)) - distScene(p - vec3(0, h, 0)),
132 | 		distScene(p + vec3(0, 0, h)) - distScene(p - vec3(0, 0, h))));
133 | }
134 | 
135 | // Returns a value between 0 and 1 depending on how visible p0 is from p1
136 | // 0 means it's completely blocked, 1 means completely visible
137 | // k defines the hardness of the shadow
138 | float getShadow(vec3 p0, vec3 p1, float k)
139 | {
140 | 	vec3 rd = normalize(p1 - p0);
141 | 	float t = 10.0 * g_rmEpsilon; // Start a bit away from the surface
142 | 	float maxt = length(p1 - p0);
143 | 	float f = 1.0;
144 | 	for(int i = 0; i < g_rmSteps; ++i)
145 | 	{
146 | 		float d = distScene(p0 + rd * t);
147 | 
148 | 		// A surface was hit before we reached p1
149 | 		if(d < g_rmEpsilon)
150 | 			return 0.0;
151 | 
152 | 		// Penumbra factor is calculated based on how close we were to
153 | 		// the surface, and how far away we are from the shading point
154 | 		// See http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm
155 | 		f = min(f, k * d / t);
156 | 
157 | 		t += d;
158 | 
159 | 		// We reached p1
160 | 		if(t >= maxt)
161 | 			break;
162 | 	}
163 | 
164 | 	return f;
165 | }
166 | 
167 | // Calculate the light intensity with soft shadows
168 | // p: point on surface
169 | // lightPos: position of the light source
170 | // lightColor: the radiance of the light source
171 | // returns: the color of the point
172 | vec4 getShading(vec3 p, vec3 normal, vec3 lightPos, vec4 lightColor)
173 | {
174 | 	float lightIntensity = 0.0;
175 | 	float shadow = getShadow(p, lightPos, 16.0);
176 | 	if(shadow > 0.0) // If we are at all visible
177 | 	{
178 | 		vec3 lightDirection = normalize(lightPos - p);
179 | 		lightIntensity = shadow * clamp(dot(normal, lightDirection), 0.0, 1.0);
180 | 	}
181 | 	
182 | 	return lightColor * lightIntensity + g_ambient * (1.0 - lightIntensity);
183 | }
184 | 
185 | // Marches along a ray using the distance field, until an intersection is found
186 | // i: iteration count
187 | // t: distance traveled along ray
188 | void raymarch(vec3 ro, vec3 rd, out int i, out float t)
189 | {
190 | 	t = 0.0;
191 | 	for(int j = 0; j < g_rmSteps; ++j)
192 | 	{
193 | 		vec3 p = ro + rd * t;
194 | 		float d = distScene(p);
195 | 		if(d < g_rmEpsilon || t > g_zFar)
196 | 		{
197 | 			i = j;
198 | 			break;
199 | 		}
200 | 		t += d;
201 | 	}
202 | }
203 | 
204 | // Compute an ambient occlusion factor
205 | // p: point on surface
206 | // n: normal of the surface at p
207 | // returns: a value clamped to [0, 1], where 0 means there were no other surfaces around the point,
208 | // and 1 means that the point is occluded by other surfaces.
209 | float ambientOcclusion(vec3 p, vec3 n)
210 | {
211 | 	float stepSize = 0.01;
212 | 	float t = stepSize;
213 | 	float oc = 0.0;
214 | 	for(int i = 0; i < 10; ++i)
215 | 	{
216 | 		float d = distScene(p + n * t);
217 | 		oc += t - d; // Actual distance to surface - distance field value
218 | 		t += stepSize;
219 | 	}
220 | 
221 | 	return clamp(oc, 0.0, 1.0);
222 | }
223 | 
224 | // Create a checkboard texture
225 | vec4 getFloorTexture(vec3 p)
226 | {
227 | 	vec2 m = mod(p.xz, 2.0) - vec2(1.0);
228 | 	return m.x * m.y > 0.0 ? vec4(0.1) : vec4(1.0);
229 | }
230 | 
231 | // To improve performance we raytrace the floor
232 | // n: floor normal
233 | // o: floor position
234 | float raytraceFloor(vec3 ro, vec3 rd, vec3 n, vec3 o)
235 | {
236 | 	return dot(o - ro, n) / dot(rd, n);
237 | }
238 | 
239 | // Computes the color corresponding to the ray intersection point (if any)
240 | vec4 computeColor(vec3 ro, vec3 rd)
241 | {
242 | 	float t0;
243 | 	int i;
244 | 	raymarch(ro, rd, i, t0);
245 | 
246 | 	vec3 floorNormal = vec3(0, 1, 0);
247 | 	float t1 = raytraceFloor(ro, rd, floorNormal, vec3(0, -0.5, 0));
248 | 
249 | 	vec3 p; // Surface point
250 | 	vec3 normal; // Surface normal
251 | 	float t; // Distance traveled by ray from eye
252 | 	vec4 texture = vec4(1.0); // Surface texture
253 | 
254 | 	if(t1 < t0 && t1 >= g_zNear && t1 <= g_zFar) // The floor was closest
255 | 	{
256 | 		t = t1;
257 | 		p = ro + rd * t1;
258 | 		normal = floorNormal;
259 | 		texture = getFloorTexture(p);
260 | 	}
261 | 	else if(i < g_rmSteps && t0 >= g_zNear && t0 <= g_zFar) // Raymarching hit a surface
262 | 	{
263 | 		t = t0;
264 | 		p = ro + rd * t0;
265 | 		normal = getNormal(p);
266 | 	}
267 | 	else
268 | 	{
269 | 		return g_skyColor;
270 | 	}
271 | 
272 | 	vec4 color;
273 | 	float z = mapTo(t, g_zNear, g_zFar, 1.0, 0.0);
274 | 
275 | 	// Color based on depth
276 | 	//color = vec4(1.0) * z;
277 | 
278 | 	// Diffuse lighting
279 | 	color = texture * (
280 | 		getShading(p, normal, g_light0Position, g_light0Color) +
281 | 		getShading(p, normal, vec3(2.0, 3.0, 0.0), vec4(1.0, 0.5, 0.5, 1.0))
282 | 		) / 2.0;
283 | 
284 | 	// Color based on surface normal
285 | 	//color = vec4(abs(normal), 1.0);
286 | 
287 | 	// Blend in ambient occlusion factor
288 | 	float ao = ambientOcclusion(p, normal);
289 | 	color = color * (1.0 - ao);
290 | 
291 | 	// Blend the background color based on the distance from the camera
292 | 	float zSqrd = z * z;
293 | 	color = mix(g_skyColor, color, zSqrd * (3.0 - 2.0 * z)); // Fog
294 | 
295 | 	return color;
296 | }
297 | 
298 | void main(void) {
299 | 	float aspectRatio = g_resolution.x / g_resolution.y;
300 | 	vec3 ro = g_eye;
301 | 	vec3 rd = normalize(g_camForward * g_focalLength + g_camRight * uv.x * aspectRatio + g_camUp * uv.y);
302 | 
303 | 	vec4 color = computeColor(ro, rd);
304 | 
305 | 	// 4xAA
306 | 	// vec2 hps = vec2(1.0) / (g_resolution * 2.0);
307 | 	// vec3 rd0 = normalize(g_camForward * g_focalLength + g_camRight * (uv.x - hps.x) * aspectRatio + g_camUp * uv.y);
308 | 	// vec3 rd1 = normalize(g_camForward * g_focalLength + g_camRight * (uv.x + hps.x) * aspectRatio + g_camUp * uv.y);
309 | 	// vec3 rd2 = normalize(g_camForward * g_focalLength + g_camRight * uv.x * aspectRatio + g_camUp * (uv.y - hps.y));
310 | 	// vec3 rd3 = normalize(g_camForward * g_focalLength + g_camRight * uv.x * aspectRatio + g_camUp * (uv.y + hps.y));
311 | 
312 | 	// vec4 color = (computeColor(ro, rd0) + computeColor(ro, rd1) + computeColor(ro, rd2) + computeColor(ro, rd3)) / 4.0;
313 | 
314 | 	gl_FragColor = vec4(color.xyz, 1.0);
315 | }
316 | 
317 | </script>
318 | <style>
319 | body {
320 | 	background-color: #050505;
321 | 	color: #fff;
322 | 	font-family: monospace;
323 | }
324 | 
325 | a {
326 | 	color: #3194d5;
327 | }
328 | 
329 | #info { padding: 10px; text-align: center; }
330 | #container { text-align: center; }
331 | #copyright { padding: 10px; text-align: center; }
332 | </style>
333 | </head>
334 | <body onload="start()">
335 | 	<div id="info">
336 | 		<a href="https://github.com/lightbits/ray-march">raymarching.js</a> - Real-time raymarching with distance fields
337 | 		<p>Move around with WASD, move the blue light with the arrow keys</p></div>
338 | 
339 | 	<div id="container"><canvas id="glcanvas" width="600" height="400">
340 | 		Your browser doesn't appear to support the HTML5 canvas :(
341 | 	</canvas></div>
342 | 
343 | 	<div id="copyright">Copyright (c) 2013 <a href="http://9bitscience.blogspot.no/2013/07/raymarching-distance-fields_14.html">9bit Science</a></div>
344 | </body>
345 | </html>


--------------------------------------------------------------------------------
/article/raymarch-distance-fields.txt:
--------------------------------------------------------------------------------
  1 | Raymarching Distance Fields
  2 | ===========================
  3 | 
  4 | Hi. In this article I will tell you about a rendering technique known as **raymarching with distance fields**, capable of producing highly detailed images in real-time with very simple code.
  5 | 
  6 | ![Inigo Quilez' slisesix](http://4.bp.blogspot.com/-Zjev0r-Eoms/UeQd_wcDInI/AAAAAAAAAGE/Py6rDNjTlCY/s1600/gfx00.jpg)
  7 | 
  8 | **slisesix by Inigo Quilez**
  9 | 
 10 | Before reading on, perhaps you would like to try the [**interactive WebGL demo?**](http://lightbits.github.io/toys/raymarching/raymarching.html)
 11 | 
 12 | Content
 13 | ----------
 14 | * Introduction
 15 | * The raymarching algorithm
 16 | * Rendering techniques
 17 |  * Iteration based coloring
 18 |  * Bounding volume
 19 |  * Fog
 20 |  * Anti-aliasing
 21 |  * Lighting
 22 |  * Shadows
 23 |  * Ambient occlusion
 24 |  * Reflections
 25 |  * Distortion and repetition
 26 | * Other
 27 | * Conclusion
 28 | * Code
 29 | * References
 30 | 
 31 | Introduction
 32 | ------------
 33 | Raymarching is a 3d-rendering technique, praised by programming-enthusiasts for both its simplicity and speed. It has been used extensively in the demoscene, producing low-size executables and amazing visuals. The most frontstanding figure behind its popularity, is [Inigo Quilez](http://iquilezles.org/), promoting it with his presentation at nvscene: [*Rendering Worlds With Two Triangles*](http://www.iquilezles.org/www/material/nvscene2008/nvscene2008.htm).
 34 | 
 35 | The idea is this: Say you have some surface in space. You don't have an explicit formula for it, nor a set of triangles describing it. But you can find out how far away it is, from any point. How would you render this surface?
 36 | 
 37 | First of all, we need to find out which points that lie on the surface, and what pixels they correspond to. To do this we use a technique known as [ray-casting](http://en.wikipedia.org/wiki/Ray_casting).
 38 | 
 39 | Imagine you and your monitor being placed in this virtual world. Your *eye* will be looking at a rectangle (your monitor), which we shall call the image plane. Ray-casting works by shooting rays from the eye through each pixel on the image plane, and finding the closest object blocking the path of the ray. Once we hit an object, we can compute the color and shading of the corresponding pixel. If the ray does not hit anything, the pixel is colored with some *sky color*.
 40 | 
 41 | There are several ways in which we can calculate the intersection, for example we analytically solve for it. A raymarcher, however, looks for an approximate solution, by marching along the ray in steps until it finds an intersection. By controlling the step size using a *distance field*, we can reach blazing speeds, even on a regular laptop GPU.
 42 | 
 43 | The raymarching algorithm
 44 | -------------------------
 45 | In traditional raytracing, a scene is often described by a set of triangles or spheres, making up a mesh. Using  some spatial acceleration structure, we can quickly solve for the exact intersections between the rays and the objects.
 46 | 
 47 | With raymarching however, we allow for some leeway in the intersection, and accept it when a ray is *close enough* to a surface. This is done by marching along the ray at step sizes, and checking whether or not the surface is within a given threshold. We can set a limit on the number of steps to prevent marching into oblivion. In code the algorithm looks like this:
 48 | 
 49 | 	bool raymarch(vec3 rayOrigin, vec3 rayDirection) {
 50 | 	    float t = 0.0f;
 51 | 	    for(int i = 0; i < maxSteps; ++i) {
 52 | 	        float d = sceneDistance(rayOrigin + rayDirection * t);
 53 | 	        if(d < epsilon) {
 54 | 	            // Do something with p
 55 | 	            return true;
 56 | 	        }
 57 | 	        t += d;
 58 | 	    }
 59 | 	    return false;
 60 | 	}
 61 | 
 62 | But this can be slow if the step size is small, and inaccurate if the step size is large. So we speed things up by implementing a variable step size, and that is where **distance fields** comes in.
 63 | 
 64 | The basic idea is to make sure every surface in our scene is given by a distance estimator (DE), which returns the distance to it from a point p. This way, we can find the distance to the closest surface in the scene, and know that we can step *this far* without overshooting.
 65 | 
 66 | ![Raymarching variable step](http://3.bp.blogspot.com/-x8E4QGbdsTs/UeL7DODAoyI/AAAAAAAAAEo/GfHOsYjs4Bk/s1600/raymarching-alg.png)
 67 | 
 68 | In the figure above the distance field is evaluated at various points along the ray. At the first point (the eye) there is quite a large distance to the closest surface, so we step that far to the next point. This continues until we get close enough to say we hit the surface.
 69 | 
 70 | #### Distance estimators
 71 | Consider a sphere centered at the origin with radius *r*. The distance from a point *p* to the sphere is given by:
 72 | 
 73 | 	float distSphere(vec3 p, float radius) {
 74 | 		return length(p) - radius;
 75 | 	}
 76 | 
 77 | This function gives us **signed distance**, because the distance is negative or positive depending on whether we are inside or outside the sphere. In the later sections we will see that this is important in order to compute the surface normal.
 78 | 
 79 | Coming up with your own DE's can be difficult, so feel free to take a look at [this page](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm), by Inigo Quilez, for a list of distance functions. A useful trick though is to take advantage of symmetry. For example, a box at the origin can be split into the 8 octants, but we do not need to handle each region on its own. Instead we can take the absolute value of the point, and then compute the distance.
 80 | 
 81 | #### The distance field
 82 | Once we have the distance to each surface, the scene can be described by a function returning the minimum of them, i.e.:
 83 | 
 84 | 	float distanceField(vec3 p) {
 85 | 		float d1 = sphere_of_radius_one(p)
 86 | 		float d2 = box_one_unit_to_left(p)
 87 | 		return min(d1, d2);
 88 | 	}
 89 | 
 90 | We expect that this function provides us a *lower-bound* on the closest object. It is therefore important that the distance estimators do not under-estimate the distance, as we might risk overshooting.
 91 | 
 92 | Various operations can be performed on the distance fields. For example, the union of two distance fields is the minimum, the intersection is maximum, and the complement is the negated distance (assuming it is signed). This is described in more detail [at the above mentioned page](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm).
 93 | 
 94 | A simple scene
 95 | --------------
 96 | It's time to put the theory to the test. But how do we go from pixels in the image, to points in our virtual world?
 97 | 
 98 | ![Window to image plane](http://3.bp.blogspot.com/-pooioOCAaf8/UeL7Ebf1ImI/AAAAAAAAAE8/YjgJAg5Rdc4/s1600/window-to-uv.png)
 99 | 
100 | Let's say that our window has a position and orientation in the world, the *image plane*. For the sake of simplicity, we scale it down to a rectangle of width and height 2 units. We define a pair of coordinates, u and v, both going from -1 to 1, representing the corners of the rectangle. This way, the top-left corner of the window (0, 0), becomes (-1, 1) in uv-coordinates. While the bottom-right corner becomes (1, -1).
101 | 
102 | We decide the orientation of the rectangle by defining an **up-vector** and a **right-vector**. A point on the image plane in world-coordinate is then:
103 | 
104 | ![Eq: Window to world](http://4.bp.blogspot.com/-Sa3_Pj4NQFA/UeL8tdyQpRI/AAAAAAAAAFc/dziCfBpgNPU/s1600/eq-window-to-world-ortho.png)
105 | 
106 | For this scene, let's say that we fire rays perpendicular out of the image plane. If our up-vector is along the y-axis, the right-vector is along the x-axis, the **forward-vector** is either down the positive or negative z-axis. The former can be found by crossing the right vector with the up vector.
107 | 
108 | Our scene is now everything from -1 to 1 on the x- and y-axis, looking down the positive z-axis. We position the eye at [0, 0, -1], and have a single distance function: a sphere of radius 0.5. If the raymarch function hits the sphere, we color the pixel white, else we color it black. The code for this fits nicely in a shader:
109 | 
110 | 	void main()
111 | 	{
112 | 		vec3 eye = vec3(0, 0, -1);
113 | 		vec3 up = vec3(0, 1, 0);
114 | 		vec3 right = vec3(1, 0, 0);
115 | 
116 | 		float u = gl_FragCoord.x * 2.0 / g_resolution.x - 1.0;
117 | 		float v = gl_FragCoord.y * 2.0 / g_resolution.y - 1.0;
118 | 		vec3 ro = right * u + up * v;
119 | 		vec3 rd = normalize(cross(right, up));
120 | 
121 | 		vec4 color = vec4(0.0); // Sky color
122 | 
123 | 		float t = 0.0;
124 | 		const int maxSteps = 32;
125 | 		for(int i = 0; i < maxSteps; ++i)
126 | 		{
127 | 			vec3 p = ro + rd * t;
128 | 			float d = length(p) - 0.5; // Distance to sphere of radius 0.5
129 | 			if(d < g_rmEpsilon)
130 | 			{
131 | 				color = vec4(1.0); // Sphere color
132 | 				break;
133 | 			}
134 | 
135 | 			t += d;
136 | 		}
137 | 
138 | 		return color;
139 | 	}
140 | 
141 | I believe it's much more exciting if you do this yourself, so I'll let you render this on your own ;)
142 | 
143 | Perspective
144 | ----------
145 | Notice that in the first example, the ray direction was equal to the forward vector, causing every ray to be cast perpendicular to the image plane. This is actually how orthographic projection works, and is not very three-dee-y. What we want, is an illusion of depth. To do this, we can simulate a pinhole camera by positioning the eye *behind* the image plane, like so:
146 | 
147 | ![Perspective model](http://2.bp.blogspot.com/-AuRSuWpC1WU/UeL7CcQLmYI/AAAAAAAAAEM/6SFX41PNaTQ/s1600/perspective.png)
148 | 
149 | The distance between the eye and the image plane is analogue to the focal length of a camera lens and focal point. The best part is, this does not change the behaviour of the rays, but merely what direction we cast them!
150 | 
151 | A point on the image plane is now given by:
152 | 
153 | ![Eq: Window to image plane perspective](http://4.bp.blogspot.com/-bq-1NmvM1Uo/UeL8tSMWtaI/AAAAAAAAAFg/eiyyZFOApKs/s1600/eq-window-to-world-perspective.png)
154 | 
155 | where *f* is the distance between the eye and the image plane, along the forward vector.
156 | 
157 | The ray direction can now be found by taking the difference between the image plane position and the eye.
158 | 
159 | Rendering techniques
160 | ---------------------------
161 | A simple black or white image is not too exciting. Alot of these can be found both in the [presentation](http://www.iquilezles.org/www/material/nvscene2008/nvscene2008.htm) mentioned in the introduction, and various pages in [this thread](http://pouet.net/topic.php?which=7931&page=1&x=3&y=14).
162 | 
163 | #### Iteration count
164 | A quick way to spice things up, is to let the color depend on the ray step count. That is, how many steps the raymarch function performed before bailing out or hitting a surface. This will allow you to see where the most intensive portions of your image are.
165 | 
166 | ![Iteration based color](http://4.bp.blogspot.com/-uoHgx5pgwv8/UeL7CD1z31I/AAAAAAAAAD8/cgHwGfx_GPg/s1600/iterations.png)
167 | 
168 | **Iteration-based coloring. The maximum step count was set to 64.**
169 | 
170 | #### Bounding volume
171 | We can speed up the raymarching if we limit the rays to a certain bounding volume.
172 | 
173 | Remember that in the raymarching function we repeatedly calculate the distance to the closest surface, and travel along the ray direction by this amount. The sum of the distances will be how far the ray has traveled so far. Using this, we can drop a ray as soon as it is further away than some limit.
174 | 
175 | #### Fog
176 | Fog is important to get a sense of scale and distance, and can be used to avoid artifacts in the distance.
177 | 
178 | To get fog, we can simply blend the distance from the eye with the sky color. In the simplest case, we can define the near- and far-clipping planes to have blending factors of 0 and 1, respectively, and linearly interpolate between these based on the distance.
179 | 
180 | More realistic blending methods can be found [here](http://www.iquilezles.org/www/articles/fog/fog.htm).
181 | 
182 | #### Anti-aliasing
183 | Instead of casting a single ray per pixel, we can distribute multiple rays inside a single pixel, sum the results and calculate the average. This will effectively remove sharp edges, and wreck your framerate at the same time, so be careful.
184 | 
185 | ![Anti aliasing diagram](http://2.bp.blogspot.com/-0xKCK5FFZX4/UeL7Bwa8xzI/AAAAAAAAAD4/yg-pUTAfr7I/s1600/antialiasing.png)
186 | 
187 | An interesting optimization could be to only perform AA if the iteration count is above average, as it likely indicates the edge of an object.
188 | 
189 | #### Lighting
190 | A simple lighting model is the *Lambertian reflectance* model. The idea is that the light intensity at a point depends on the angle between the surface normal and the direction to the light. By clamping the dot product of these vectors between 0 and 1, we get a measure for how strongly the point should be lit. For more on lighting models, Arcsynthesis' tutorial explains the topic quite well: [Arcsynthesis: Lights on](http://www.arcsynthesis.org/gltut/Illumination/Tutorial%2009.html).
191 | 
192 | We need to compute the surface normal. Our distance function is special type of function known as a scalar field, because it assigns each point (x, y, z) a scalar quantity (the distance to the closest surface). Knowing this, we can approximate the surface normal using what is known as the **gradient**.
193 | 
194 | The gradient of a scalar field is a vector, pointing in the direction where the field increases or decreases the most. Its magnitude is how big this change is. Naturally, the distance to a surface will increase more if we move *normally* away from it, rather than parallell to it. Thus, the gradient points in the same direction as the normal.
195 | 
196 | The gradient can be approximated by numerical differentation, and normalized to give us the surface normal. The lighting of the point can now be computed. For example:
197 | 
198 | 	vec4 shade(vec3 p)
199 | 	{
200 | 		vec3 normal = getNormal(p);
201 | 		vec3 lightDir = normalize(lightPosition - p);
202 | 		float LightIntensity = lightColor * dot(normal, lightDir);
203 | 		return getReflectance(p) * lightIntensity;
204 | 	}
205 | 
206 | #### Shadows
207 | Light rarely looks good without shadows. Luckily for us, this is fairly easy to implement. Simply check if the path from the point to shade to each light source is obstructed or not, by raymarching. This will produce a hard-shadow, but it is possible to get good looking soft-shadows, [almost for free](http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm).
208 | 
209 | ![Soft shadows](http://1.bp.blogspot.com/-VDgVKI8T_Gk/UeL7D_bPPKI/AAAAAAAAAEs/4LMg81mDiHI/s1600/softshadows.png)
210 | 
211 | #### Ambient occlusion
212 | Once we have obtained the surface normal (see the section about Lighting), we can easily fake an ambient occlusion effect. A proposed method is to sample along the surface normal a couple of times, comparing the value of the distance field with the actual distance from the surface. For example, if the difference is 0, the surface is not occluded. If there are other surfaces closer to the ray at the sample point, the difference will be non-zero.
213 | 
214 | ![Ambient occlusion](http://1.bp.blogspot.com/-rTU9gDQcc8c/UeL7B3c5FvI/AAAAAAAAAEU/Eh7Noewp3UQ/s1600/ambientocclusion.png)
215 | 
216 | #### Reflections
217 | A simple reflection can be calculated by raymarching off the surface normal, and blending the result together with the surface color.
218 | 
219 | #### Domain distortion and repetition
220 | Objects can be distorted by manipulating the point checked against in the distance functions. For example:
221 | 
222 | 	float twistedCube(vec3 p) {
223 | 		vec3 q = rotateY(p, 0.5 * p.y);
224 | 		return cube(q);
225 | 	}
226 | 
227 | This will produce a cube rotated more or less along the y-axis:
228 | 
229 | ![Twisted cube](http://3.bp.blogspot.com/-LHB2J0yx2X0/UeL7EOYuDsI/AAAAAAAAAFA/OGfxdJf4Y_4/s1600/twisted_box.png)
230 | 
231 | A scene can be repeated by taking the modulo of the point by some size:
232 | 
233 | 	float repeatedCubes(vec3 p) {
234 | 		p.x = mod(p.x, 1) - 0.5;
235 | 		p.z = mod(p.z, 1) - 0.5;
236 | 		return cube(p);
237 | 	}
238 | 
239 | Which results in many cubes repeated in the xz-plane:
240 | 
241 | ![Repeated cubes](http://4.bp.blogspot.com/-OPfiwoAnJ5k/UeL7Dd2_rOI/AAAAAAAAAEk/KbyFYOHc5cQ/s1600/repetition.png)
242 | 
243 | By combining domain repetition with subtracting distance fields from eachother (as described in the beginning), we can make complex objects like this:
244 | 
245 | ![Domain fractal](http://2.bp.blogspot.com/-UhTlNBbAsks/UeR49uPRSmI/AAAAAAAAAGU/NUq2l8NlINw/s1600/subtract_modulo2.png)
246 | **Domain repeated cubes are subtracted from a non-repeated, larger sphere**
247 | 
248 | Be careful though, as distorting the distance field like this can cause some nasty artifacts. A sort-of solution is to step shorter in the raymarching function than the distance field returns.
249 | 
250 | Other
251 | -----
252 | While distance fields has been a major focus of this article, raymarching itself is a general method. The main advantage is that the algorithm makes it very easy to render a variety of scenes with high level of detail. For example terrain:
253 | 
254 | Consider a heightmap describing your terrain. It could be a texture sampler uploaded to your shader, or it could be created procedurally. In order to render the terrain by raymarching, you would simply cast rays through each pixel of the image, step along the ray by some size, and stop whenever the point on the ray is lower than the terrain. The color can then be determined by perhaps making taller points white (i.e. snow) and lower points green (i.e. grass). We can shade the point by raymarching towards a lightsource.
255 | 
256 | See [Terrain marching](http://www.iquilezles.org/www/articles/terrainmarching/terrainmarching.htm) for a nice introduction.
257 | 
258 | ![Ixaleno/rgba by Inigo Quilez](http://1.bp.blogspot.com/-NqCg7Hqre9I/UeL7DO6KZSI/AAAAAAAAAFI/tJQgvY_hDPE/s1600/ray_05_g.jpg)
259 | 
260 | **Ixaleno/rgba by Inigo Quilez**
261 | 
262 | Conclusion
263 | ----------
264 | In summary, raymarching is a general technique that can be used to render a variety of complex scenes. It fits perfectly in the GPU, as each pixel can be calculated independently. By using distance fields, we can accelerate the rendering to real-time speeds, and still maintain a high level of detail. A number of techniques have been developed for manipulating the distance fields, such as blending, distorting and repeating objects. Furthermore, it is easy to implement graphical improvements, such as ambient occlusion, lighting, soft shadows and bump mapping.
265 | 
266 | If you think this is really cool, feel free to indulge in the links below. For a more thorough walkthrough of the raymarching algorithm, see [Hvidtfeldt's article series](http://blog.hvidtfeldts.net/index.php/2011/06/distance-estimated-3d-fractals-part-i/), where he also investigates 3D fractals!
267 | 
268 | I recommend looking through the pouet threads, which are packed full of colorful inspirations and helpful code.
269 | 
270 | Happy coding!
271 | 
272 | References
273 | ----------
274 | * [Inigo Quilez: *Raymarching Distance Fields*](http://www.iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm)
275 | * [hvidtfeldts: *Distance Estimated 3D Fractals*](http://blog.hvidtfeldts.net/index.php/2011/06/distance-estimated-3d-fractals-part-i/)
276 | * [Inigo Quilez: *Modeling with Distance Functions*](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
277 | * [Inigo Quilez: *Free Penumbra Shadows for Raymarching Distance Fields*](http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm)
278 | * [John C. Hart: *Sphere Tracing: A Geometric Method for the Antialiased Ray Tracing of Implicit Surfaces* (1994)](http://citeseer.ist.psu.edu/viewdoc/summary?doi=10.1.1.48.3825)
279 | * [fractalforums: *Kaleidoscopic (escape time) IFS*](http://www.fractalforums.com/ifs-iterated-function-systems/kaleidoscopic-(escape-time-ifs)/)
280 | * [pouet: *Raymarching beginner's thread*](http://pouet.net/topic.php?which=7920&page=1&x=11&y=6)
281 | * [pouet: *Raymarching toolbox*](http://pouet.net/topic.php?which=7931&page=1&x=3&y=14)
282 | 
283 | Code
284 | ----
285 | An interactive WebGL demo can be found [here](http://lightbits.github.io/toys/raymarching/raymarching.html).
286 | 
287 | A Github repo for the project can be found [here](https://github.com/lightbits/ray-march). The repo contains C++ code, which runs with GLFW and OpenGL ver. 3.2. It also contains the source for the WebGL implementation inside the "webgl" subfolder.
288 | 
289 | Thanks
290 | ------
291 | Special thanks to Inigo Quilez (iq) for his efforts in the demoscene on this topic, as well as various forum members of pouet.net, for being super helpful. Hvidtfeldt's introductory articles were well-written and very useful for gaining an understanding of the topic.
292 | 


--------------------------------------------------------------------------------
/webgl/gl-matrix-min.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @fileoverview gl-matrix - High performance matrix and vector operations
 3 |  * @author Brandon Jones
 4 |  * @author Colin MacKenzie IV
 5 |  * @version 2.2.0
 6 |  */
 7 | /* Copyright (c) 2013, Brandon Jones, Colin MacKenzie IV. All rights reserved.
 8 | 
 9 | Redistribution and use in source and binary forms, with or without modification,
10 | are permitted provided that the following conditions are met:
11 | 
12 |   * Redistributions of source code must retain the above copyright notice, this
13 |     list of conditions and the following disclaimer.
14 |   * Redistributions in binary form must reproduce the above copyright notice,
15 |     this list of conditions and the following disclaimer in the documentation 
16 |     and/or other materials provided with the distribution.
17 | 
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 
21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */
28 | (function(e){"use strict";var t={};typeof exports=="undefined"?typeof define=="function"&&typeof define.amd=="object"&&define.amd?(t.exports={},define(function(){return t.exports})):t.exports=typeof window!="undefined"?window:e:t.exports=exports,function(e){if(!t)var t=1e-6;if(!n)var n=typeof Float32Array!="undefined"?Float32Array:Array;if(!r)var r=Math.random;var i={};i.setMatrixArrayType=function(e){n=e},typeof e!="undefined"&&(e.glMatrix=i);var s={};s.create=function(){var e=new n(2);return e[0]=0,e[1]=0,e},s.clone=function(e){var t=new n(2);return t[0]=e[0],t[1]=e[1],t},s.fromValues=function(e,t){var r=new n(2);return r[0]=e,r[1]=t,r},s.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e},s.set=function(e,t,n){return e[0]=t,e[1]=n,e},s.add=function(e,t,n){return e[0]=t[0]+n[0],e[1]=t[1]+n[1],e},s.subtract=function(e,t,n){return e[0]=t[0]-n[0],e[1]=t[1]-n[1],e},s.sub=s.subtract,s.multiply=function(e,t,n){return e[0]=t[0]*n[0],e[1]=t[1]*n[1],e},s.mul=s.multiply,s.divide=function(e,t,n){return e[0]=t[0]/n[0],e[1]=t[1]/n[1],e},s.div=s.divide,s.min=function(e,t,n){return e[0]=Math.min(t[0],n[0]),e[1]=Math.min(t[1],n[1]),e},s.max=function(e,t,n){return e[0]=Math.max(t[0],n[0]),e[1]=Math.max(t[1],n[1]),e},s.scale=function(e,t,n){return e[0]=t[0]*n,e[1]=t[1]*n,e},s.scaleAndAdd=function(e,t,n,r){return e[0]=t[0]+n[0]*r,e[1]=t[1]+n[1]*r,e},s.distance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1];return Math.sqrt(n*n+r*r)},s.dist=s.distance,s.squaredDistance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1];return n*n+r*r},s.sqrDist=s.squaredDistance,s.length=function(e){var t=e[0],n=e[1];return Math.sqrt(t*t+n*n)},s.len=s.length,s.squaredLength=function(e){var t=e[0],n=e[1];return t*t+n*n},s.sqrLen=s.squaredLength,s.negate=function(e,t){return e[0]=-t[0],e[1]=-t[1],e},s.normalize=function(e,t){var n=t[0],r=t[1],i=n*n+r*r;return i>0&&(i=1/Math.sqrt(i),e[0]=t[0]*i,e[1]=t[1]*i),e},s.dot=function(e,t){return e[0]*t[0]+e[1]*t[1]},s.cross=function(e,t,n){var r=t[0]*n[1]-t[1]*n[0];return e[0]=e[1]=0,e[2]=r,e},s.lerp=function(e,t,n,r){var i=t[0],s=t[1];return e[0]=i+r*(n[0]-i),e[1]=s+r*(n[1]-s),e},s.random=function(e,t){t=t||1;var n=r()*2*Math.PI;return e[0]=Math.cos(n)*t,e[1]=Math.sin(n)*t,e},s.transformMat2=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[2]*i,e[1]=n[1]*r+n[3]*i,e},s.transformMat2d=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[2]*i+n[4],e[1]=n[1]*r+n[3]*i+n[5],e},s.transformMat3=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[3]*i+n[6],e[1]=n[1]*r+n[4]*i+n[7],e},s.transformMat4=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[4]*i+n[12],e[1]=n[1]*r+n[5]*i+n[13],e},s.forEach=function(){var e=s.create();return function(t,n,r,i,s,o){var u,a;n||(n=2),r||(r=0),i?a=Math.min(i*n+r,t.length):a=t.length;for(u=r;u<a;u+=n)e[0]=t[u],e[1]=t[u+1],s(e,e,o),t[u]=e[0],t[u+1]=e[1];return t}}(),s.str=function(e){return"vec2("+e[0]+", "+e[1]+")"},typeof e!="undefined"&&(e.vec2=s);var o={};o.create=function(){var e=new n(3);return e[0]=0,e[1]=0,e[2]=0,e},o.clone=function(e){var t=new n(3);return t[0]=e[0],t[1]=e[1],t[2]=e[2],t},o.fromValues=function(e,t,r){var i=new n(3);return i[0]=e,i[1]=t,i[2]=r,i},o.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e},o.set=function(e,t,n,r){return e[0]=t,e[1]=n,e[2]=r,e},o.add=function(e,t,n){return e[0]=t[0]+n[0],e[1]=t[1]+n[1],e[2]=t[2]+n[2],e},o.subtract=function(e,t,n){return e[0]=t[0]-n[0],e[1]=t[1]-n[1],e[2]=t[2]-n[2],e},o.sub=o.subtract,o.multiply=function(e,t,n){return e[0]=t[0]*n[0],e[1]=t[1]*n[1],e[2]=t[2]*n[2],e},o.mul=o.multiply,o.divide=function(e,t,n){return e[0]=t[0]/n[0],e[1]=t[1]/n[1],e[2]=t[2]/n[2],e},o.div=o.divide,o.min=function(e,t,n){return e[0]=Math.min(t[0],n[0]),e[1]=Math.min(t[1],n[1]),e[2]=Math.min(t[2],n[2]),e},o.max=function(e,t,n){return e[0]=Math.max(t[0],n[0]),e[1]=Math.max(t[1],n[1]),e[2]=Math.max(t[2],n[2]),e},o.scale=function(e,t,n){return e[0]=t[0]*n,e[1]=t[1]*n,e[2]=t[2]*n,e},o.scaleAndAdd=function(e,t,n,r){return e[0]=t[0]+n[0]*r,e[1]=t[1]+n[1]*r,e[2]=t[2]+n[2]*r,e},o.distance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=t[2]-e[2];return Math.sqrt(n*n+r*r+i*i)},o.dist=o.distance,o.squaredDistance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=t[2]-e[2];return n*n+r*r+i*i},o.sqrDist=o.squaredDistance,o.length=function(e){var t=e[0],n=e[1],r=e[2];return Math.sqrt(t*t+n*n+r*r)},o.len=o.length,o.squaredLength=function(e){var t=e[0],n=e[1],r=e[2];return t*t+n*n+r*r},o.sqrLen=o.squaredLength,o.negate=function(e,t){return e[0]=-t[0],e[1]=-t[1],e[2]=-t[2],e},o.normalize=function(e,t){var n=t[0],r=t[1],i=t[2],s=n*n+r*r+i*i;return s>0&&(s=1/Math.sqrt(s),e[0]=t[0]*s,e[1]=t[1]*s,e[2]=t[2]*s),e},o.dot=function(e,t){return e[0]*t[0]+e[1]*t[1]+e[2]*t[2]},o.cross=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=n[0],u=n[1],a=n[2];return e[0]=i*a-s*u,e[1]=s*o-r*a,e[2]=r*u-i*o,e},o.lerp=function(e,t,n,r){var i=t[0],s=t[1],o=t[2];return e[0]=i+r*(n[0]-i),e[1]=s+r*(n[1]-s),e[2]=o+r*(n[2]-o),e},o.random=function(e,t){t=t||1;var n=r()*2*Math.PI,i=r()*2-1,s=Math.sqrt(1-i*i)*t;return e[0]=Math.cos(n)*s,e[1]=Math.sin(n)*s,e[2]=i*t,e},o.transformMat4=function(e,t,n){var r=t[0],i=t[1],s=t[2];return e[0]=n[0]*r+n[4]*i+n[8]*s+n[12],e[1]=n[1]*r+n[5]*i+n[9]*s+n[13],e[2]=n[2]*r+n[6]*i+n[10]*s+n[14],e},o.transformMat3=function(e,t,n){var r=t[0],i=t[1],s=t[2];return e[0]=r*n[0]+i*n[3]+s*n[6],e[1]=r*n[1]+i*n[4]+s*n[7],e[2]=r*n[2]+i*n[5]+s*n[8],e},o.transformQuat=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=n[0],u=n[1],a=n[2],f=n[3],l=f*r+u*s-a*i,c=f*i+a*r-o*s,h=f*s+o*i-u*r,p=-o*r-u*i-a*s;return e[0]=l*f+p*-o+c*-a-h*-u,e[1]=c*f+p*-u+h*-o-l*-a,e[2]=h*f+p*-a+l*-u-c*-o,e},o.forEach=function(){var e=o.create();return function(t,n,r,i,s,o){var u,a;n||(n=3),r||(r=0),i?a=Math.min(i*n+r,t.length):a=t.length;for(u=r;u<a;u+=n)e[0]=t[u],e[1]=t[u+1],e[2]=t[u+2],s(e,e,o),t[u]=e[0],t[u+1]=e[1],t[u+2]=e[2];return t}}(),o.str=function(e){return"vec3("+e[0]+", "+e[1]+", "+e[2]+")"},typeof e!="undefined"&&(e.vec3=o);var u={};u.create=function(){var e=new n(4);return e[0]=0,e[1]=0,e[2]=0,e[3]=0,e},u.clone=function(e){var t=new n(4);return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t},u.fromValues=function(e,t,r,i){var s=new n(4);return s[0]=e,s[1]=t,s[2]=r,s[3]=i,s},u.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e},u.set=function(e,t,n,r,i){return e[0]=t,e[1]=n,e[2]=r,e[3]=i,e},u.add=function(e,t,n){return e[0]=t[0]+n[0],e[1]=t[1]+n[1],e[2]=t[2]+n[2],e[3]=t[3]+n[3],e},u.subtract=function(e,t,n){return e[0]=t[0]-n[0],e[1]=t[1]-n[1],e[2]=t[2]-n[2],e[3]=t[3]-n[3],e},u.sub=u.subtract,u.multiply=function(e,t,n){return e[0]=t[0]*n[0],e[1]=t[1]*n[1],e[2]=t[2]*n[2],e[3]=t[3]*n[3],e},u.mul=u.multiply,u.divide=function(e,t,n){return e[0]=t[0]/n[0],e[1]=t[1]/n[1],e[2]=t[2]/n[2],e[3]=t[3]/n[3],e},u.div=u.divide,u.min=function(e,t,n){return e[0]=Math.min(t[0],n[0]),e[1]=Math.min(t[1],n[1]),e[2]=Math.min(t[2],n[2]),e[3]=Math.min(t[3],n[3]),e},u.max=function(e,t,n){return e[0]=Math.max(t[0],n[0]),e[1]=Math.max(t[1],n[1]),e[2]=Math.max(t[2],n[2]),e[3]=Math.max(t[3],n[3]),e},u.scale=function(e,t,n){return e[0]=t[0]*n,e[1]=t[1]*n,e[2]=t[2]*n,e[3]=t[3]*n,e},u.scaleAndAdd=function(e,t,n,r){return e[0]=t[0]+n[0]*r,e[1]=t[1]+n[1]*r,e[2]=t[2]+n[2]*r,e[3]=t[3]+n[3]*r,e},u.distance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=t[2]-e[2],s=t[3]-e[3];return Math.sqrt(n*n+r*r+i*i+s*s)},u.dist=u.distance,u.squaredDistance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1],i=t[2]-e[2],s=t[3]-e[3];return n*n+r*r+i*i+s*s},u.sqrDist=u.squaredDistance,u.length=function(e){var t=e[0],n=e[1],r=e[2],i=e[3];return Math.sqrt(t*t+n*n+r*r+i*i)},u.len=u.length,u.squaredLength=function(e){var t=e[0],n=e[1],r=e[2],i=e[3];return t*t+n*n+r*r+i*i},u.sqrLen=u.squaredLength,u.negate=function(e,t){return e[0]=-t[0],e[1]=-t[1],e[2]=-t[2],e[3]=-t[3],e},u.normalize=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=n*n+r*r+i*i+s*s;return o>0&&(o=1/Math.sqrt(o),e[0]=t[0]*o,e[1]=t[1]*o,e[2]=t[2]*o,e[3]=t[3]*o),e},u.dot=function(e,t){return e[0]*t[0]+e[1]*t[1]+e[2]*t[2]+e[3]*t[3]},u.lerp=function(e,t,n,r){var i=t[0],s=t[1],o=t[2],u=t[3];return e[0]=i+r*(n[0]-i),e[1]=s+r*(n[1]-s),e[2]=o+r*(n[2]-o),e[3]=u+r*(n[3]-u),e},u.random=function(e,t){return t=t||1,e[0]=r(),e[1]=r(),e[2]=r(),e[3]=r(),u.normalize(e,e),u.scale(e,e,t),e},u.transformMat4=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3];return e[0]=n[0]*r+n[4]*i+n[8]*s+n[12]*o,e[1]=n[1]*r+n[5]*i+n[9]*s+n[13]*o,e[2]=n[2]*r+n[6]*i+n[10]*s+n[14]*o,e[3]=n[3]*r+n[7]*i+n[11]*s+n[15]*o,e},u.transformQuat=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=n[0],u=n[1],a=n[2],f=n[3],l=f*r+u*s-a*i,c=f*i+a*r-o*s,h=f*s+o*i-u*r,p=-o*r-u*i-a*s;return e[0]=l*f+p*-o+c*-a-h*-u,e[1]=c*f+p*-u+h*-o-l*-a,e[2]=h*f+p*-a+l*-u-c*-o,e},u.forEach=function(){var e=u.create();return function(t,n,r,i,s,o){var u,a;n||(n=4),r||(r=0),i?a=Math.min(i*n+r,t.length):a=t.length;for(u=r;u<a;u+=n)e[0]=t[u],e[1]=t[u+1],e[2]=t[u+2],e[3]=t[u+3],s(e,e,o),t[u]=e[0],t[u+1]=e[1],t[u+2]=e[2],t[u+3]=e[3];return t}}(),u.str=function(e){return"vec4("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"},typeof e!="undefined"&&(e.vec4=u);var a={};a.create=function(){var e=new n(4);return e[0]=1,e[1]=0,e[2]=0,e[3]=1,e},a.clone=function(e){var t=new n(4);return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t},a.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e},a.identity=function(e){return e[0]=1,e[1]=0,e[2]=0,e[3]=1,e},a.transpose=function(e,t){if(e===t){var n=t[1];e[1]=t[2],e[2]=n}else e[0]=t[0],e[1]=t[2],e[2]=t[1],e[3]=t[3];return e},a.invert=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=n*s-i*r;return o?(o=1/o,e[0]=s*o,e[1]=-r*o,e[2]=-i*o,e[3]=n*o,e):null},a.adjoint=function(e,t){var n=t[0];return e[0]=t[3],e[1]=-t[1],e[2]=-t[2],e[3]=n,e},a.determinant=function(e){return e[0]*e[3]-e[2]*e[1]},a.multiply=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=n[0],a=n[1],f=n[2],l=n[3];return e[0]=r*u+i*f,e[1]=r*a+i*l,e[2]=s*u+o*f,e[3]=s*a+o*l,e},a.mul=a.multiply,a.rotate=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=Math.sin(n),a=Math.cos(n);return e[0]=r*a+i*u,e[1]=r*-u+i*a,e[2]=s*a+o*u,e[3]=s*-u+o*a,e},a.scale=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=n[0],a=n[1];return e[0]=r*u,e[1]=i*a,e[2]=s*u,e[3]=o*a,e},a.str=function(e){return"mat2("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"},typeof e!="undefined"&&(e.mat2=a);var f={};f.create=function(){var e=new n(6);return e[0]=1,e[1]=0,e[2]=0,e[3]=1,e[4]=0,e[5]=0,e},f.clone=function(e){var t=new n(6);return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t},f.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[4]=t[4],e[5]=t[5],e},f.identity=function(e){return e[0]=1,e[1]=0,e[2]=0,e[3]=1,e[4]=0,e[5]=0,e},f.invert=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=t[4],u=t[5],a=n*s-r*i;return a?(a=1/a,e[0]=s*a,e[1]=-r*a,e[2]=-i*a,e[3]=n*a,e[4]=(i*u-s*o)*a,e[5]=(r*o-n*u)*a,e):null},f.determinant=function(e){return e[0]*e[3]-e[1]*e[2]},f.multiply=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=t[4],a=t[5],f=n[0],l=n[1],c=n[2],h=n[3],p=n[4],d=n[5];return e[0]=r*f+i*c,e[1]=r*l+i*h,e[2]=s*f+o*c,e[3]=s*l+o*h,e[4]=f*u+c*a+p,e[5]=l*u+h*a+d,e},f.mul=f.multiply,f.rotate=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=t[4],a=t[5],f=Math.sin(n),l=Math.cos(n);return e[0]=r*l+i*f,e[1]=-r*f+i*l,e[2]=s*l+o*f,e[3]=-s*f+l*o,e[4]=l*u+f*a,e[5]=l*a-f*u,e},f.scale=function(e,t,n){var r=n[0],i=n[1];return e[0]=t[0]*r,e[1]=t[1]*i,e[2]=t[2]*r,e[3]=t[3]*i,e[4]=t[4]*r,e[5]=t[5]*i,e},f.translate=function(e,t,n){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[4]=t[4]+n[0],e[5]=t[5]+n[1],e},f.str=function(e){return"mat2d("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+", "+e[4]+", "+e[5]+")"},typeof e!="undefined"&&(e.mat2d=f);var l={};l.create=function(){var e=new n(9);return e[0]=1,e[1]=0,e[2]=0,e[3]=0,e[4]=1,e[5]=0,e[6]=0,e[7]=0,e[8]=1,e},l.fromMat4=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[4],e[4]=t[5],e[5]=t[6],e[6]=t[8],e[7]=t[9],e[8]=t[10],e},l.clone=function(e){var t=new n(9);return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t[6]=e[6],t[7]=e[7],t[8]=e[8],t},l.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[4]=t[4],e[5]=t[5],e[6]=t[6],e[7]=t[7],e[8]=t[8],e},l.identity=function(e){return e[0]=1,e[1]=0,e[2]=0,e[3]=0,e[4]=1,e[5]=0,e[6]=0,e[7]=0,e[8]=1,e},l.transpose=function(e,t){if(e===t){var n=t[1],r=t[2],i=t[5];e[1]=t[3],e[2]=t[6],e[3]=n,e[5]=t[7],e[6]=r,e[7]=i}else e[0]=t[0],e[1]=t[3],e[2]=t[6],e[3]=t[1],e[4]=t[4],e[5]=t[7],e[6]=t[2],e[7]=t[5],e[8]=t[8];return e},l.invert=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=t[4],u=t[5],a=t[6],f=t[7],l=t[8],c=l*o-u*f,h=-l*s+u*a,p=f*s-o*a,d=n*c+r*h+i*p;return d?(d=1/d,e[0]=c*d,e[1]=(-l*r+i*f)*d,e[2]=(u*r-i*o)*d,e[3]=h*d,e[4]=(l*n-i*a)*d,e[5]=(-u*n+i*s)*d,e[6]=p*d,e[7]=(-f*n+r*a)*d,e[8]=(o*n-r*s)*d,e):null},l.adjoint=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=t[4],u=t[5],a=t[6],f=t[7],l=t[8];return e[0]=o*l-u*f,e[1]=i*f-r*l,e[2]=r*u-i*o,e[3]=u*a-s*l,e[4]=n*l-i*a,e[5]=i*s-n*u,e[6]=s*f-o*a,e[7]=r*a-n*f,e[8]=n*o-r*s,e},l.determinant=function(e){var t=e[0],n=e[1],r=e[2],i=e[3],s=e[4],o=e[5],u=e[6],a=e[7],f=e[8];return t*(f*s-o*a)+n*(-f*i+o*u)+r*(a*i-s*u)},l.multiply=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=t[4],a=t[5],f=t[6],l=t[7],c=t[8],h=n[0],p=n[1],d=n[2],v=n[3],m=n[4],g=n[5],y=n[6],b=n[7],w=n[8];return e[0]=h*r+p*o+d*f,e[1]=h*i+p*u+d*l,e[2]=h*s+p*a+d*c,e[3]=v*r+m*o+g*f,e[4]=v*i+m*u+g*l,e[5]=v*s+m*a+g*c,e[6]=y*r+b*o+w*f,e[7]=y*i+b*u+w*l,e[8]=y*s+b*a+w*c,e},l.mul=l.multiply,l.translate=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=t[4],a=t[5],f=t[6],l=t[7],c=t[8],h=n[0],p=n[1];return e[0]=r,e[1]=i,e[2]=s,e[3]=o,e[4]=u,e[5]=a,e[6]=h*r+p*o+f,e[7]=h*i+p*u+l,e[8]=h*s+p*a+c,e},l.rotate=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=t[4],a=t[5],f=t[6],l=t[7],c=t[8],h=Math.sin(n),p=Math.cos(n);return e[0]=p*r+h*o,e[1]=p*i+h*u,e[2]=p*s+h*a,e[3]=p*o-h*r,e[4]=p*u-h*i,e[5]=p*a-h*s,e[6]=f,e[7]=l,e[8]=c,e},l.scale=function(e,t,n){var r=n[0],i=n[1];return e[0]=r*t[0],e[1]=r*t[1],e[2]=r*t[2],e[3]=i*t[3],e[4]=i*t[4],e[5]=i*t[5],e[6]=t[6],e[7]=t[7],e[8]=t[8],e},l.fromMat2d=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=0,e[3]=t[2],e[4]=t[3],e[5]=0,e[6]=t[4],e[7]=t[5],e[8]=1,e},l.fromQuat=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=n+n,u=r+r,a=i+i,f=n*o,l=n*u,c=n*a,h=r*u,p=r*a,d=i*a,v=s*o,m=s*u,g=s*a;return e[0]=1-(h+d),e[3]=l+g,e[6]=c-m,e[1]=l-g,e[4]=1-(f+d),e[7]=p+v,e[2]=c+m,e[5]=p-v,e[8]=1-(f+h),e},l.normalFromMat4=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=t[4],u=t[5],a=t[6],f=t[7],l=t[8],c=t[9],h=t[10],p=t[11],d=t[12],v=t[13],m=t[14],g=t[15],y=n*u-r*o,b=n*a-i*o,w=n*f-s*o,E=r*a-i*u,S=r*f-s*u,x=i*f-s*a,T=l*v-c*d,N=l*m-h*d,C=l*g-p*d,k=c*m-h*v,L=c*g-p*v,A=h*g-p*m,O=y*A-b*L+w*k+E*C-S*N+x*T;return O?(O=1/O,e[0]=(u*A-a*L+f*k)*O,e[1]=(a*C-o*A-f*N)*O,e[2]=(o*L-u*C+f*T)*O,e[3]=(i*L-r*A-s*k)*O,e[4]=(n*A-i*C+s*N)*O,e[5]=(r*C-n*L-s*T)*O,e[6]=(v*x-m*S+g*E)*O,e[7]=(m*w-d*x-g*b)*O,e[8]=(d*S-v*w+g*y)*O,e):null},l.str=function(e){return"mat3("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+", "+e[4]+", "+e[5]+", "+e[6]+", "+e[7]+", "+e[8]+")"},typeof e!="undefined"&&(e.mat3=l);var c={};c.create=function(){var e=new n(16);return e[0]=1,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=1,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[10]=1,e[11]=0,e[12]=0,e[13]=0,e[14]=0,e[15]=1,e},c.clone=function(e){var t=new n(16);return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t[6]=e[6],t[7]=e[7],t[8]=e[8],t[9]=e[9],t[10]=e[10],t[11]=e[11],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15],t},c.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[4]=t[4],e[5]=t[5],e[6]=t[6],e[7]=t[7],e[8]=t[8],e[9]=t[9],e[10]=t[10],e[11]=t[11],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15],e},c.identity=function(e){return e[0]=1,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=1,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[10]=1,e[11]=0,e[12]=0,e[13]=0,e[14]=0,e[15]=1,e},c.transpose=function(e,t){if(e===t){var n=t[1],r=t[2],i=t[3],s=t[6],o=t[7],u=t[11];e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=n,e[6]=t[9],e[7]=t[13],e[8]=r,e[9]=s,e[11]=t[14],e[12]=i,e[13]=o,e[14]=u}else e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15];return e},c.invert=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=t[4],u=t[5],a=t[6],f=t[7],l=t[8],c=t[9],h=t[10],p=t[11],d=t[12],v=t[13],m=t[14],g=t[15],y=n*u-r*o,b=n*a-i*o,w=n*f-s*o,E=r*a-i*u,S=r*f-s*u,x=i*f-s*a,T=l*v-c*d,N=l*m-h*d,C=l*g-p*d,k=c*m-h*v,L=c*g-p*v,A=h*g-p*m,O=y*A-b*L+w*k+E*C-S*N+x*T;return O?(O=1/O,e[0]=(u*A-a*L+f*k)*O,e[1]=(i*L-r*A-s*k)*O,e[2]=(v*x-m*S+g*E)*O,e[3]=(h*S-c*x-p*E)*O,e[4]=(a*C-o*A-f*N)*O,e[5]=(n*A-i*C+s*N)*O,e[6]=(m*w-d*x-g*b)*O,e[7]=(l*x-h*w+p*b)*O,e[8]=(o*L-u*C+f*T)*O,e[9]=(r*C-n*L-s*T)*O,e[10]=(d*S-v*w+g*y)*O,e[11]=(c*w-l*S-p*y)*O,e[12]=(u*N-o*k-a*T)*O,e[13]=(n*k-r*N+i*T)*O,e[14]=(v*b-d*E-m*y)*O,e[15]=(l*E-c*b+h*y)*O,e):null},c.adjoint=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=t[4],u=t[5],a=t[6],f=t[7],l=t[8],c=t[9],h=t[10],p=t[11],d=t[12],v=t[13],m=t[14],g=t[15];return e[0]=u*(h*g-p*m)-c*(a*g-f*m)+v*(a*p-f*h),e[1]=-(r*(h*g-p*m)-c*(i*g-s*m)+v*(i*p-s*h)),e[2]=r*(a*g-f*m)-u*(i*g-s*m)+v*(i*f-s*a),e[3]=-(r*(a*p-f*h)-u*(i*p-s*h)+c*(i*f-s*a)),e[4]=-(o*(h*g-p*m)-l*(a*g-f*m)+d*(a*p-f*h)),e[5]=n*(h*g-p*m)-l*(i*g-s*m)+d*(i*p-s*h),e[6]=-(n*(a*g-f*m)-o*(i*g-s*m)+d*(i*f-s*a)),e[7]=n*(a*p-f*h)-o*(i*p-s*h)+l*(i*f-s*a),e[8]=o*(c*g-p*v)-l*(u*g-f*v)+d*(u*p-f*c),e[9]=-(n*(c*g-p*v)-l*(r*g-s*v)+d*(r*p-s*c)),e[10]=n*(u*g-f*v)-o*(r*g-s*v)+d*(r*f-s*u),e[11]=-(n*(u*p-f*c)-o*(r*p-s*c)+l*(r*f-s*u)),e[12]=-(o*(c*m-h*v)-l*(u*m-a*v)+d*(u*h-a*c)),e[13]=n*(c*m-h*v)-l*(r*m-i*v)+d*(r*h-i*c),e[14]=-(n*(u*m-a*v)-o*(r*m-i*v)+d*(r*a-i*u)),e[15]=n*(u*h-a*c)-o*(r*h-i*c)+l*(r*a-i*u),e},c.determinant=function(e){var t=e[0],n=e[1],r=e[2],i=e[3],s=e[4],o=e[5],u=e[6],a=e[7],f=e[8],l=e[9],c=e[10],h=e[11],p=e[12],d=e[13],v=e[14],m=e[15],g=t*o-n*s,y=t*u-r*s,b=t*a-i*s,w=n*u-r*o,E=n*a-i*o,S=r*a-i*u,x=f*d-l*p,T=f*v-c*p,N=f*m-h*p,C=l*v-c*d,k=l*m-h*d,L=c*m-h*v;return g*L-y*k+b*C+w*N-E*T+S*x},c.multiply=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=t[4],a=t[5],f=t[6],l=t[7],c=t[8],h=t[9],p=t[10],d=t[11],v=t[12],m=t[13],g=t[14],y=t[15],b=n[0],w=n[1],E=n[2],S=n[3];return e[0]=b*r+w*u+E*c+S*v,e[1]=b*i+w*a+E*h+S*m,e[2]=b*s+w*f+E*p+S*g,e[3]=b*o+w*l+E*d+S*y,b=n[4],w=n[5],E=n[6],S=n[7],e[4]=b*r+w*u+E*c+S*v,e[5]=b*i+w*a+E*h+S*m,e[6]=b*s+w*f+E*p+S*g,e[7]=b*o+w*l+E*d+S*y,b=n[8],w=n[9],E=n[10],S=n[11],e[8]=b*r+w*u+E*c+S*v,e[9]=b*i+w*a+E*h+S*m,e[10]=b*s+w*f+E*p+S*g,e[11]=b*o+w*l+E*d+S*y,b=n[12],w=n[13],E=n[14],S=n[15],e[12]=b*r+w*u+E*c+S*v,e[13]=b*i+w*a+E*h+S*m,e[14]=b*s+w*f+E*p+S*g,e[15]=b*o+w*l+E*d+S*y,e},c.mul=c.multiply,c.translate=function(e,t,n){var r=n[0],i=n[1],s=n[2],o,u,a,f,l,c,h,p,d,v,m,g;return t===e?(e[12]=t[0]*r+t[4]*i+t[8]*s+t[12],e[13]=t[1]*r+t[5]*i+t[9]*s+t[13],e[14]=t[2]*r+t[6]*i+t[10]*s+t[14],e[15]=t[3]*r+t[7]*i+t[11]*s+t[15]):(o=t[0],u=t[1],a=t[2],f=t[3],l=t[4],c=t[5],h=t[6],p=t[7],d=t[8],v=t[9],m=t[10],g=t[11],e[0]=o,e[1]=u,e[2]=a,e[3]=f,e[4]=l,e[5]=c,e[6]=h,e[7]=p,e[8]=d,e[9]=v,e[10]=m,e[11]=g,e[12]=o*r+l*i+d*s+t[12],e[13]=u*r+c*i+v*s+t[13],e[14]=a*r+h*i+m*s+t[14],e[15]=f*r+p*i+g*s+t[15]),e},c.scale=function(e,t,n){var r=n[0],i=n[1],s=n[2];return e[0]=t[0]*r,e[1]=t[1]*r,e[2]=t[2]*r,e[3]=t[3]*r,e[4]=t[4]*i,e[5]=t[5]*i,e[6]=t[6]*i,e[7]=t[7]*i,e[8]=t[8]*s,e[9]=t[9]*s,e[10]=t[10]*s,e[11]=t[11]*s,e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15],e},c.rotate=function(e,n,r,i){var s=i[0],o=i[1],u=i[2],a=Math.sqrt(s*s+o*o+u*u),f,l,c,h,p,d,v,m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_;return Math.abs(a)<t?null:(a=1/a,s*=a,o*=a,u*=a,f=Math.sin(r),l=Math.cos(r),c=1-l,h=n[0],p=n[1],d=n[2],v=n[3],m=n[4],g=n[5],y=n[6],b=n[7],w=n[8],E=n[9],S=n[10],x=n[11],T=s*s*c+l,N=o*s*c+u*f,C=u*s*c-o*f,k=s*o*c-u*f,L=o*o*c+l,A=u*o*c+s*f,O=s*u*c+o*f,M=o*u*c-s*f,_=u*u*c+l,e[0]=h*T+m*N+w*C,e[1]=p*T+g*N+E*C,e[2]=d*T+y*N+S*C,e[3]=v*T+b*N+x*C,e[4]=h*k+m*L+w*A,e[5]=p*k+g*L+E*A,e[6]=d*k+y*L+S*A,e[7]=v*k+b*L+x*A,e[8]=h*O+m*M+w*_,e[9]=p*O+g*M+E*_,e[10]=d*O+y*M+S*_,e[11]=v*O+b*M+x*_,n!==e&&(e[12]=n[12],e[13]=n[13],e[14]=n[14],e[15]=n[15]),e)},c.rotateX=function(e,t,n){var r=Math.sin(n),i=Math.cos(n),s=t[4],o=t[5],u=t[6],a=t[7],f=t[8],l=t[9],c=t[10],h=t[11];return t!==e&&(e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e[4]=s*i+f*r,e[5]=o*i+l*r,e[6]=u*i+c*r,e[7]=a*i+h*r,e[8]=f*i-s*r,e[9]=l*i-o*r,e[10]=c*i-u*r,e[11]=h*i-a*r,e},c.rotateY=function(e,t,n){var r=Math.sin(n),i=Math.cos(n),s=t[0],o=t[1],u=t[2],a=t[3],f=t[8],l=t[9],c=t[10],h=t[11];return t!==e&&(e[4]=t[4],e[5]=t[5],e[6]=t[6],e[7]=t[7],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e[0]=s*i-f*r,e[1]=o*i-l*r,e[2]=u*i-c*r,e[3]=a*i-h*r,e[8]=s*r+f*i,e[9]=o*r+l*i,e[10]=u*r+c*i,e[11]=a*r+h*i,e},c.rotateZ=function(e,t,n){var r=Math.sin(n),i=Math.cos(n),s=t[0],o=t[1],u=t[2],a=t[3],f=t[4],l=t[5],c=t[6],h=t[7];return t!==e&&(e[8]=t[8],e[9]=t[9],e[10]=t[10],e[11]=t[11],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e[0]=s*i+f*r,e[1]=o*i+l*r,e[2]=u*i+c*r,e[3]=a*i+h*r,e[4]=f*i-s*r,e[5]=l*i-o*r,e[6]=c*i-u*r,e[7]=h*i-a*r,e},c.fromRotationTranslation=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=r+r,a=i+i,f=s+s,l=r*u,c=r*a,h=r*f,p=i*a,d=i*f,v=s*f,m=o*u,g=o*a,y=o*f;return e[0]=1-(p+v),e[1]=c+y,e[2]=h-g,e[3]=0,e[4]=c-y,e[5]=1-(l+v),e[6]=d+m,e[7]=0,e[8]=h+g,e[9]=d-m,e[10]=1-(l+p),e[11]=0,e[12]=n[0],e[13]=n[1],e[14]=n[2],e[15]=1,e},c.fromQuat=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=n+n,u=r+r,a=i+i,f=n*o,l=n*u,c=n*a,h=r*u,p=r*a,d=i*a,v=s*o,m=s*u,g=s*a;return e[0]=1-(h+d),e[1]=l+g,e[2]=c-m,e[3]=0,e[4]=l-g,e[5]=1-(f+d),e[6]=p+v,e[7]=0,e[8]=c+m,e[9]=p-v,e[10]=1-(f+h),e[11]=0,e[12]=0,e[13]=0,e[14]=0,e[15]=1,e},c.frustum=function(e,t,n,r,i,s,o){var u=1/(n-t),a=1/(i-r),f=1/(s-o);return e[0]=s*2*u,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=s*2*a,e[6]=0,e[7]=0,e[8]=(n+t)*u,e[9]=(i+r)*a,e[10]=(o+s)*f,e[11]=-1,e[12]=0,e[13]=0,e[14]=o*s*2*f,e[15]=0,e},c.perspective=function(e,t,n,r,i){var s=1/Math.tan(t/2),o=1/(r-i);return e[0]=s/n,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=s,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[10]=(i+r)*o,e[11]=-1,e[12]=0,e[13]=0,e[14]=2*i*r*o,e[15]=0,e},c.ortho=function(e,t,n,r,i,s,o){var u=1/(t-n),a=1/(r-i),f=1/(s-o);return e[0]=-2*u,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=-2*a,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[10]=2*f,e[11]=0,e[12]=(t+n)*u,e[13]=(i+r)*a,e[14]=(o+s)*f,e[15]=1,e},c.lookAt=function(e,n,r,i){var s,o,u,a,f,l,h,p,d,v,m=n[0],g=n[1],y=n[2],b=i[0],w=i[1],E=i[2],S=r[0],x=r[1],T=r[2];return Math.abs(m-S)<t&&Math.abs(g-x)<t&&Math.abs(y-T)<t?c.identity(e):(h=m-S,p=g-x,d=y-T,v=1/Math.sqrt(h*h+p*p+d*d),h*=v,p*=v,d*=v,s=w*d-E*p,o=E*h-b*d,u=b*p-w*h,v=Math.sqrt(s*s+o*o+u*u),v?(v=1/v,s*=v,o*=v,u*=v):(s=0,o=0,u=0),a=p*u-d*o,f=d*s-h*u,l=h*o-p*s,v=Math.sqrt(a*a+f*f+l*l),v?(v=1/v,a*=v,f*=v,l*=v):(a=0,f=0,l=0),e[0]=s,e[1]=a,e[2]=h,e[3]=0,e[4]=o,e[5]=f,e[6]=p,e[7]=0,e[8]=u,e[9]=l,e[10]=d,e[11]=0,e[12]=-(s*m+o*g+u*y),e[13]=-(a*m+f*g+l*y),e[14]=-(h*m+p*g+d*y),e[15]=1,e)},c.str=function(e){return"mat4("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+", "+e[4]+", "+e[5]+", "+e[6]+", "+e[7]+", "+e[8]+", "+e[9]+", "+e[10]+", "+e[11]+", "+e[12]+", "+e[13]+", "+e[14]+", "+e[15]+")"},typeof e!="undefined"&&(e.mat4=c);var h={};h.create=function(){var e=new n(4);return e[0]=0,e[1]=0,e[2]=0,e[3]=1,e},h.rotationTo=function(){var e=o.create(),t=o.fromValues(1,0,0),n=o.fromValues(0,1,0);return function(r,i,s){var u=o.dot(i,s);return u<-0.999999?(o.cross(e,t,i),o.length(e)<1e-6&&o.cross(e,n,i),o.normalize(e,e),h.setAxisAngle(r,e,Math.PI),r):u>.999999?(r[0]=0,r[1]=0,r[2]=0,r[3]=1,r):(o.cross(e,i,s),r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=1+u,h.normalize(r,r))}}(),h.setAxes=function(){var e=l.create();return function(t,n,r,i){return e[0]=r[0],e[3]=r[1],e[6]=r[2],e[1]=i[0],e[4]=i[1],e[7]=i[2],e[2]=n[0],e[5]=n[1],e[8]=n[2],h.normalize(t,h.fromMat3(t,e))}}(),h.clone=u.clone,h.fromValues=u.fromValues,h.copy=u.copy,h.set=u.set,h.identity=function(e){return e[0]=0,e[1]=0,e[2]=0,e[3]=1,e},h.setAxisAngle=function(e,t,n){n*=.5;var r=Math.sin(n);return e[0]=r*t[0],e[1]=r*t[1],e[2]=r*t[2],e[3]=Math.cos(n),e},h.add=u.add,h.multiply=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=n[0],a=n[1],f=n[2],l=n[3];return e[0]=r*l+o*u+i*f-s*a,e[1]=i*l+o*a+s*u-r*f,e[2]=s*l+o*f+r*a-i*u,e[3]=o*l-r*u-i*a-s*f,e},h.mul=h.multiply,h.scale=u.scale,h.rotateX=function(e,t,n){n*=.5;var r=t[0],i=t[1],s=t[2],o=t[3],u=Math.sin(n),a=Math.cos(n);return e[0]=r*a+o*u,e[1]=i*a+s*u,e[2]=s*a-i*u,e[3]=o*a-r*u,e},h.rotateY=function(e,t,n){n*=.5;var r=t[0],i=t[1],s=t[2],o=t[3],u=Math.sin(n),a=Math.cos(n);return e[0]=r*a-s*u,e[1]=i*a+o*u,e[2]=s*a+r*u,e[3]=o*a-i*u,e},h.rotateZ=function(e,t,n){n*=.5;var r=t[0],i=t[1],s=t[2],o=t[3],u=Math.sin(n),a=Math.cos(n);return e[0]=r*a+i*u,e[1]=i*a-r*u,e[2]=s*a+o*u,e[3]=o*a-s*u,e},h.calculateW=function(e,t){var n=t[0],r=t[1],i=t[2];return e[0]=n,e[1]=r,e[2]=i,e[3]=-Math.sqrt(Math.abs(1-n*n-r*r-i*i)),e},h.dot=u.dot,h.lerp=u.lerp,h.slerp=function(e,t,n,r){var i=t[0],s=t[1],o=t[2],u=t[3],a=n[0],f=n[1],l=n[2],c=n[3],h,p,d,v,m;return p=i*a+s*f+o*l+u*c,p<0&&(p=-p,a=-a,f=-f,l=-l,c=-c),1-p>1e-6?(h=Math.acos(p),d=Math.sin(h),v=Math.sin((1-r)*h)/d,m=Math.sin(r*h)/d):(v=1-r,m=r),e[0]=v*i+m*a,e[1]=v*s+m*f,e[2]=v*o+m*l,e[3]=v*u+m*c,e},h.invert=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=n*n+r*r+i*i+s*s,u=o?1/o:0;return e[0]=-n*u,e[1]=-r*u,e[2]=-i*u,e[3]=s*u,e},h.conjugate=function(e,t){return e[0]=-t[0],e[1]=-t[1],e[2]=-t[2],e[3]=t[3],e},h.length=u.length,h.len=h.length,h.squaredLength=u.squaredLength,h.sqrLen=h.squaredLength,h.normalize=u.normalize,h.fromMat3=function(){var e=typeof Int8Array!="undefined"?new Int8Array([1,2,0]):[1,2,0];return function(t,n){var r=n[0]+n[4]+n[8],i;if(r>0)i=Math.sqrt(r+1),t[3]=.5*i,i=.5/i,t[0]=(n[7]-n[5])*i,t[1]=(n[2]-n[6])*i,t[2]=(n[3]-n[1])*i;else{var s=0;n[4]>n[0]&&(s=1),n[8]>n[s*3+s]&&(s=2);var o=e[s],u=e[o];i=Math.sqrt(n[s*3+s]-n[o*3+o]-n[u*3+u]+1),t[s]=.5*i,i=.5/i,t[3]=(n[u*3+o]-n[o*3+u])*i,t[o]=(n[o*3+s]+n[s*3+o])*i,t[u]=(n[u*3+s]+n[s*3+u])*i}return t}}(),h.str=function(e){return"quat("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"},typeof e!="undefined"&&(e.quat=h)}(t.exports)})(this);
29 | 


--------------------------------------------------------------------------------