Showing preview only (1,803K chars total). Download the full file or copy to clipboard to get everything.
Repository: jagracar/webgl-shader-examples
Branch: master
Commit: 949d8828d363
Files: 214
Total size: 1.7 MB
Directory structure:
gitextract_5nk142y1/
├── .gitignore
├── .project
├── Gruntfile.js
├── LICENSE
├── README.md
├── WebContent/
│ ├── .htaccess
│ ├── about.html
│ ├── attraction-example.html
│ ├── badtv-example.html
│ ├── blur-example.html
│ ├── css/
│ │ └── styles.css
│ ├── cursor-example.html
│ ├── cuts-example.html
│ ├── debug-example.html
│ ├── deform-example.html
│ ├── dla-example.html
│ ├── dots-example.html
│ ├── edge-example.html
│ ├── fire-example.html
│ ├── flare-example.html
│ ├── fonts/
│ │ └── fontAwesome-4.7.0/
│ │ └── FontAwesome.otf
│ ├── galaxies-example.html
│ ├── gravity-example.html
│ ├── index.html
│ ├── js/
│ │ ├── libs/
│ │ │ ├── CopyShader.js
│ │ │ ├── EffectComposer.js
│ │ │ ├── GPUComputationRenderer.js
│ │ │ ├── MaskPass.js
│ │ │ ├── OrbitControls.js
│ │ │ ├── RenderPass.js
│ │ │ ├── ShaderPass.js
│ │ │ ├── TrackballControls.js
│ │ │ ├── dat.gui.js
│ │ │ ├── stats.js
│ │ │ └── three.js
│ │ ├── shader-example-2d.js
│ │ ├── shader-example-3d.js
│ │ ├── shader-example-debug.js
│ │ ├── shader-example-dla.js
│ │ ├── shader-example-evolve.js
│ │ ├── shader-example-evolveImage.js
│ │ ├── shader-example-filters.js
│ │ ├── shader-example-galaxies.js
│ │ ├── shader-example-gravity.js
│ │ ├── shader-example-mountains.js
│ │ ├── shader-example-postprocessing.js
│ │ ├── shader-example-repulsion.js
│ │ ├── shader-example-sphere.js
│ │ └── shader-example-stippling.js
│ ├── lens-example.html
│ ├── mountains-example.html
│ ├── noise-example.html
│ ├── objects/
│ │ └── suzanne_buffergeometry.json
│ ├── pencil-example.html
│ ├── pixelated-example.html
│ ├── pixels-example.html
│ ├── rain-example.html
│ ├── random-example.html
│ ├── reaction-example.html
│ ├── repulsion-example.html
│ ├── rgb-example.html
│ ├── shaders/
│ │ ├── frag-badtv.glsl
│ │ ├── frag-blur.glsl
│ │ ├── frag-cursor.glsl
│ │ ├── frag-cuts.glsl
│ │ ├── frag-debug-pos.glsl
│ │ ├── frag-debug-vel.glsl
│ │ ├── frag-debug.glsl
│ │ ├── frag-dla-pos.glsl
│ │ ├── frag-dla-vel.glsl
│ │ ├── frag-dla.glsl
│ │ ├── frag-dots.glsl
│ │ ├── frag-edge.glsl
│ │ ├── frag-fire.glsl
│ │ ├── frag-flare.glsl
│ │ ├── frag-galaxies-pos.glsl
│ │ ├── frag-galaxies-vel.glsl
│ │ ├── frag-grav-pos.glsl
│ │ ├── frag-grav-vel.glsl
│ │ ├── frag-lens.glsl
│ │ ├── frag-mountains.glsl
│ │ ├── frag-noise.glsl
│ │ ├── frag-normals.glsl
│ │ ├── frag-pencil.glsl
│ │ ├── frag-pixelated.glsl
│ │ ├── frag-rain.glsl
│ │ ├── frag-random.glsl
│ │ ├── frag-reaction.glsl
│ │ ├── frag-repulsion-pos.glsl
│ │ ├── frag-repulsion-vel.glsl
│ │ ├── frag-repulsion.glsl
│ │ ├── frag-rgb.glsl
│ │ ├── frag-sim.glsl
│ │ ├── frag-sort.glsl
│ │ ├── frag-sphere.glsl
│ │ ├── frag-stippling-pos.glsl
│ │ ├── frag-stippling-vel.glsl
│ │ ├── frag-stippling.glsl
│ │ ├── frag-stripes.glsl
│ │ ├── frag-tile.glsl
│ │ ├── frag-toon.glsl
│ │ ├── frag-wave.glsl
│ │ ├── vert-2d.glsl
│ │ ├── vert-3d.glsl
│ │ ├── vert-attraction.glsl
│ │ ├── vert-debug.glsl
│ │ ├── vert-deform.glsl
│ │ ├── vert-dla.glsl
│ │ ├── vert-filters.glsl
│ │ ├── vert-mountains.glsl
│ │ ├── vert-repulsion.glsl
│ │ ├── vert-sim.glsl
│ │ ├── vert-sphere.glsl
│ │ └── vert-stippling.glsl
│ ├── sort-example.html
│ ├── sphere-example.html
│ ├── stippling-example.html
│ ├── stripes-example.html
│ ├── tile-example.html
│ ├── toon-example.html
│ └── wave-example.html
├── html/
│ ├── about.html
│ ├── index.html
│ ├── template-example-2d.html
│ ├── template-example-3d.html
│ ├── template-example-post.html
│ └── template-example-sim.html
├── package.json
├── sass/
│ ├── originals/
│ │ └── _normalize.scss
│ ├── partials/
│ │ ├── _base.scss
│ │ ├── _content.scss
│ │ ├── _fonts.scss
│ │ ├── _footer.scss
│ │ ├── _layout.scss
│ │ ├── _navbar.scss
│ │ ├── _normalize.scss
│ │ ├── _sketch.scss
│ │ └── _variables.scss
│ └── styles.scss
└── shaders/
├── frag-badtv.glsl
├── frag-blur.glsl
├── frag-cursor.glsl
├── frag-cuts.glsl
├── frag-debug-pos.glsl
├── frag-debug-vel.glsl
├── frag-debug.glsl
├── frag-dla-pos.glsl
├── frag-dla-vel.glsl
├── frag-dla.glsl
├── frag-dots.glsl
├── frag-edge.glsl
├── frag-fire.glsl
├── frag-flare.glsl
├── frag-galaxies-pos.glsl
├── frag-galaxies-vel.glsl
├── frag-grav-pos.glsl
├── frag-grav-vel.glsl
├── frag-lens.glsl
├── frag-mountains.glsl
├── frag-noise.glsl
├── frag-normals.glsl
├── frag-pencil.glsl
├── frag-pixelated.glsl
├── frag-rain.glsl
├── frag-random.glsl
├── frag-reaction.glsl
├── frag-repulsion-pos.glsl
├── frag-repulsion-vel.glsl
├── frag-repulsion.glsl
├── frag-rgb.glsl
├── frag-sim.glsl
├── frag-sort.glsl
├── frag-sphere.glsl
├── frag-stippling-pos.glsl
├── frag-stippling-vel.glsl
├── frag-stippling.glsl
├── frag-stripes.glsl
├── frag-tile.glsl
├── frag-toon.glsl
├── frag-wave.glsl
├── imports/
│ ├── commonUniforms.glsl
│ ├── commonVaryings3d.glsl
│ ├── textureUniforms.glsl
│ └── textureVaryings.glsl
├── requires/
│ ├── calculateNormal.glsl
│ ├── classicNoise2d.glsl
│ ├── diffuseFactor.glsl
│ ├── kernels/
│ │ ├── edgeKernel.glsl
│ │ └── gaussianKernel.glsl
│ ├── laplacian.glsl
│ ├── noise1d.glsl
│ ├── random1d.glsl
│ ├── random2d.glsl
│ ├── rotate2d.glsl
│ ├── shapes/
│ │ ├── circle.glsl
│ │ ├── ellipse.glsl
│ │ ├── horizontalLine.glsl
│ │ ├── line.glsl
│ │ ├── lineSegment.glsl
│ │ ├── rectangle.glsl
│ │ └── square.glsl
│ └── simplexNoise2d.glsl
├── vert-2d.glsl
├── vert-3d.glsl
├── vert-attraction.glsl
├── vert-debug.glsl
├── vert-deform.glsl
├── vert-dla.glsl
├── vert-filters.glsl
├── vert-mountains.glsl
├── vert-repulsion.glsl
├── vert-sim.glsl
├── vert-sphere.glsl
└── vert-stippling.glsl
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
package-lock.json
/.sass-cache/
================================================
FILE: .project
================================================
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>webgl-shader-examples</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
================================================
FILE: Gruntfile.js
================================================
module.exports = function(grunt) {
/*
* Defines the grunt-replace parameters that will fill the html template file for a shader example
*/
function replaceParametersForExample(name, htmlFile, jsFile, vertexShader, fragmentShader) {
var parameters = {
files : [ {
src : 'html/' + htmlFile,
dest : 'WebContent/' + name + '-example.html'
} ],
options : {
patterns : [ {
match : 'name',
replacement : name
}, {
match : 'jsFile',
replacement : '/js/' + jsFile
}, {
match : 'vertexShaderFile',
replacement : '/shaders/' + vertexShader
}, {
match : 'fragmentShaderFile',
replacement : '/shaders/' + fragmentShader
}, {
match : 'vertexShaderContent',
replacement : '<%= grunt.file.read("WebContent/shaders/' + vertexShader + '") %>'
}, {
match : 'fragmentShaderContent',
replacement : '<%= grunt.file.read("WebContent/shaders/' + fragmentShader + '") %>'
} ]
}
};
return parameters;
}
/*
* Defines the grunt-replace parameters that will fill the html template file for a simulation shader example
*/
function replaceParametersForSimExample(name, htmlFile, jsFile, positionShader, velocityShader, vertexShader, fragmentShader) {
var parameters = {
files : [ {
src : 'html/' + htmlFile,
dest : 'WebContent/' + name + '-example.html'
} ],
options : {
patterns : [ {
match : 'name',
replacement : name
}, {
match : 'jsFile',
replacement : '/js/' + jsFile
}, {
match : 'positionShaderFile',
replacement : '/shaders/' + positionShader
}, {
match : 'velocityShaderFile',
replacement : '/shaders/' + velocityShader
}, {
match : 'vertexShaderFile',
replacement : '/shaders/' + vertexShader
}, {
match : 'fragmentShaderFile',
replacement : '/shaders/' + fragmentShader
}, {
match : 'positionShaderContent',
replacement : '<%= grunt.file.read("WebContent/shaders/' + positionShader + '") %>'
}, {
match : 'velocityShaderContent',
replacement : '<%= grunt.file.read("WebContent/shaders/' + velocityShader + '") %>'
}, {
match : 'vertexShaderContent',
replacement : '<%= grunt.file.read("WebContent/shaders/' + vertexShader + '") %>'
}, {
match : 'fragmentShaderContent',
replacement : '<%= grunt.file.read("WebContent/shaders/' + fragmentShader + '") %>'
} ]
}
};
return parameters;
}
// Project configuration.
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
// grunt-contrib-clean
clean : {
build : {
src : [ 'WebContent/*.html', 'WebContent/shaders/*.glsl' ]
//src : [ 'WebContent/*.html', 'WebContent/shaders/frag-mountains.glsl' ]
}
},
// grunt-contrib-copy
copy : {
index : {
src : 'html/index.html',
dest : 'WebContent/index.html'
},
about : {
src : 'html/about.html',
dest : 'WebContent/about.html'
}
},
// grunt-exec
exec : {
build_shaders : {
cwd : 'shaders',
cmd : 'for filename in *.glsl; do glslify "${filename}" -o ../WebContent/shaders/"${filename}"; done'
//cmd : 'glslify frag-mountains.glsl -o ../WebContent/shaders/frag-mountains.glsl'
}
},
// grunt-replace
replace : {
random : replaceParametersForExample('random', 'template-example-2d.html', 'shader-example-2d.js', 'vert-2d.glsl', 'frag-random.glsl'),
noise : replaceParametersForExample('noise', 'template-example-2d.html', 'shader-example-2d.js', 'vert-2d.glsl', 'frag-noise.glsl'),
rain : replaceParametersForExample('rain', 'template-example-2d.html', 'shader-example-2d.js', 'vert-2d.glsl', 'frag-rain.glsl'),
tile : replaceParametersForExample('tile', 'template-example-2d.html', 'shader-example-2d.js', 'vert-2d.glsl', 'frag-tile.glsl'),
wave : replaceParametersForExample('wave', 'template-example-3d.html', 'shader-example-3d.js', 'vert-3d.glsl', 'frag-wave.glsl'),
pencil : replaceParametersForExample('pencil', 'template-example-3d.html', 'shader-example-3d.js', 'vert-3d.glsl', 'frag-pencil.glsl'),
dots : replaceParametersForExample('dots', 'template-example-3d.html', 'shader-example-3d.js', 'vert-3d.glsl', 'frag-dots.glsl'),
toon : replaceParametersForExample('toon', 'template-example-3d.html', 'shader-example-3d.js', 'vert-3d.glsl', 'frag-toon.glsl'),
stripes : replaceParametersForExample('stripes', 'template-example-3d.html', 'shader-example-3d.js', 'vert-3d.glsl', 'frag-stripes.glsl'),
edge : replaceParametersForExample('edge', 'template-example-2d.html', 'shader-example-filters.js', 'vert-filters.glsl', 'frag-edge.glsl'),
blur : replaceParametersForExample('blur', 'template-example-2d.html', 'shader-example-filters.js', 'vert-filters.glsl', 'frag-blur.glsl'),
pixels : replaceParametersForExample('pixels', 'template-example-2d.html', 'shader-example-filters.js', 'vert-filters.glsl', 'frag-pixelated.glsl'),
lens : replaceParametersForExample('lens', 'template-example-2d.html', 'shader-example-filters.js', 'vert-filters.glsl', 'frag-lens.glsl'),
gravity : replaceParametersForSimExample('gravity', 'template-example-sim.html', 'shader-example-gravity.js', 'frag-grav-pos.glsl', 'frag-grav-vel.glsl', 'vert-sim.glsl', 'frag-sim.glsl'),
galaxies : replaceParametersForSimExample('galaxies', 'template-example-sim.html', 'shader-example-galaxies.js', 'frag-galaxies-pos.glsl', 'frag-galaxies-vel.glsl', 'vert-sim.glsl', 'frag-sim.glsl'),
debug : replaceParametersForSimExample('debug', 'template-example-sim.html', 'shader-example-debug.js', 'frag-debug-pos.glsl', 'frag-debug-vel.glsl', 'vert-debug.glsl', 'frag-debug.glsl'),
repulsion : replaceParametersForSimExample('repulsion', 'template-example-sim.html', 'shader-example-repulsion.js', 'frag-repulsion-pos.glsl', 'frag-repulsion-vel.glsl', 'vert-repulsion.glsl', 'frag-repulsion.glsl'),
stippling : replaceParametersForSimExample('stippling', 'template-example-sim.html', 'shader-example-stippling.js', 'frag-stippling-pos.glsl', 'frag-stippling-vel.glsl', 'vert-stippling.glsl', 'frag-stippling.glsl'),
dla : replaceParametersForSimExample('dla', 'template-example-sim.html', 'shader-example-dla.js', 'frag-dla-pos.glsl', 'frag-dla-vel.glsl', 'vert-dla.glsl', 'frag-dla.glsl'),
badtv : replaceParametersForExample('badtv', 'template-example-post.html', 'shader-example-postprocessing.js', 'vert-filters.glsl', 'frag-badtv.glsl'),
pixelated : replaceParametersForExample('pixelated', 'template-example-post.html', 'shader-example-postprocessing.js', 'vert-filters.glsl', 'frag-pixelated.glsl'),
cuts : replaceParametersForExample('cuts', 'template-example-post.html', 'shader-example-postprocessing.js', 'vert-filters.glsl', 'frag-cuts.glsl'),
rgb : replaceParametersForExample('rgb', 'template-example-post.html', 'shader-example-postprocessing.js', 'vert-filters.glsl', 'frag-rgb.glsl'),
flare : replaceParametersForExample('flare', 'template-example-2d.html', 'shader-example-evolve.js', 'vert-filters.glsl', 'frag-flare.glsl'),
fire : replaceParametersForExample('fire', 'template-example-2d.html', 'shader-example-evolve.js', 'vert-filters.glsl', 'frag-fire.glsl'),
cursor : replaceParametersForExample('cursor', 'template-example-2d.html', 'shader-example-evolve.js', 'vert-filters.glsl', 'frag-cursor.glsl'),
reaction : replaceParametersForExample('reaction', 'template-example-2d.html', 'shader-example-evolve.js', 'vert-filters.glsl', 'frag-reaction.glsl'),
sort : replaceParametersForExample('sort', 'template-example-2d.html', 'shader-example-evolveImage.js', 'vert-filters.glsl', 'frag-sort.glsl'),
deform : replaceParametersForExample('deform', 'template-example-3d.html', 'shader-example-3d.js', 'vert-deform.glsl', 'frag-normals.glsl'),
attraction : replaceParametersForExample('attraction', 'template-example-3d.html', 'shader-example-3d.js', 'vert-attraction.glsl', 'frag-normals.glsl'),
mountains : replaceParametersForExample('mountains', 'template-example-3d.html', 'shader-example-mountains.js', 'vert-mountains.glsl', 'frag-mountains.glsl'),
sphere : replaceParametersForExample('sphere', 'template-example-3d.html', 'shader-example-sphere.js', 'vert-sphere.glsl', 'frag-sphere.glsl')
},
// grunt-jshint
jshint : {
files : [ 'Gruntfile.js', 'package.json', 'WebContent/js/*.js' ]
},
// grunt-contrib-sass
sass : {
options : {
sourcemap : 'none',
style : 'expanded'
},
build : {
src : 'sass/styles.scss',
dest : 'WebContent/css/styles.css'
}
},
// grunt-autoprefixer
autoprefixer : {
build : {
src : 'WebContent/css/styles.css',
dest : 'WebContent/css/styles.css'
}
},
// grunt-contrib-watch
watch : {
files : [ 'html/*.html', 'shaders/**/*.glsl', 'WebContent/js/*.js' ],
tasks : [ 'default' ]
}
});
// Load the grunt tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-replace');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task
grunt.registerTask('default', [ 'clean', 'copy', 'exec', 'replace', 'jshint', 'sass', 'autoprefixer' ]);
};
================================================
FILE: LICENSE
================================================
GNU LESSER GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
This version of the GNU Lesser General Public License incorporates
the terms and conditions of version 3 of the GNU General Public
License, supplemented by the additional permissions listed below.
0. Additional Definitions.
As used herein, "this License" refers to version 3 of the GNU Lesser
General Public License, and the "GNU GPL" refers to version 3 of the GNU
General Public License.
"The Library" refers to a covered work governed by this License,
other than an Application or a Combined Work as defined below.
An "Application" is any work that makes use of an interface provided
by the Library, but which is not otherwise based on the Library.
Defining a subclass of a class defined by the Library is deemed a mode
of using an interface provided by the Library.
A "Combined Work" is a work produced by combining or linking an
Application with the Library. The particular version of the Library
with which the Combined Work was made is also called the "Linked
Version".
The "Minimal Corresponding Source" for a Combined Work means the
Corresponding Source for the Combined Work, excluding any source code
for portions of the Combined Work that, considered in isolation, are
based on the Application, and not on the Linked Version.
The "Corresponding Application Code" for a Combined Work means the
object code and/or source code for the Application, including any data
and utility programs needed for reproducing the Combined Work from the
Application, but excluding the System Libraries of the Combined Work.
1. Exception to Section 3 of the GNU GPL.
You may convey a covered work under sections 3 and 4 of this License
without being bound by section 3 of the GNU GPL.
2. Conveying Modified Versions.
If you modify a copy of the Library, and, in your modifications, a
facility refers to a function or data to be supplied by an Application
that uses the facility (other than as an argument passed when the
facility is invoked), then you may convey a copy of the modified
version:
a) under this License, provided that you make a good faith effort to
ensure that, in the event an Application does not supply the
function or data, the facility still operates, and performs
whatever part of its purpose remains meaningful, or
b) under the GNU GPL, with none of the additional permissions of
this License applicable to that copy.
3. Object Code Incorporating Material from Library Header Files.
The object code form of an Application may incorporate material from
a header file that is part of the Library. You may convey such object
code under terms of your choice, provided that, if the incorporated
material is not limited to numerical parameters, data structure
layouts and accessors, or small macros, inline functions and templates
(ten or fewer lines in length), you do both of the following:
a) Give prominent notice with each copy of the object code that the
Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the object code with a copy of the GNU GPL and this license
document.
4. Combined Works.
You may convey a Combined Work under terms of your choice that,
taken together, effectively do not restrict modification of the
portions of the Library contained in the Combined Work and reverse
engineering for debugging such modifications, if you also do each of
the following:
a) Give prominent notice with each copy of the Combined Work that
the Library is used in it and that the Library and its use are
covered by this License.
b) Accompany the Combined Work with a copy of the GNU GPL and this license
document.
c) For a Combined Work that displays copyright notices during
execution, include the copyright notice for the Library among
these notices, as well as a reference directing the user to the
copies of the GNU GPL and this license document.
d) Do one of the following:
0) Convey the Minimal Corresponding Source under the terms of this
License, and the Corresponding Application Code in a form
suitable for, and under terms that permit, the user to
recombine or relink the Application with a modified version of
the Linked Version to produce a modified Combined Work, in the
manner specified by section 6 of the GNU GPL for conveying
Corresponding Source.
1) Use a suitable shared library mechanism for linking with the
Library. A suitable mechanism is one that (a) uses at run time
a copy of the Library already present on the user's computer
system, and (b) will operate properly with a modified version
of the Library that is interface-compatible with the Linked
Version.
e) Provide Installation Information, but only if you would otherwise
be required to provide such information under section 6 of the
GNU GPL, and only to the extent that such information is
necessary to install and execute a modified version of the
Combined Work produced by recombining or relinking the
Application with a modified version of the Linked Version. (If
you use option 4d0, the Installation Information must accompany
the Minimal Corresponding Source and Corresponding Application
Code. If you use option 4d1, you must provide the Installation
Information in the manner specified by section 6 of the GNU GPL
for conveying Corresponding Source.)
5. Combined Libraries.
You may place library facilities that are a work based on the
Library side by side in a single library together with other library
facilities that are not Applications and are not covered by this
License, and convey such a combined library under terms of your
choice, if you do both of the following:
a) Accompany the combined library with a copy of the same work based
on the Library, uncombined with any other library facilities,
conveyed under the terms of this License.
b) Give prominent notice with the combined library that part of it
is a work based on the Library, and explaining where to find the
accompanying uncombined form of the same work.
6. Revised Versions of the GNU Lesser General Public License.
The Free Software Foundation may publish revised and/or new versions
of the GNU Lesser General Public License from time to time. Such new
versions will be similar in spirit to the present version, but may
differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the
Library as you received it specifies that a certain numbered version
of the GNU Lesser General Public License "or any later version"
applies to it, you have the option of following the terms and
conditions either of that published version or of any later version
published by the Free Software Foundation. If the Library as you
received it does not specify a version number of the GNU Lesser
General Public License, you may choose any version of the GNU Lesser
General Public License ever published by the Free Software Foundation.
If the Library as you received it specifies that a proxy can decide
whether future versions of the GNU Lesser General Public License shall
apply, that proxy's public statement of acceptance of any version is
permanent authorization for you to choose that version for the
Library.
================================================
FILE: README.md
================================================
# WebGL shader examples
Some simple examples of WebGL shaders. They can be seen live at [webgl-shaders.com](https://webgl-shaders.com).
# Build the project
Install [Node.js](https://nodejs.org) (for Ubuntu):
``` bash
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs
```
Install [grunt](https://gruntjs.com/), [glslify](https://github.com/glslify/glslify) and [budo](https://github.com/mattdesl/budo) globally:
``` bash
sudo npm install -g grunt-cli
sudo npm install -g glslify
sudo npm install -g budo
```
Download the git repository and install the dependencies:
``` bash
git clone https://github.com/jagracar/webgl-shader-examples.git
cd webgl-shader-examples
npm install
```
Build the project:
``` bash
grunt
```
Run budo:
``` bash
budo --dir WebContent/ --live
```
Then open [http://localhost:9966/](http://localhost:9966/) to test the examples.
================================================
FILE: WebContent/.htaccess
================================================
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
================================================
FILE: WebContent/about.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, examples, about">
<meta name="description" content="About the WebGL shader examples project">
<meta name="author" content="Javier Gracia Carpio">
<title>About this project</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item is-active-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<header>
<h2>About WebGL-shaders.com</h2>
</header>
<p>
The main intention of this site is to teach <a href="https://jagracar.com">myself</a> to program WebGL shaders, but I
hope it will also be useful to oder people that are trying to do the same.
</p>
<p>Bellow is a non-complete list of references that have helped me to learn the basics:</p>
<ul>
<li><a href="https://thebookofshaders.com/">The Book of shaders</a>.</li>
<li><a href="https://webglfundamentals.org/">WebGL fundamentals</a>.</li>
<li><a href="http://pixelshaders.com/">Pixel shaders</a>.</li>
<li><a href="https://www.clicktorelease.com/blog/">Clicktorelease blog</a>.</li>
<li><a href="http://madebyevan.com/shaders/">Shader tricks</a>.</li>
<li><a href="https://www.airtightinteractive.com/2013/02/intro-to-pixel-shaders-in-three-js/">Intro to pixel
shaders in Three.js</a>.</li>
<li><a href="http://www.iquilezles.org/www/index.htm">List of articles by Íñigo Quílez</a>.</li>
<li><a href="https://www.taylorpetrick.com/blog/post/convolution-part1">Image convolution tutorial</a>.</li>
<li><a href="https://developer.nvidia.com/gpugems/GPUGems/gpugems_pref01.html">GPU gems</a>.</li>
<li><a href="http://codeflow.org/tags/howto.html">Codeflow howtos</a>.</li>
<li><a href="https://processing.org/tutorials/pshader/">Processing shaders tutorial</a>.</li>
<li><a href="https://openframeworks.cc/ofBook/chapters/shaders.html">OpenFrameworks shaders tutorial</a>.</li>
<li><a href="https://threejs.org/examples/">Three.js examples</a>.</li>
</ul>
<p>Some inspiration:</p>
<ul>
<li><a href="https://www.shadertoy.com/">Shadertoy</a>.</li>
<li><a href="http://glslsandbox.com/">GLSL sandbox</a>.</li>
</ul>
</article>
</main>
<!-- Footer -->
<footer class="footer-container">
<div class="footer-content">
<p>
Hand made in Munich. <span class="separator">///</span> Unless otherwise stated, all the content in this site is
licensed under a Creative Commons Attribution-ShareAlike <a href="https://creativecommons.org/licenses/by-sa/4.0/">license</a>.
</p>
</div>
</footer>
</body>
</html>
================================================
FILE: WebContent/attraction-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 3D">
<meta name="description" content="attraction shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>attraction shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-3d.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-attraction.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-normals.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Common varyings
varying vec3 v_position;
varying vec3 v_normal;
/*
* The main program
*/
void main() {
// Define the attractor position using spherical coordinates
float r = 15.0;
float theta = 0.87 * u_time;
float phi = 0.63 * u_time;
vec3 attractor_position = r * vec3(sin(theta) * cos(phi), sin(theta) * sin(phi), cos(theta));
// Calculate the new vertex position to simulate attraction effect
vec3 effect_direction = attractor_position - position;
float effect_intensity = min(30.0 * pow(length(effect_direction), -2.0), 1.0);
vec3 new_position = position + effect_intensity * effect_direction;
// Calculate the modelview position
vec4 mv_position = modelViewMatrix * vec4(new_position, 1.0);
// Save the varyings
v_position = mv_position.xyz;
v_normal = normalize(normalMatrix * normal);
// Vertex shader output
gl_Position = projectionMatrix * mv_position;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Common varyings
varying vec3 v_position;
varying vec3 v_normal;
/*
* Calculates the normal vector at the given position
*
* Uses this fix for some mobiles:
* https://stackoverflow.com/questions/20272272/standard-derivatives-from-fragment-shader-dfdx-dfdy-dont-run-correctly-in-a
*/
vec3 calculateNormal(vec3 position) {
vec3 fdx = vec3(dFdx(position.x), dFdx(position.y), dFdx(position.z));
vec3 fdy = vec3(dFdy(position.x), dFdy(position.y), dFdy(position.z));
vec3 normal = normalize(cross(fdx, fdy));
if (!gl_FrontFacing) {
normal = -normal;
}
return normal;
}
/*
* Calculates the diffuse factor produced by the light illumination
*/
float diffuseFactor(vec3 normal, vec3 light_direction) {
float df = dot(normalize(normal), normalize(light_direction));
if (gl_FrontFacing) {
df = -df;
}
return max(0.0, df);
}
/*
* The main program
*/
void main() {
// Calculate the new normal vector
vec3 new_normal = calculateNormal(v_position);
// Use the mouse position to define the light direction
float min_resolution = min(u_resolution.x, u_resolution.y);
vec3 light_direction = -vec3((u_mouse - 0.5 * u_resolution) / min_resolution, 0.25);
// Set the surface color
vec3 surface_color = vec3(1.0);
// Apply the light diffusion factor
surface_color *= diffuseFactor(new_normal, light_direction);
// Fragment shader output
gl_FragColor = vec4(surface_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-3d.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/badtv-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, postprocessin">
<meta name="description" content="badtv shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>badtv shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/CopyShader.js"></script>
<script type="text/javascript" src="/js/libs/EffectComposer.js"></script>
<script type="text/javascript" src="/js/libs/RenderPass.js"></script>
<script type="text/javascript" src="/js/libs/ShaderPass.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-postprocessing.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-filters.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-badtv.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the varyings
v_uv = uv;
// Vertex shader output
gl_Position = vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Texture uniforms
uniform sampler2D u_texture;
// Texture varyings
varying vec2 v_uv;
/*
* Random number generator with a float seed
*
* Credits:
* http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0
*/
highp float random1d(float dt) {
highp float c = 43758.5453;
highp float sn = mod(dt, 3.14);
return fract(sin(sn) * c);
}
/*
* Pseudo-noise generator
*
* Credits:
* https://thebookofshaders.com/11/
*/
highp float noise1d(float value) {
highp float i = floor(value);
highp float f = fract(value);
return mix(random1d(i), random1d(i + 1.0), smoothstep(0.0, 1.0, f));
}
/*
* Random number generator with a vec2 seed
*
* Credits:
* http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0
* https://github.com/mattdesl/glsl-random
*/
highp float random2d(vec2 co) {
highp float a = 12.9898;
highp float b = 78.233;
highp float c = 43758.5453;
highp float dt = dot(co.xy, vec2(a, b));
highp float sn = mod(dt, 3.14);
return fract(sin(sn) * c);
}
/*
* The main program
*/
void main() {
// Calculate the effect relative strength
float strength = (0.3 + 0.7 * noise1d(0.3 * u_time)) * u_mouse.x / u_resolution.x;
// Calculate the effect jump at the current time interval
float jump = 500.0 * floor(0.3 * (u_mouse.x / u_resolution.x) * (u_time + noise1d(u_time)));
// Shift the texture coordinates
vec2 uv = v_uv;
uv.y += 0.2 * strength * (noise1d(5.0 * v_uv.y + 2.0 * u_time + jump) - 0.5);
uv.x += 0.1 * strength * (noise1d(100.0 * strength * uv.y + 3.0 * u_time + jump) - 0.5);
// Get the texture pixel color
vec3 pixel_color = texture2D(u_texture, uv).rgb;
// Add some white noise
pixel_color += vec3(5.0 * strength * (random2d(v_uv + 1.133001 * vec2(u_time, 1.13)) - 0.5));
// Fragment shader output
gl_FragColor = vec4(pixel_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-postprocessing.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/blur-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 2D">
<meta name="description" content="blur shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>blur shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-filters.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-filters.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-blur.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the varyings
v_uv = uv;
// Vertex shader output
gl_Position = vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Texture uniforms
uniform sampler2D u_texture;
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the pixel color based on the mouse position
vec3 pixel_color;
if (gl_FragCoord.x > u_mouse.x) {
// Apply the gaussian kernel
float step = 1.0 + 2.0 * u_mouse.y / u_resolution.y;
pixel_color += (1.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-2, -2) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-2, -1) / u_resolution).rgb;
pixel_color += (6.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-2, 0) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-2, 1) / u_resolution).rgb;
pixel_color += (1.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-2, 2) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-1, -2) / u_resolution).rgb;
pixel_color += (16.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-1, -1) / u_resolution).rgb;
pixel_color += (24.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-1, 0) / u_resolution).rgb;
pixel_color += (16.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-1, 1) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(-1, 2) / u_resolution).rgb;
pixel_color += (6.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(0, -2) / u_resolution).rgb;
pixel_color += (24.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(0, -1) / u_resolution).rgb;
pixel_color += (36.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(0, 0) / u_resolution).rgb;
pixel_color += (24.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(0, 1) / u_resolution).rgb;
pixel_color += (6.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(0, 2) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(1, -2) / u_resolution).rgb;
pixel_color += (16.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(1, -1) / u_resolution).rgb;
pixel_color += (24.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(1, 0) / u_resolution).rgb;
pixel_color += (16.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(1, 1) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(1, 2) / u_resolution).rgb;
pixel_color += (1.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(2, -2) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(2, -1) / u_resolution).rgb;
pixel_color += (6.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(2, 0) / u_resolution).rgb;
pixel_color += (4.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(2, 1) / u_resolution).rgb;
pixel_color += (1.0 / 256.0) * texture2D(u_texture, v_uv + step * vec2(2, 2) / u_resolution).rgb;
} else if (gl_FragCoord.x > u_mouse.x - 1.0) {
// Draw a line indicating the transition
pixel_color = vec3(0.0);
} else {
// Use the original image pixel color
pixel_color = texture2D(u_texture, v_uv).rgb;
}
// Fragment shader output
gl_FragColor = vec4(pixel_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-filters.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/css/styles.css
================================================
/*
* Normalize
*
* v8.0.0 | MIT License | github.com/necolas/normalize.css
*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button, input {
overflow: visible;
}
button, select {
text-transform: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
/*
* Fonts declarations
*/
@font-face {
font-family: "Font Awesome 4.7";
font-style: normal;
font-weight: normal;
src: url("../fonts/fontAwesome-4.7.0/fontawesome-webfont.eot?v=4.7.0");
src: url("../fonts/fontAwesome-4.7.0/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontAwesome-4.7.0/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontAwesome-4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontAwesome-4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontAwesome-4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
}
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
src: url("../fonts/fontAwesome-5.2.0/fa-brands-400.eot");
src: url("../fonts/fontAwesome-5.2.0/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fontAwesome-5.2.0/fa-brands-400.woff2") format("woff2"), url("../fonts/fontAwesome-5.2.0/fa-brands-400.woff") format("woff"), url("../fonts/fontAwesome-5.2.0/fa-brands-400.ttf") format("truetype"), url("../fonts/fontAwesome-5.2.0/fa-brands-400.svg#fontawesome") format("svg");
}
@font-face {
font-family: 'Font Awesome 5 Regular';
font-style: normal;
font-weight: 400;
src: url("../fonts/fontAwesome-5.2.0/fa-regular-400.eot");
src: url("../fonts/fontAwesome-5.2.0/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fontAwesome-5.2.0/fa-regular-400.woff2") format("woff2"), url("../fonts/fontAwesome-5.2.0/fa-regular-400.woff") format("woff"), url("../fonts/fontAwesome-5.2.0/fa-regular-400.ttf") format("truetype"), url("../fonts/fontAwesome-5.2.0/fa-regular-400.svg#fontawesome") format("svg");
}
@font-face {
font-family: 'Font Awesome 5 Solid';
font-style: normal;
font-weight: 900;
src: url("../fonts/fontAwesome-5.2.0/fa-solid-900.eot");
src: url("../fonts/fontAwesome-5.2.0/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fontAwesome-5.2.0/fa-solid-900.woff2") format("woff2"), url("../fonts/fontAwesome-5.2.0/fa-solid-900.woff") format("woff"), url("../fonts/fontAwesome-5.2.0/fa-solid-900.ttf") format("truetype"), url("../fonts/fontAwesome-5.2.0/fa-solid-900.svg#fontawesome") format("svg");
}
.fab, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.fab {
font-family: 'Font Awesome 5 Brands';
}
.far {
font-family: 'Font Awesome 5 Regular';
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Solid';
font-weight: 900;
}
/*
* Icons
*/
.menu-icon:before {
font-family: "Font Awesome 5 Solid";
font-weight: 900;
content: "\f0c9";
}
.back-icon:before {
font-family: "Font Awesome 5 Solid";
font-weight: 900;
content: "\f52b";
}
.love-icon:before {
font-family: "Font Awesome 5 Regular";
content: "\f004";
}
.envelope-icon:before {
font-family: "Font Awesome 5 Regular";
content: "\f0e0";
}
.phone-icon:before {
font-family: "Font Awesome 5 Solid";
font-weight: 900;
content: "\f095";
}
.noSpam-icon:before {
font-family: "Font Awesome 4.7";
content: "\f1fa";
}
.handMade-icon:before {
font-family: "Font Awesome 5 Solid";
font-weight: 900;
content: "\f1b0";
}
.up-icon:before {
font-family: "Font Awesome 5 Solid";
font-weight: 900;
content: "\f106";
}
.down-icon:before {
font-family: "Font Awesome 5 Solid";
font-weight: 900;
content: "\f107";
}
.js-icon:before {
font-family: "Font Awesome 5 Brands";
content: "\f3b8";
}
.code-icon:before {
font-family: "Font Awesome 5 Solid";
font-weight: 900;
content: "\f121";
}
.github-icon:before {
font-family: "Font Awesome 5 Brands";
content: "\f09b";
}
/*
* General styling
*/
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.9em;
line-height: 1.4;
color: #333333;
}
a {
text-decoration: none;
color: #6666ff;
}
a:hover, a:focus {
text-decoration: underline;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
}
h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus, h4 a:hover, h4 a:focus, h5 a:hover, h5 a:focus, h6 a:hover, h6 a:focus {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
color: #666666;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-size: 60%;
}
h2 {
font-size: 2.6em;
}
@media (max-width: 816px) {
h2 {
font-size: 2.2em;
}
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.2em;
}
p {
max-width: 1152px;
}
figure {
margin: 0;
}
/*
* General layout
*/
html, body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.nav-container {
position: fixed;
top: 0;
left: 0;
z-index: 5000;
}
.main-container {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.footer-container {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.nav-container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
}
.nav-header {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.nav-menu-wrapper {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.nav-menu-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 816px) {
.nav-header {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.nav-menu-wrapper {
position: absolute;
top: 0.3em;
left: 0;
}
.nav-menu-wrapper {
display: block;
}
}
/*
* Navigation bar components
*/
.nav-container {
width: 100%;
padding: 0.3em;
border-bottom: 0.0625em solid rgba(102, 102, 102, 0.96);
margin: 0;
background: linear-gradient(to right, rgba(26, 26, 26, 0.96), rgba(64, 64, 64, 0.96) 30%, rgba(64, 64, 64, 0.96) 70%, rgba(26, 26, 26, 0.96));
}
.nav-container a:hover, .nav-container a:focus {
text-decoration: none;
}
.nav-container ul {
padding: 0;
margin: 0;
}
.nav-container li {
display: inline-block;
list-style-type: none;
}
.nav-header {
width: 14em;
margin: 0;
font-size: 1.0em;
}
.nav-item {
display: block;
min-width: 4em;
padding: 0.3375em 0.6375em;
border: 0.0625em solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
font-size: 1.0em;
text-align: center;
white-space: nowrap;
color: #e6e6e6;
background-color: rgba(255, 255, 255, 0.1);
transition: color 0.6s, background-color 0.6s;
}
.nav-item:hover {
color: white;
background-color: rgba(255, 255, 255, 0.3);
}
.is-header-item {
padding: 0.4em 0.7em;
border: 0;
background-color: transparent;
}
.is-header-item:hover {
background-color: transparent;
}
.is-menu-item {
display: none;
min-width: 0;
}
.is-active-item {
background-color: rgba(0, 150, 255, 0.7);
}
.is-active-item:hover {
background-color: #0096ff;
}
@media (max-width: 816px) {
.nav-menu-wrapper:hover {
width: 100%;
}
.is-menu-item {
display: inline-block;
padding: 0.3375em 0.6375em;
border: 0.0625em solid rgba(255, 255, 255, 0.1);
margin-left: 0.3em;
}
.nav-menu-wrapper:hover .is-menu-item {
background-color: rgba(255, 255, 255, 0.3);
}
.nav-menu-list {
display: none;
}
.nav-menu-list:first-of-type {
margin-top: 0.3em;
}
.nav-menu-wrapper:hover .nav-menu-list {
display: block;
background: linear-gradient(to right, rgba(26, 26, 26, 0.96), rgba(64, 64, 64, 0.96) 30%, rgba(64, 64, 64, 0.96) 70%, rgba(26, 26, 26, 0.96));
}
.nav-menu-list li {
display: list-item;
border-top: 0.0625em solid rgba(255, 255, 255, 0.1);
}
.nav-menu-list .nav-item {
padding: 0.4em 0.7em;
border: 0;
border-radius: 0;
text-align: left;
}
}
/*
* Content components
*/
.main-container {
padding: 2.5em 10% 0 10%;
}
.content {
padding-bottom: 2em;
}
.example-list {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: justify;
justify-content: space-between;
}
.example-list nav {
-ms-flex: 0 0 48%;
flex: 0 0 48%;
}
.example-list ul {
padding: 0;
margin: 0;
}
.example-list li {
list-style-type: none;
}
.example-list a {
display: block;
padding: 0.4em;
margin-bottom: 0.3em;
border-radius: 3px;
text-align: center;
white-space: nowrap;
color: #333333;
background-color: #f2f2f2;
transition: background-color 0.6s;
}
.example-list a:hover, .example-list a:focus, .example-list a.active-sketch {
text-decoration: none;
color: white;
background-color: #bfbfbf;
}
@media (max-width: 1440px) {
.main-container {
padding: 2.5em 5% 0 5%;
}
}
@media (max-width: 816px) {
.example-list {
display: block;
}
}
/*
* Sketch components
*/
.sketch-container {
position: absolute;
right: 0;
top: 0;
}
.sketch-container canvas {
display: block;
}
.sketch-gui {
position: absolute;
right: 0;
bottom: 20px;
}
.sketch-gui select {
color: #333333;
}
.sketch-stats {
position: absolute;
left: 0;
bottom: 0;
z-index: 10000;
cursor: pointer;
opacity: 0.9;
}
/*
* Footer components
*/
.footer-container {
padding: 0 10%;
}
.footer-content {
border-top: 1px dotted #cccccc;
color: #666666;
}
.separator {
padding: 0 0.5em;
}
@media (max-width: 1440px) {
.footer-container {
padding: 0 5%;
}
}
================================================
FILE: WebContent/cursor-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 2D">
<meta name="description" content="cursor shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>cursor shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-evolve.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-filters.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-cursor.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the varyings
v_uv = uv;
// Vertex shader output
gl_Position = vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Texture uniforms
uniform sampler2D u_texture;
// Texture varyings
varying vec2 v_uv;
/*
* Returns a value between 1 and 0 that indicates if the pixel is inside the circle
*/
float circle(vec2 pixel, vec2 center, float radius) {
return 1.0 - smoothstep(radius - 1.0, radius + 1.0, length(pixel - center));
}
/*
* The main program
*/
void main() {
// Get the pixel color
vec3 pixel_color = texture2D(u_texture, v_uv).rgb;
// Draw a circle at the mouse position
float circle_radius = 50.0;
vec3 circle_color = vec3(0.5, 0.5, 0.8) + vec3(0.3 * cos(u_time), 0.3 * sin(1.3 *u_time), 0.2 * cos(2.7 *u_time));
float mix_factor = 0.8 * circle(gl_FragCoord.xy, u_mouse, circle_radius);
pixel_color = mix(pixel_color, circle_color, mix_factor);
// Fragment shader output
gl_FragColor = vec4(pixel_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-evolve.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/cuts-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, postprocessin">
<meta name="description" content="cuts shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>cuts shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/CopyShader.js"></script>
<script type="text/javascript" src="/js/libs/EffectComposer.js"></script>
<script type="text/javascript" src="/js/libs/RenderPass.js"></script>
<script type="text/javascript" src="/js/libs/ShaderPass.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-postprocessing.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-filters.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-cuts.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the varyings
v_uv = uv;
// Vertex shader output
gl_Position = vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Texture uniforms
uniform sampler2D u_texture;
// Texture varyings
varying vec2 v_uv;
/*
* Returns a rotation matrix for the given angle
*/
mat2 rotate(float angle) {
return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
}
/*
* The main program
*/
void main() {
// Change the cuts pixel size as a function of the mouse relative position
float cuts_size = 150.0 * (1.1 - u_mouse.x / u_resolution.x);
// Calculate the cuts offset
float angle = 0.4 * u_time;
vec2 offset = 30.0 * sin(angle) * vec2(cos(angle), sin(angle));
// Change the offset direction between cuts
vec2 rotated_pos = rotate(angle) * (gl_FragCoord.xy - 0.5 * u_resolution) + 0.5 * u_resolution;
offset *= 2.0 * floor(mod(rotated_pos.y / cuts_size, 2.0)) - 1.0;
// Fragment shader output
gl_FragColor = texture2D(u_texture, v_uv + offset / u_resolution);
}
</script>
<script type="text/javascript" src="/js/shader-example-postprocessing.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/debug-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 3D, simulation">
<meta name="description" content="debug shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>debug shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
<script type="text/javascript" src="/js/libs/GPUComputationRenderer.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-debug.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/frag-debug-pos.glsl" class="nav-item">Position shader</a></li>
<li><a href="/shaders/frag-debug-vel.glsl" class="nav-item">Velocity shader</a></li>
<li><a href="/shaders/vert-debug.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-debug.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-fragment" id="positionShader">
#define GLSLIFY 1
void main() {
vec2 uv = gl_FragCoord.xy / resolution;
vec3 position = texture2D(u_positionTexture, uv).xyz;
vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
gl_FragColor = vec4(position + velocity, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="velocityShader">
#define GLSLIFY 1
void main() {
vec2 uv = gl_FragCoord.xy / resolution;
vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
gl_FragColor = vec4(velocity, 1.0);
}
</script>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
attribute float a_index;
uniform float u_width;
uniform float u_height;
uniform sampler2D u_positionTexture;
void main() {
vec2 uv = vec2((mod(a_index, u_width) + 0.5) / u_width, (floor(a_index / u_width) + 0.5) / u_height);
gl_PointSize = 2.0;
gl_Position = projectionMatrix * modelViewMatrix * texture2D(u_positionTexture, uv);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
void main() {
gl_FragColor = vec4(vec3(1.0), 1);
}
</script>
<script type="text/javascript" src="/js/shader-example-debug.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/deform-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 3D">
<meta name="description" content="deform shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>deform shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-3d.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-deform.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-normals.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Common varyings
varying vec3 v_position;
varying vec3 v_normal;
/*
* The main program
*/
void main() {
// Calculate the new vertex position to simulate a wave effect
float effect_intensity = 2.0 * u_mouse.x / u_resolution.x;
vec3 new_position = position + effect_intensity * (0.5 + 0.5 * cos(position.x + 4.0 * u_time)) * normal;
// Calculate the modelview position
vec4 mv_position = modelViewMatrix * vec4(new_position, 1.0);
// Save the varyings
v_position = mv_position.xyz;
v_normal = normalize(normalMatrix * normal);
// Vertex shader output
gl_Position = projectionMatrix * mv_position;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Common varyings
varying vec3 v_position;
varying vec3 v_normal;
/*
* Calculates the normal vector at the given position
*
* Uses this fix for some mobiles:
* https://stackoverflow.com/questions/20272272/standard-derivatives-from-fragment-shader-dfdx-dfdy-dont-run-correctly-in-a
*/
vec3 calculateNormal(vec3 position) {
vec3 fdx = vec3(dFdx(position.x), dFdx(position.y), dFdx(position.z));
vec3 fdy = vec3(dFdy(position.x), dFdy(position.y), dFdy(position.z));
vec3 normal = normalize(cross(fdx, fdy));
if (!gl_FrontFacing) {
normal = -normal;
}
return normal;
}
/*
* Calculates the diffuse factor produced by the light illumination
*/
float diffuseFactor(vec3 normal, vec3 light_direction) {
float df = dot(normalize(normal), normalize(light_direction));
if (gl_FrontFacing) {
df = -df;
}
return max(0.0, df);
}
/*
* The main program
*/
void main() {
// Calculate the new normal vector
vec3 new_normal = calculateNormal(v_position);
// Use the mouse position to define the light direction
float min_resolution = min(u_resolution.x, u_resolution.y);
vec3 light_direction = -vec3((u_mouse - 0.5 * u_resolution) / min_resolution, 0.25);
// Set the surface color
vec3 surface_color = vec3(1.0);
// Apply the light diffusion factor
surface_color *= diffuseFactor(new_normal, light_direction);
// Fragment shader output
gl_FragColor = vec4(surface_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-3d.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/dla-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 3D, simulation">
<meta name="description" content="dla shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>dla shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
<script type="text/javascript" src="/js/libs/GPUComputationRenderer.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-dla.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/frag-dla-pos.glsl" class="nav-item">Position shader</a></li>
<li><a href="/shaders/frag-dla-vel.glsl" class="nav-item">Velocity shader</a></li>
<li><a href="/shaders/vert-dla.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-dla.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-fragment" id="positionShader">
#define GLSLIFY 1
/*
* Random number generator with a vec2 seed
*
* Credits:
* http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0
* https://github.com/mattdesl/glsl-random
*/
highp float random2d(vec2 co) {
highp float a = 12.9898;
highp float b = 78.233;
highp float c = 43758.5453;
highp float dt = dot(co.xy, vec2(a, b));
highp float sn = mod(dt, 3.14);
return fract(sin(sn) * c);
}
// Simulation uniforms
uniform float u_minDistance;
uniform float u_maxDistance;
uniform float u_time;
// Simulation constants
const float width = resolution.x;
const float height = resolution.y;
const float nParticles = width * height;
/*
* The main program
*/
void main() {
// Get the particle texture position
vec2 uv = gl_FragCoord.xy / resolution;
// Get the particle current position
vec4 position = texture2D(u_positionTexture, uv);
// Update the particle position if it has not been aggregated
if (position.w > 0.0) {
// Move the particle to a new random position
float ang = 2.0 * 3.141593 * random2d(123.456 * position.xy + u_time);
position.xy += 0.9 * u_minDistance * vec2(cos(ang), sin(ang));
// Loop over all the particles in the simulation
for (float i = 0.0; i < nParticles; i++) {
// Get the particle position and velocity
vec2 particleUv = vec2(mod(i, width) + 0.5, floor(i / width) + 0.5) / resolution;
vec4 particlePosition = texture2D(u_positionTexture, particleUv);
// Check if it's an aggregated particle
if (position.w > 0.0 && particlePosition.w < 0.0) {
// Calculate the distance between the two particles
float distance = length(particlePosition.xy - position.xy);
// Set the particle as aggregated if the distance is small
// enough and we are not comparing the particle with itself
if (distance != 0.0 && distance < u_minDistance) {
position.w = -1.0;
position.xy = particlePosition.xy + u_minDistance * (position.xy - particlePosition.xy) / distance;
break;
}
}
}
// Make sure that the particle distance to the center is smaller than
// the maximum allowed distance
float distanceToCenter = length(position.xy);
if (distanceToCenter > u_maxDistance) {
position.xy -= 2.0 * u_maxDistance * position.xy / distanceToCenter;
}
}
// Return the updated particle position
gl_FragColor = position;
}
</script>
<script type="x-shader/x-fragment" id="velocityShader">
#define GLSLIFY 1
</script>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Particle index attribute
attribute float a_index;
// Simulation uniforms
uniform float u_width;
uniform float u_height;
uniform float u_particleSize;
uniform sampler2D u_positionTexture;
// Varying with the aggregation information
varying float v_aggregation;
/*
* The main program
*/
void main() {
// Get the particle model view position
vec2 uv = vec2((mod(a_index, u_width) + 0.5) / u_width, (floor(a_index / u_width) + 0.5) / u_height);
vec4 position = texture2D(u_positionTexture, uv);
vec4 mvPosition = modelViewMatrix * vec4(position.xyz, 1.0);
// Pass the aggregation information to the fragment shader
v_aggregation = position.w;
// Vertex shader output
gl_PointSize = v_aggregation < 0.0 ? -u_particleSize / mvPosition.z : -0.5 * u_particleSize / mvPosition.z;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Texture with the particle profile
uniform sampler2D u_texture;
// Varying with the aggregation information
varying float v_aggregation;
/*
* The main program
*/
void main() {
// Use a different color for aggregated and non-aggregated particles
vec3 particleColor = v_aggregation < 0.0 ? vec3(1.0) : vec3(0.5);
// Fragment shader output
gl_FragColor = vec4(particleColor, texture2D(u_texture, gl_PointCoord).a);
}
</script>
<script type="text/javascript" src="/js/shader-example-dla.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/dots-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 3D">
<meta name="description" content="dots shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>dots shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-3d.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-3d.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-dots.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Common varyings
varying vec3 v_position;
varying vec3 v_normal;
/*
* The main program
*/
void main() {
// Save the varyings
v_position = position;
v_normal = normalize(normalMatrix * normal);
// Vertex shader output
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Common varyings
varying vec3 v_position;
varying vec3 v_normal;
/*
* Returns a value between 1 and 0 that indicates if the pixel is inside the circle
*/
float circle(vec2 pixel, vec2 center, float radius) {
return 1.0 - smoothstep(radius - 1.0, radius + 1.0, length(pixel - center));
}
/*
* Returns a rotation matrix for the given angle
*/
mat2 rotate(float angle) {
return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
}
/*
* Calculates the diffuse factor produced by the light illumination
*/
float diffuseFactor(vec3 normal, vec3 light_direction) {
float df = dot(normalize(normal), normalize(light_direction));
if (gl_FrontFacing) {
df = -df;
}
return max(0.0, df);
}
/*
* The main program
*/
void main() {
// Use the mouse position to define the light direction
float min_resolution = min(u_resolution.x, u_resolution.y);
vec3 light_direction = -vec3((u_mouse - 0.5 * u_resolution) / min_resolution, 0.5);
// Calculate the light diffusion factor
float df = diffuseFactor(v_normal, light_direction);
// Move the pixel coordinates origin to the center of the screen
vec2 pos = gl_FragCoord.xy - 0.5 * u_resolution;
// Rotate the coordinates 20 degrees
pos = rotate(radians(20.0)) * pos;
// Define the grid
float grid_step = 12.0;
vec2 grid_pos = mod(pos, grid_step);
// Calculate the surface color
float surface_color = 1.0;
surface_color -= circle(grid_pos, vec2(grid_step / 2.0), 0.8 * grid_step * pow(1.0 - df, 2.0));
surface_color = clamp(surface_color, 0.05, 1.0);
// Fragment shader output
gl_FragColor = vec4(vec3(surface_color), 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-3d.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/edge-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 2D">
<meta name="description" content="edge shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>edge shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-filters.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-filters.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-edge.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the varyings
v_uv = uv;
// Vertex shader output
gl_Position = vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Texture uniforms
uniform sampler2D u_texture;
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the pixel color based on the mouse position
vec3 pixel_color;
if (gl_FragCoord.x > u_mouse.x) {
// Apply the edge detection kernel
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(-1, -1) / u_resolution).rgb;
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(-1, 0) / u_resolution).rgb;
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(-1, 1) / u_resolution).rgb;
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(0, -1) / u_resolution).rgb;
pixel_color += 8.0 * texture2D(u_texture, v_uv + vec2(0, 0) / u_resolution).rgb;
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(0, 1) / u_resolution).rgb;
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(1, -1) / u_resolution).rgb;
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(1, 0) / u_resolution).rgb;
pixel_color += -1.0 * texture2D(u_texture, v_uv + vec2(1, 1) / u_resolution).rgb;
// Use the most extreme color value
float min_value = min(pixel_color.r, min(pixel_color.g, pixel_color.b));
float max_value = max(pixel_color.r, max(pixel_color.g, pixel_color.b));
if (abs(min_value) > abs(max_value)) {
pixel_color = vec3(min_value);
} else {
pixel_color = vec3(max_value);
}
// Rescale the pixel color using the mouse y position
float scale = 0.2 + 2.5 * u_mouse.y / u_resolution.y;
pixel_color = 0.5 + scale * pixel_color;
} else if (gl_FragCoord.x > u_mouse.x - 1.0) {
// Draw a line indicating the transition
pixel_color = vec3(0.0);
} else {
// Use the original image pixel color
pixel_color = texture2D(u_texture, v_uv).rgb;
}
// Fragment shader output
gl_FragColor = vec4(pixel_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-filters.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/fire-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 2D">
<meta name="description" content="fire shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>fire shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-evolve.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-filters.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-fire.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the varyings
v_uv = uv;
// Vertex shader output
gl_Position = vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Texture uniforms
uniform sampler2D u_texture;
// Texture varyings
varying vec2 v_uv;
/*
* GLSL textureless classic 2D noise "cnoise",
* with an RSL-style periodic variant "pnoise".
* Author: Stefan Gustavson (stefan.gustavson@liu.se)
* Version: 2011-08-22
*
* Many thanks to Ian McEwan of Ashima Arts for the
* ideas for permutation and gradient selection.
*
* Copyright (c) 2011 Stefan Gustavson. All rights reserved.
* Distributed under the MIT license. See LICENSE file.
* https://github.com/stegu/webgl-noise
*/
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x * 34.0) + 1.0) * x);
}
vec4 taylorInvSqrt(vec4 r) {
return 1.79284291400159 - 0.85373472095314 * r;
}
vec2 fade(vec2 t) {
return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}
float cnoise(vec2 P) {
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod289(Pi);
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0;
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x, gy.x);
vec2 g10 = vec2(gx.y, gy.y);
vec2 g01 = vec2(gx.z, gy.z);
vec2 g11 = vec2(gx.w, gy.w);
vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}
/*
* The main program
*/
void main() {
// Calculate the pixel color depending of the distance from the floor
vec3 pixel_color = vec3(0.0);
float floor = 2.0;
if (gl_FragCoord.y <= floor) {
// Use some 2D noise to simulate the fire change in position and time
pixel_color.rg = vec2(cnoise(vec2(0.01 * gl_FragCoord.x, -0.2 * u_time)));
} else {
// Get a smoothed value of the pixels bellow
vec2 delta = 1.0 / u_resolution;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(2.0 * delta.x, -delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(1.0 * delta.x, -delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(0.0 * delta.x, -delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(-1.0 * delta.x, -delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(-2.0 * delta.x, -delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(2.0 * delta.x, -2.0 * delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(1.0 * delta.x, -2.0 * delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(0.0 * delta.x, -2.0 * delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(-1.0 * delta.x, -2.0 * delta.y)).rgb;
pixel_color += 0.1 * texture2D(u_texture, v_uv + vec2(-2.0 * delta.x, -2.0 * delta.y)).rgb;
// Decrease the intensity with the distance to the floor
float fade_factor = 1.0 - smoothstep(0.0, u_resolution.x, (gl_FragCoord.y - floor) / 3.0);
pixel_color.r *= fade_factor;
pixel_color.g *= 0.99 * fade_factor;
pixel_color.b = 0.0;
}
// Fragment shader output
gl_FragColor = vec4(pixel_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-evolve.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/flare-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 2D">
<meta name="description" content="flare shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>flare shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-evolve.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/vert-filters.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-flare.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Texture varyings
varying vec2 v_uv;
/*
* The main program
*/
void main() {
// Calculate the varyings
v_uv = uv;
// Vertex shader output
gl_Position = vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;
// Texture uniforms
uniform sampler2D u_texture;
// Texture varyings
varying vec2 v_uv;
/*
* GLSL textureless classic 2D noise "cnoise",
* with an RSL-style periodic variant "pnoise".
* Author: Stefan Gustavson (stefan.gustavson@liu.se)
* Version: 2011-08-22
*
* Many thanks to Ian McEwan of Ashima Arts for the
* ideas for permutation and gradient selection.
*
* Copyright (c) 2011 Stefan Gustavson. All rights reserved.
* Distributed under the MIT license. See LICENSE file.
* https://github.com/stegu/webgl-noise
*/
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x * 34.0) + 1.0) * x);
}
vec4 taylorInvSqrt(vec4 r) {
return 1.79284291400159 - 0.85373472095314 * r;
}
vec2 fade(vec2 t) {
return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}
float cnoise(vec2 P) {
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod289(Pi);
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0;
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x, gy.x);
vec2 g10 = vec2(gx.y, gy.y);
vec2 g01 = vec2(gx.z, gy.z);
vec2 g11 = vec2(gx.w, gy.w);
vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}
/*
* The main program
*/
void main() {
// Set the star radius
float star_radius = 90.0;
// Get the pixel position relative to the screen center
vec2 position = gl_FragCoord.xy - 0.5 * u_resolution;
// Calculate the pixel distance from the center
float radial_distance = length(position);
// Calculate the star color
vec3 star_color = vec3(0.0);
if (radial_distance < star_radius) {
// Calculate the pixel polar angle
float angle = atan(position.y, position.x) + radians(180.0);
// Calculate the radial noise position
float r = 0.05 * (radial_distance - u_frame);
// Calculate the noise value
float noise_value = cnoise(vec2(r, 1.5 * angle));
// Smooth the noise discontinuity between 0 and 360 degrees
float smooth_step = radians(20.0);
float limit_angle = radians(360.0) - smooth_step;
if (angle > limit_angle) {
noise_value = mix(noise_value, cnoise(vec2(r, 0.0)), (angle - limit_angle) / smooth_step);
}
// The final star color is the combination of a radially constant
// declining intensity plus the noise
float f = pow(radial_distance / star_radius, 2.0);
star_color = vec3((1.0 - f) + f * (0.1 + 0.4 * u_mouse.x / u_resolution.x) * (0.5 + 0.5 * noise_value));
}
// Calculate the average color of the pixels that are radially bellow the
// current pixel
vec3 average_color = vec3(0.0);
float counter = 0.0;
for (float i = -2.0; i <= 2.0; i++) {
for (float j = -2.0; j <= 2.0; j++) {
// Get the pixel color at the offset position
vec2 offset = vec2(i, j);
vec3 color = texture2D(u_texture, v_uv + offset / u_resolution).rgb;
// Add the color to the average if the pixel is above the offset
// position and is not a pixel inside the star
if (radial_distance > length(position + offset) && radial_distance >= star_radius) {
average_color += color;
counter++;
}
}
}
if (counter > 0.0) {
average_color /= counter;
}
// Set the distance decrement factor for the average color
float decrement_factor = 0.1 * (u_resolution.y - u_mouse.y) / u_resolution.y;
// Fragment shader output
gl_FragColor = vec4(star_color + (1.0 - decrement_factor) * average_color, 1.0);
}
</script>
<script type="text/javascript" src="/js/shader-example-evolve.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/galaxies-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 3D, simulation">
<meta name="description" content="galaxies shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>galaxies shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
<script type="text/javascript" src="/js/libs/GPUComputationRenderer.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-galaxies.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/frag-galaxies-pos.glsl" class="nav-item">Position shader</a></li>
<li><a href="/shaders/frag-galaxies-vel.glsl" class="nav-item">Velocity shader</a></li>
<li><a href="/shaders/vert-sim.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-sim.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-fragment" id="positionShader">
#define GLSLIFY 1
// Simulation uniforms
uniform float u_dt;
/*
* The main program
*/
void main() {
// Get the particle texture position
vec2 uv = gl_FragCoord.xy / resolution;
// Get the particle current position and velocity
vec3 position = texture2D(u_positionTexture, uv).xyz;
vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
// Return the updated particle position
gl_FragColor = vec4(position + u_dt * velocity, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="velocityShader">
#define GLSLIFY 1
// Simulation uniforms
uniform float u_dt;
uniform float u_mass;
uniform float u_haloSize;
// Simulation constants
const float width = resolution.x;
const float height = resolution.y;
// Softening factor. This is required to avoid high acceleration values
// when two particles get too close
const float softening = 0.001;
/*
* The main program
*/
void main() {
// Get the particle texture position
vec2 uv = gl_FragCoord.xy / resolution;
// Get the particle current position and velocity
vec3 position = texture2D(u_positionTexture, uv).xyz;
vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
// Loop over all the particles and calculate the total gravitational force
vec3 totalForce = vec3(0.0);
for (float i = 0.0; i < nGalaxies; i++) {
// Get the position of the attracting particle
vec2 particleUv = vec2(mod(i, width) + 0.5, floor(i / width) + 0.5) / resolution;
vec3 particlePosition = texture2D(u_positionTexture, particleUv).xyz;
// Calculate the force direction
vec3 forceDirection = particlePosition - position;
// Calculate the particle distance
float distance = length(forceDirection);
// Move to the next particle if the distance is exactly zero, which
// indicates that we are comparing the particle with itself
if (distance == 0.0) {
continue;
}
// Add the particle gravitational force
float massAtPosition = u_mass * min(distance, u_haloSize) / u_haloSize;
totalForce += massAtPosition * (forceDirection / distance) / pow(distance + softening, 2.0);
}
// Return the updated particle velocity
gl_FragColor = vec4(velocity + u_dt * totalForce, 1.0);
}
</script>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Particle index attribute
attribute float a_index;
// Simulation uniforms
uniform float u_width;
uniform float u_height;
uniform float u_particleSize;
uniform sampler2D u_positionTexture;
/*
* The main program
*/
void main() {
// Get the particle model view position
vec2 uv = vec2((mod(a_index, u_width) + 0.5) / u_width, (floor(a_index / u_width) + 0.5) / u_height);
vec4 mvPosition = modelViewMatrix * texture2D(u_positionTexture, uv);
// Vertex shader output
gl_PointSize = -u_particleSize / mvPosition.z;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Texture with the particle profile
uniform sampler2D u_texture;
/*
* The main program
*/
void main() {
// Get the particle alpha value from the texture
float alpha = texture2D(u_texture, gl_PointCoord).a;
// Fragment shader output
gl_FragColor = vec4(vec3(1.0), alpha);
}
</script>
<script type="text/javascript" src="/js/shader-example-galaxies.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/gravity-example.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, example, 3D, simulation">
<meta name="description" content="gravity shader example">
<meta name="author" content="Javier Gracia Carpio">
<title>gravity shader example</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
<!-- JavaScript files -->
<script type="text/javascript" src="/js/libs/three.min.js"></script>
<script type="text/javascript" src="/js/libs/stats.min.js"></script>
<script type="text/javascript" src="/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="/js/libs/OrbitControls.js"></script>
<script type="text/javascript" src="/js/libs/GPUComputationRenderer.js"></script>
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
<li><a href="/index.html" class="nav-item">Back to list</a></li>
<li><a href="/js/shader-example-gravity.js" class="nav-item">JavaScript file</a></li>
<li><a href="/shaders/frag-grav-pos.glsl" class="nav-item">Position shader</a></li>
<li><a href="/shaders/frag-grav-vel.glsl" class="nav-item">Velocity shader</a></li>
<li><a href="/shaders/vert-sim.glsl" class="nav-item">Vertex shader</a></li>
<li><a href="/shaders/frag-sim.glsl" class="nav-item">Fragment shader</a></li>
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<div class="sketch-container" id="sketch-container">
<div class="sketch-gui" id="sketch-gui"></div>
<div class="sketch-stats" id="sketch-stats"></div>
</div>
<script type="x-shader/x-fragment" id="positionShader">
#define GLSLIFY 1
// Simulation uniforms
uniform float u_dt;
/*
* The main program
*/
void main() {
// Get the particle texture position
vec2 uv = gl_FragCoord.xy / resolution;
// Get the particle current position and velocity
vec3 position = texture2D(u_positionTexture, uv).xyz;
vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
// Return the updated particle position
gl_FragColor = vec4(position + u_dt * velocity, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="velocityShader">
#define GLSLIFY 1
// Simulation uniforms
uniform float u_dt;
// Simulation constants
const float width = resolution.x;
const float height = resolution.y;
const float nParticles = width * height;
// Softening factor. This is required to avoid high acceleration values
// when two particles get too close
const float softening = 0.1;
/*
* The main program
*/
void main() {
// Get the particle texture position
vec2 uv = gl_FragCoord.xy / resolution;
// Get the particle current position and velocity
vec3 position = texture2D(u_positionTexture, uv).xyz;
vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
// Loop over all the particles and calculate the total gravitational force
vec3 totalForce = vec3(0.0);
float forceScalingFactor = 1.0 / (2.0 * pow(nParticles, 1.5));
for (float i = 0.0; i < nParticles; i++) {
// Get the position of the attracting particle
vec2 particleUv = vec2(mod(i, width) + 0.5, floor(i / width) + 0.5) / resolution;
vec3 particlePosition = texture2D(u_positionTexture, particleUv).xyz;
// Calculate the force direction
vec3 forceDirection = particlePosition - position;
// Calculate the particle distance
float distance = length(forceDirection);
// Move to the next particle if the distance is exactly zero, which
// indicates that we are comparing the particle with itself
if (distance == 0.0) {
continue;
}
// Add the particle gravitational force
totalForce += forceScalingFactor * (forceDirection / distance) / pow(distance + softening, 2.0);
}
// Return the updated particle velocity
gl_FragColor = vec4(velocity + u_dt * totalForce, 1.0);
}
</script>
<script type="x-shader/x-vertex" id="vertexShader">
#define GLSLIFY 1
// Particle index attribute
attribute float a_index;
// Simulation uniforms
uniform float u_width;
uniform float u_height;
uniform float u_particleSize;
uniform sampler2D u_positionTexture;
/*
* The main program
*/
void main() {
// Get the particle model view position
vec2 uv = vec2((mod(a_index, u_width) + 0.5) / u_width, (floor(a_index / u_width) + 0.5) / u_height);
vec4 mvPosition = modelViewMatrix * texture2D(u_positionTexture, uv);
// Vertex shader output
gl_PointSize = -u_particleSize / mvPosition.z;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define GLSLIFY 1
// Texture with the particle profile
uniform sampler2D u_texture;
/*
* The main program
*/
void main() {
// Get the particle alpha value from the texture
float alpha = texture2D(u_texture, gl_PointCoord).a;
// Fragment shader output
gl_FragColor = vec4(vec3(1.0), alpha);
}
</script>
<script type="text/javascript" src="/js/shader-example-gravity.js"></script>
</article>
</main>
</body>
</html>
================================================
FILE: WebContent/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="WebGL, shader, three.js, javaScript, examples">
<meta name="description" content="WebGL shader examples">
<meta name="author" content="Javier Gracia Carpio">
<title>WebGL shader examples</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- CSS files -->
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<!-- Navigation bar -->
<header class="nav-container">
<h1 class="nav-header">
<a href="/index.html" class="nav-item is-header-item">WebGL-shaders</a>
</h1>
<nav class="nav-menu-wrapper">
<span class="nav-item is-menu-item menu-icon" onclick="return false;"></span>
<ul class="nav-menu-list">
</ul>
<ul class="nav-menu-list">
<li><a href="/about.html" class="nav-item">About</a></li>
<li><a href="https://github.com/jagracar/webgl-shader-examples" class="nav-item"><span class="github-icon"></span>
Github</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main class="main-container">
<article class="content">
<header>
<h2>
WebGL shader examples<br /> <small>by <a href="https://jagracar.com">Javier Gracia Carpio</a></small>
</h2>
</header>
<div class="example-list">
<nav>
<header>
<h3>2D examples:</h3>
</header>
<ul>
<li><a href="/random-example.html">Random pixels</a></li>
<li><a href="/noise-example.html">Classic 2D noise</a></li>
<li><a href="/rain-example.html">Rain drops</a></li>
<li><a href="/tile-example.html">Geometric tile</a></li>
</ul>
</nav>
<nav>
<header>
<h3>3D examples:</h3>
</header>
<ul>
<li><a href="/wave-example.html">Cosine wave</a></li>
<li><a href="/pencil-example.html">Pencil shading</a></li>
<li><a href="/dots-example.html">Dot shading</a></li>
<li><a href="/toon-example.html">Toon shading</a></li>
<li><a href="/stripes-example.html">Stripes</a></li>
</ul>
</nav>
<nav>
<header>
<h3>Image manipulation examples:</h3>
</header>
<ul>
<li><a href="/edge-example.html">Edge detection</a></li>
<li><a href="/blur-example.html">Gaussian blur</a></li>
<li><a href="/pixels-example.html">Pixelated</a></li>
<li><a href="/lens-example.html">Lens effect</a></li>
</ul>
</nav>
<nav>
<header>
<h3>Simulation examples:</h3>
</header>
<ul>
<li><a href="/gravity-example.html">Gravity</a></li>
<li><a href="/galaxies-example.html">Interacting galaxies</a></li>
<li><a href="/repulsion-example.html">Repulsion</a></li>
<li><a href="/stippling-example.html">Stippling</a></li>
<li><a href="/dla-example.html">Diffusion-limited aggregation</a></li>
</ul>
</nav>
<nav>
<header>
<h3>Post-processing examples:</h3>
</header>
<ul>
<li><a href="/badtv-example.html">Bad TV</a></li>
<li><a href="/pixelated-example.html">Pixelated</a></li>
<li><a href="/cuts-example.html">Cuts</a></li>
<li><a href="/rgb-example.html">RGB shift</a></li>
</ul>
</nav>
<nav>
<header>
<h3>Evolution examples:</h3>
</header>
<ul>
<li><a href="/fire-example.html">Fire</a></li>
<li><a href="/flare-example.html">Flaring star</a></li>
<li><a href="/cursor-example.html">Cursor draw</a></li>
<li><a href="/reaction-example.html">Reaction-diffusion</a></li>
<li><a href="/sort-example.html">Pixel sorting</a></li>
</ul>
</nav>
<nav>
<header>
<h3>Vertex manipulation examples:</h3>
</header>
<ul>
<li><a href="/deform-example.html">Deformation</a></li>
<li><a href="/attraction-example.html">Attraction</a></li>
<li><a href="/mountains-example.html">Infinite landscape</a></li>
<li><a href="/sphere-example.html">Alien sphere</a></li>
</ul>
</nav>
</div>
</article>
</main>
<!-- Footer -->
<footer class="footer-container">
<div class="footer-content">
<p>
Hand made in Munich. <span class="separator">///</span> Unless otherwise stated, all the content in this site is
licensed under a Creative Commons Attribution-ShareAlike <a href="https://creativecommons.org/licenses/by-sa/4.0/">license</a>.
</p>
</div>
</footer>
</body>
</html>
================================================
FILE: WebContent/js/libs/CopyShader.js
================================================
/**
* @author alteredq / http://alteredqualia.com/
*
* Full-screen textured quad shader
*/
THREE.CopyShader = {
uniforms: {
"tDiffuse": { value: null },
"opacity": { value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform float opacity;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"gl_FragColor = opacity * texel;",
"}"
].join( "\n" )
};
================================================
FILE: WebContent/js/libs/EffectComposer.js
================================================
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.EffectComposer = function ( renderer, renderTarget ) {
this.renderer = renderer;
if ( renderTarget === undefined ) {
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false
};
var size = renderer.getDrawingBufferSize();
renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
renderTarget.texture.name = 'EffectComposer.rt1';
}
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.renderTarget2.texture.name = 'EffectComposer.rt2';
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
this.passes = [];
// dependencies
if ( THREE.CopyShader === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );
}
if ( THREE.ShaderPass === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );
}
this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
};
Object.assign( THREE.EffectComposer.prototype, {
swapBuffers: function () {
var tmp = this.readBuffer;
this.readBuffer = this.writeBuffer;
this.writeBuffer = tmp;
},
addPass: function ( pass ) {
this.passes.push( pass );
var size = this.renderer.getDrawingBufferSize();
pass.setSize( size.width, size.height );
},
insertPass: function ( pass, index ) {
this.passes.splice( index, 0, pass );
},
render: function ( delta ) {
var maskActive = false;
var pass, i, il = this.passes.length;
for ( i = 0; i < il; i ++ ) {
pass = this.passes[ i ];
if ( pass.enabled === false ) continue;
pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
if ( pass.needsSwap ) {
if ( maskActive ) {
var context = this.renderer.context;
context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
context.stencilFunc( context.EQUAL, 1, 0xffffffff );
}
this.swapBuffers();
}
if ( THREE.MaskPass !== undefined ) {
if ( pass instanceof THREE.MaskPass ) {
maskActive = true;
} else if ( pass instanceof THREE.ClearMaskPass ) {
maskActive = false;
}
}
}
},
reset: function ( renderTarget ) {
if ( renderTarget === undefined ) {
var size = this.renderer.getDrawingBufferSize();
renderTarget = this.renderTarget1.clone();
renderTarget.setSize( size.width, size.height );
}
this.renderTarget1.dispose();
this.renderTarget2.dispose();
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
},
setSize: function ( width, height ) {
this.renderTarget1.setSize( width, height );
this.renderTarget2.setSize( width, height );
for ( var i = 0; i < this.passes.length; i ++ ) {
this.passes[ i ].setSize( width, height );
}
}
} );
THREE.Pass = function () {
// if set to true, the pass is processed by the composer
this.enabled = true;
// if set to true, the pass indicates to swap read and write buffer after rendering
this.needsSwap = true;
// if set to true, the pass clears its buffer before rendering
this.clear = false;
// if set to true, the result of the pass is rendered to screen
this.renderToScreen = false;
};
Object.assign( THREE.Pass.prototype, {
setSize: function ( width, height ) {},
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
}
} );
================================================
FILE: WebContent/js/libs/GPUComputationRenderer.js
================================================
/**
* @author yomboprime https://github.com/yomboprime
*
* GPUComputationRenderer, based on SimulationRenderer by zz85
*
* The GPUComputationRenderer uses the concept of variables. These variables are RGBA float textures that hold 4 floats
* for each compute element (texel)
*
* Each variable has a fragment shader that defines the computation made to obtain the variable in question.
* You can use as many variables you need, and make dependencies so you can use textures of other variables in the shader
* (the sampler uniforms are added automatically) Most of the variables will need themselves as dependency.
*
* The renderer has actually two render targets per variable, to make ping-pong. Textures from the current frame are used
* as inputs to render the textures of the next frame.
*
* The render targets of the variables can be used as input textures for your visualization shaders.
*
* Variable names should be valid identifiers and should not collide with THREE GLSL used identifiers.
* a common approach could be to use 'texture' prefixing the variable name; i.e texturePosition, textureVelocity...
*
* The size of the computation (sizeX * sizeY) is defined as 'resolution' automatically in the shader. For example:
* #DEFINE resolution vec2( 1024.0, 1024.0 )
*
* -------------
*
* Basic use:
*
* // Initialization...
*
* // Create computation renderer
* var gpuCompute = new GPUComputationRenderer( 1024, 1024, renderer );
*
* // Create initial state float textures
* var pos0 = gpuCompute.createTexture();
* var vel0 = gpuCompute.createTexture();
* // and fill in here the texture data...
*
* // Add texture variables
* var velVar = gpuCompute.addVariable( "textureVelocity", fragmentShaderVel, pos0 );
* var posVar = gpuCompute.addVariable( "texturePosition", fragmentShaderPos, vel0 );
*
* // Add variable dependencies
* gpuCompute.setVariableDependencies( velVar, [ velVar, posVar ] );
* gpuCompute.setVariableDependencies( posVar, [ velVar, posVar ] );
*
* // Add custom uniforms
* velVar.material.uniforms.time = { value: 0.0 };
*
* // Check for completeness
* var error = gpuCompute.init();
* if ( error !== null ) {
* console.error( error );
* }
*
*
* // In each frame...
*
* // Compute!
* gpuCompute.compute();
*
* // Update texture uniforms in your visualization materials with the gpu renderer output
* myMaterial.uniforms.myTexture.value = gpuCompute.getCurrentRenderTarget( posVar ).texture;
*
* // Do your rendering
* renderer.render( myScene, myCamera );
*
* -------------
*
* Also, you can use utility functions to create ShaderMaterial and perform computations (rendering between textures)
* Note that the shaders can have multiple input textures.
*
* var myFilter1 = gpuCompute.createShaderMaterial( myFilterFragmentShader1, { theTexture: { value: null } } );
* var myFilter2 = gpuCompute.createShaderMaterial( myFilterFragmentShader2, { theTexture: { value: null } } );
*
* var inputTexture = gpuCompute.createTexture();
*
* // Fill in here inputTexture...
*
* myFilter1.uniforms.theTexture.value = inputTexture;
*
* var myRenderTarget = gpuCompute.createRenderTarget();
* myFilter2.uniforms.theTexture.value = myRenderTarget.texture;
*
* var outputRenderTarget = gpuCompute.createRenderTarget();
*
* // Now use the output texture where you want:
* myMaterial.uniforms.map.value = outputRenderTarget.texture;
*
* // And compute each frame, before rendering to screen:
* gpuCompute.doRenderTarget( myFilter1, myRenderTarget );
* gpuCompute.doRenderTarget( myFilter2, outputRenderTarget );
*
*
*
* @param {int} sizeX Computation problem size is always 2d: sizeX * sizeY elements.
* @param {int} sizeY Computation problem size is always 2d: sizeX * sizeY elements.
* @param {WebGLRenderer} renderer The renderer
*/
function GPUComputationRenderer( sizeX, sizeY, renderer ) {
this.variables = [];
this.currentTextureIndex = 0;
var scene = new THREE.Scene();
var camera = new THREE.Camera();
camera.position.z = 1;
var passThruUniforms = {
texture: { value: null }
};
var passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms );
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), passThruShader );
scene.add( mesh );
this.addVariable = function( variableName, computeFragmentShader, initialValueTexture ) {
var material = this.createShaderMaterial( computeFragmentShader );
var variable = {
name: variableName,
initialValueTexture: initialValueTexture,
material: material,
dependencies: null,
renderTargets: [],
wrapS: null,
wrapT: null,
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter
};
this.variables.push( variable );
return variable;
};
this.setVariableDependencies = function( variable, dependencies ) {
variable.dependencies = dependencies;
};
this.init = function() {
if ( ! renderer.extensions.get( "OES_texture_float" ) ) {
return "No OES_texture_float support for float textures.";
}
if ( renderer.capabilities.maxVertexTextures === 0 ) {
return "No support for vertex shader textures.";
}
for ( var i = 0; i < this.variables.length; i++ ) {
var variable = this.variables[ i ];
// Creates rendertargets and initialize them with input texture
variable.renderTargets[ 0 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
variable.renderTargets[ 1 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 0 ] );
this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 1 ] );
// Adds dependencies uniforms to the ShaderMaterial
var material = variable.material;
var uniforms = material.uniforms;
if ( variable.dependencies !== null ) {
for ( var d = 0; d < variable.dependencies.length; d++ ) {
var depVar = variable.dependencies[ d ];
if ( depVar.name !== variable.name ) {
// Checks if variable exists
var found = false;
for ( var j = 0; j < this.variables.length; j++ ) {
if ( depVar.name === this.variables[ j ].name ) {
found = true;
break;
}
}
if ( ! found ) {
return "Variable dependency not found. Variable=" + variable.name + ", dependency=" + depVar.name;
}
}
uniforms[ depVar.name ] = { value: null };
material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;
}
}
}
this.currentTextureIndex = 0;
return null;
};
this.compute = function() {
var currentTextureIndex = this.currentTextureIndex;
var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;
for ( var i = 0, il = this.variables.length; i < il; i++ ) {
var variable = this.variables[ i ];
// Sets texture dependencies uniforms
if ( variable.dependencies !== null ) {
var uniforms = variable.material.uniforms;
for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {
var depVar = variable.dependencies[ d ];
uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture;
}
}
// Performs the computation for this variable
this.doRenderTarget( variable.material, variable.renderTargets[ nextTextureIndex ] );
}
this.currentTextureIndex = nextTextureIndex;
};
this.getCurrentRenderTarget = function( variable ) {
return variable.renderTargets[ this.currentTextureIndex ];
};
this.getAlternateRenderTarget = function( variable ) {
return variable.renderTargets[ this.currentTextureIndex === 0 ? 1 : 0 ];
};
function addResolutionDefine( materialShader ) {
materialShader.defines.resolution = 'vec2( ' + sizeX.toFixed( 1 ) + ', ' + sizeY.toFixed( 1 ) + " )";
}
this.addResolutionDefine = addResolutionDefine;
// The following functions can be used to compute things manually
function createShaderMaterial( computeFragmentShader, uniforms ) {
uniforms = uniforms || {};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: getPassThroughVertexShader(),
fragmentShader: computeFragmentShader
} );
addResolutionDefine( material );
return material;
}
this.createShaderMaterial = createShaderMaterial;
this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
sizeXTexture = sizeXTexture || sizeX;
sizeYTexture = sizeYTexture || sizeY;
wrapS = wrapS || THREE.ClampToEdgeWrapping;
wrapT = wrapT || THREE.ClampToEdgeWrapping;
minFilter = minFilter || THREE.NearestFilter;
magFilter = magFilter || THREE.NearestFilter;
var renderTarget = new THREE.WebGLRenderTarget( sizeXTexture, sizeYTexture, {
wrapS: wrapS,
wrapT: wrapT,
minFilter: minFilter,
magFilter: magFilter,
format: THREE.RGBAFormat,
type: ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) ? THREE.HalfFloatType : THREE.FloatType,
stencilBuffer: false,
depthBuffer: false
} );
return renderTarget;
};
this.createTexture = function() {
var a = new Float32Array( sizeX * sizeY * 4 );
var texture = new THREE.DataTexture( a, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType );
texture.needsUpdate = true;
return texture;
};
this.renderTexture = function( input, output ) {
// Takes a texture, and render out in rendertarget
// input = Texture
// output = RenderTarget
passThruUniforms.texture.value = input;
this.doRenderTarget( passThruShader, output);
passThruUniforms.texture.value = null;
};
this.doRenderTarget = function( material, output ) {
mesh.material = material;
renderer.render( scene, camera, output );
mesh.material = passThruShader;
};
// Shaders
function getPassThroughVertexShader() {
return "void main() {\n" +
"\n" +
" gl_Position = vec4( position, 1.0 );\n" +
"\n" +
"}\n";
}
function getPassThroughFragmentShader() {
return "uniform sampler2D texture;\n" +
"\n" +
"void main() {\n" +
"\n" +
" vec2 uv = gl_FragCoord.xy / resolution.xy;\n" +
"\n" +
" gl_FragColor = texture2D( texture, uv );\n" +
"\n" +
"}\n";
}
}
================================================
FILE: WebContent/js/libs/MaskPass.js
================================================
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.MaskPass = function ( scene, camera ) {
THREE.Pass.call( this );
this.scene = scene;
this.camera = camera;
this.clear = true;
this.needsSwap = false;
this.inverse = false;
};
THREE.MaskPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.MaskPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
var context = renderer.context;
var state = renderer.state;
// don't update color or depth
state.buffers.color.setMask( false );
state.buffers.depth.setMask( false );
// lock buffers
state.buffers.color.setLocked( true );
state.buffers.depth.setLocked( true );
// set up stencil
var writeValue, clearValue;
if ( this.inverse ) {
writeValue = 0;
clearValue = 1;
} else {
writeValue = 1;
clearValue = 0;
}
state.buffers.stencil.setTest( true );
state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
state.buffers.stencil.setClear( clearValue );
// draw into the stencil buffer
renderer.render( this.scene, this.camera, readBuffer, this.clear );
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
// unlock color and depth buffer for subsequent rendering
state.buffers.color.setLocked( false );
state.buffers.depth.setLocked( false );
// only render where stencil is set to 1
state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
}
} );
THREE.ClearMaskPass = function () {
THREE.Pass.call( this );
this.needsSwap = false;
};
THREE.ClearMaskPass.prototype = Object.create( THREE.Pass.prototype );
Object.assign( THREE.ClearMaskPass.prototype, {
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
renderer.state.buffers.stencil.setTest( false );
}
} );
================================================
FILE: WebContent/js/libs/OrbitControls.js
================================================
/**
* @author qiao / https://github.com/qiao
* @author mrdoob / http://mrdoob.com
* @author alteredq / http://alteredqualia.com/
* @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com
*/
// This set of controls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
//
// Orbit - left mouse / touch: one-finger move
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
// Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
THREE.OrbitControls = function ( object, domElement ) {
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
this.enableDamping = false;
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
this.enablePan = true;
this.panSpeed = 1.0;
this.screenSpacePanning = false; // if true, pan in screen-space
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
this.enableKeys = true;
// The four arrow keys
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { LEFT: THREE.MOUSE.LEFT, MIDDLE: THREE.MOUSE.MIDDLE, RIGHT: THREE.MOUSE.RIGHT };
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = this.object.zoom;
//
// public methods
//
this.getPolarAngle = function () {
return spherical.phi;
};
this.getAzimuthalAngle = function () {
return spherical.theta;
};
this.saveState = function () {
scope.target0.copy( scope.target );
scope.position0.copy( scope.object.position );
scope.zoom0 = scope.object.zoom;
};
this.reset = function () {
scope.target.copy( scope.target0 );
scope.object.position.copy( scope.position0 );
scope.object.zoom = scope.zoom0;
scope.object.updateProjectionMatrix();
scope.dispatchEvent( changeEvent );
scope.update();
state = STATE.NONE;
};
// this method is exposed, but perhaps it would be better if we can make it private...
this.update = function () {
var offset = new THREE.Vector3();
// so camera.up is the orbit axis
var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
var quatInverse = quat.clone().inverse();
var lastPosition = new THREE.Vector3();
var lastQuaternion = new THREE.Quaternion();
return function update() {
var position = scope.object.position;
offset.copy( position ).sub( scope.target );
// rotate offset to "y-axis-is-up" space
offset.applyQuaternion( quat );
// angle from z-axis around y-axis
spherical.setFromVector3( offset );
if ( scope.autoRotate && state === STATE.NONE ) {
rotateLeft( getAutoRotationAngle() );
}
spherical.theta += sphericalDelta.theta;
spherical.phi += sphericalDelta.phi;
// restrict theta to be between desired limits
spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) );
// restrict phi to be between desired limits
spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
spherical.makeSafe();
spherical.radius *= scale;
// restrict radius to be between desired limits
spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
// move target to panned location
scope.target.add( panOffset );
offset.setFromSpherical( spherical );
// rotate offset back to "camera-up-vector-is-up" space
offset.applyQuaternion( quatInverse );
position.copy( scope.target ).add( offset );
scope.object.lookAt( scope.target );
if ( scope.enableDamping === true ) {
sphericalDelta.theta *= ( 1 - scope.dampingFactor );
sphericalDelta.phi *= ( 1 - scope.dampingFactor );
panOffset.multiplyScalar( 1 - scope.dampingFactor );
} else {
sphericalDelta.set( 0, 0, 0 );
panOffset.set( 0, 0, 0 );
}
scale = 1;
// update condition is:
// min(camera displacement, camera rotation in radians)^2 > EPS
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
if ( zoomChanged ||
lastPosition.distanceToSquared( scope.object.position ) > EPS ||
8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
scope.dispatchEvent( changeEvent );
lastPosition.copy( scope.object.position );
lastQuaternion.copy( scope.object.quaternion );
zoomChanged = false;
return true;
}
return false;
};
}();
this.dispose = function () {
scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
scope.domElement.removeEventListener( 'wheel', onMouseWheel, false );
scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
window.removeEventListener( 'keydown', onKeyDown, false );
//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
};
//
// internals
//
var scope = this;
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY_PAN: 4 };
var state = STATE.NONE;
var EPS = 0.000001;
// current position in spherical coordinates
var spherical = new THREE.Spherical();
var sphericalDelta = new THREE.Spherical();
var scale = 1;
var panOffset = new THREE.Vector3();
var zoomChanged = false;
var rotateStart = new THREE.Vector2();
var rotateEnd = new THREE.Vector2();
var rotateDelta = new THREE.Vector2();
var panStart = new THREE.Vector2();
var panEnd = new THREE.Vector2();
var panDelta = new THREE.Vector2();
var dollyStart = new THREE.Vector2();
var dollyEnd = new THREE.Vector2();
var dollyDelta = new THREE.Vector2();
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
}
function getZoomScale() {
return Math.pow( 0.95, scope.zoomSpeed );
}
function rotateLeft( angle ) {
sphericalDelta.theta -= angle;
}
function rotateUp( angle ) {
sphericalDelta.phi -= angle;
}
var panLeft = function () {
var v = new THREE.Vector3();
return function panLeft( distance, objectMatrix ) {
v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
v.multiplyScalar( - distance );
panOffset.add( v );
};
}();
var panUp = function () {
var v = new THREE.Vector3();
return function panUp( distance, objectMatrix ) {
if ( scope.screenSpacePanning === true ) {
v.setFromMatrixColumn( objectMatrix, 1 );
} else {
v.setFromMatrixColumn( objectMatrix, 0 );
v.crossVectors( scope.object.up, v );
}
v.multiplyScalar( distance );
panOffset.add( v );
};
}();
// deltaX and deltaY are in pixels; right and down are positive
var pan = function () {
var offset = new THREE.Vector3();
return function pan( deltaX, deltaY ) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
if ( scope.object.isPerspectiveCamera ) {
// perspective
var position = scope.object.position;
offset.copy( position ).sub( scope.target );
var targetDistance = offset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
// we use only clientHeight here so aspect ratio does not distort speed
panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
} else if ( scope.object.isOrthographicCamera ) {
// orthographic
panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
} else {
// camera neither orthographic nor perspective
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
scope.enablePan = false;
}
};
}();
function dollyIn( dollyScale ) {
if ( scope.object.isPerspectiveCamera ) {
scale /= dollyScale;
} else if ( scope.object.isOrthographicCamera ) {
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
scope.object.updateProjectionMatrix();
zoomChanged = true;
} else {
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
scope.enableZoom = false;
}
}
function dollyOut( dollyScale ) {
if ( scope.object.isPerspectiveCamera ) {
scale *= dollyScale;
} else if ( scope.object.isOrthographicCamera ) {
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
scope.object.updateProjectionMatrix();
zoomChanged = true;
} else {
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
scope.enableZoom = false;
}
}
//
// event callbacks - update the object state
//
function handleMouseDownRotate( event ) {
//console.log( 'handleMouseDownRotate' );
rotateStart.set( event.clientX, event.clientY );
}
function handleMouseDownDolly( event ) {
//console.log( 'handleMouseDownDolly' );
dollyStart.set( event.clientX, event.clientY );
}
function handleMouseDownPan( event ) {
//console.log( 'handleMouseDownPan' );
panStart.set( event.clientX, event.clientY );
}
function handleMouseMoveRotate( event ) {
//console.log( 'handleMouseMoveRotate' );
rotateEnd.set( event.clientX, event.clientY );
rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
rotateStart.copy( rotateEnd );
scope.update();
}
function handleMouseMoveDolly( event ) {
//console.log( 'handleMouseMoveDolly' );
dollyEnd.set( event.clientX, event.clientY );
dollyDelta.subVectors( dollyEnd, dollyStart );
if ( dollyDelta.y > 0 ) {
dollyIn( getZoomScale() );
} else if ( dollyDelta.y < 0 ) {
dollyOut( getZoomScale() );
}
dollyStart.copy( dollyEnd );
scope.update();
}
function handleMouseMovePan( event ) {
//console.log( 'handleMouseMovePan' );
panEnd.set( event.clientX, event.clientY );
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
scope.update();
}
function handleMouseUp( event ) {
// console.log( 'handleMouseUp' );
}
function handleMouseWheel( event ) {
// console.log( 'handleMouseWheel' );
if ( event.deltaY < 0 ) {
dollyOut( getZoomScale() );
} else if ( event.deltaY > 0 ) {
dollyIn( getZoomScale() );
}
scope.update();
}
function handleKeyDown( event ) {
//console.log( 'handleKeyDown' );
switch ( event.keyCode ) {
case scope.keys.UP:
pan( 0, scope.keyPanSpeed );
scope.update();
break;
case scope.keys.BOTTOM:
pan( 0, - scope.keyPanSpeed );
scope.update();
break;
case scope.keys.LEFT:
pan( scope.keyPanSpeed, 0 );
scope.update();
break;
case scope.keys.RIGHT:
pan( - scope.keyPanSpeed, 0 );
scope.update();
break;
}
}
function handleTouchStartRotate( event ) {
//console.log( 'handleTouchStartRotate' );
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
function handleTouchStartDollyPan( event ) {
//console.log( 'handleTouchStartDollyPan' );
if ( scope.enableZoom ) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt( dx * dx + dy * dy );
dollyStart.set( 0, distance );
}
if ( scope.enablePan ) {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
panStart.set( x, y );
}
}
function handleTouchMoveRotate( event ) {
//console.log( 'handleTouchMoveRotate' );
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
rotateStart.copy( rotateEnd );
scope.update();
}
function handleTouchMoveDollyPan( event ) {
//console.log( 'handleTouchMoveDollyPan' );
if ( scope.enableZoom ) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt( dx * dx + dy * dy );
dollyEnd.set( 0, distance );
dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
dollyIn( dollyDelta.y );
dollyStart.copy( dollyEnd );
}
if ( scope.enablePan ) {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
panEnd.set( x, y );
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
}
scope.update();
}
function handleTouchEnd( event ) {
//console.log( 'handleTouchEnd' );
}
//
// event handlers - FSM: listen for events and reset state
//
function onMouseDown( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
switch ( event.button ) {
case scope.mouseButtons.LEFT:
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
} else {
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
state = STATE.ROTATE;
}
break;
case scope.mouseButtons.MIDDLE:
if ( scope.enableZoom === false ) return;
handleMouseDownDolly( event );
state = STATE.DOLLY;
break;
case scope.mouseButtons.RIGHT:
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
break;
}
if ( state !== STATE.NONE ) {
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( startEvent );
}
}
function onMouseMove( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
switch ( state ) {
case STATE.ROTATE:
if ( scope.enableRotate === false ) return;
handleMouseMoveRotate( event );
break;
case STATE.DOLLY:
if ( scope.enableZoom === false ) return;
handleMouseMoveDolly( event );
break;
case STATE.PAN:
if ( scope.enablePan === false ) return;
handleMouseMovePan( event );
break;
}
}
function onMouseUp( event ) {
if ( scope.enabled === false ) return;
handleMouseUp( event );
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function onMouseWheel( event ) {
if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
event.preventDefault();
event.stopPropagation();
scope.dispatchEvent( startEvent );
handleMouseWheel( event );
scope.dispatchEvent( endEvent );
}
function onKeyDown( event ) {
if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
handleKeyDown( event );
}
function onTouchStart( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
if ( scope.enableRotate === false ) return;
handleTouchStartRotate( event );
state = STATE.TOUCH_ROTATE;
break;
case 2: // two-fingered touch: dolly-pan
if ( scope.enableZoom === false && scope.enablePan === false ) return;
handleTouchStartDollyPan( event );
state = STATE.TOUCH_DOLLY_PAN;
break;
default:
state = STATE.NONE;
}
if ( state !== STATE.NONE ) {
scope.dispatchEvent( startEvent );
}
}
function onTouchMove( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
if ( scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?
handleTouchMoveRotate( event );
break;
case 2: // two-fingered touch: dolly-pan
if ( scope.enableZoom === false && scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_DOLLY_PAN ) return; // is this needed?
handleTouchMoveDollyPan( event );
break;
default:
state = STATE.NONE;
}
}
function onTouchEnd( event ) {
if ( scope.enabled === false ) return;
handleTouchEnd( event );
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function onContextMenu( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
}
//
scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
window.addEventListener( 'keydown', onKeyDown, false );
// force an update at start
this.update();
};
THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
Object.defineProperties( THREE.OrbitControls.prototype, {
center: {
get: function () {
console.warn( 'THREE.OrbitControls: .center has been renamed to .target' );
return this.target;
}
},
// backward compatibility
noZoom: {
get: function () {
console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
return ! this.enableZoom;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
this.enableZoom = ! value;
}
},
noRotate: {
get: function () {
console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
return ! this.enableRotate;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
this.enableRotate = ! value;
}
},
noPan: {
get: function () {
console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
return ! this.enablePan;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
this.enablePan = ! value;
}
},
noKeys: {
get: function () {
console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
return ! this.enableKeys;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
this.enableKeys = ! value;
}
},
staticMoving: {
get: function () {
console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
return ! this.enableDamping;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
this.enableDamping = ! value;
}
},
dynamicDampingFactor: {
get: function () {
console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
return this.dampingFactor;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
this.dampingFactor = value;
}
}
} );
================================================
FILE: WebContent/js/libs/RenderPass.js
================================================
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
THREE.Pass.call( this );
this.scene = scene;
this.camera = camera;
this.overrideMaterial = overrideMaterial;
this.clearColor = clearColor;
this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
this.clear = true;
this.clearDepth = false;
this.needsSwap = false;
};
THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.RenderPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
var oldAutoClear = renderer.autoClear;
renderer.autoClear = false;
this.scene.overrideMaterial = this.overrideMaterial;
var oldClearColor, oldClearAlpha;
if ( this.clearColor ) {
oldClearColor = renderer.getClearColor().getHex();
oldClearAlpha = renderer.getClearAlpha();
renderer.setClearColor( this.clearColor, this.clearAlpha );
}
if ( this.clearDepth ) {
renderer.clearDepth();
}
renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );
if ( this.clearColor ) {
renderer.setClearColor( oldClearColor, oldClearAlpha );
}
this.scene.overrideMaterial = null;
renderer.autoClear = oldAutoClear;
}
} );
================================================
FILE: WebContent/js/libs/ShaderPass.js
================================================
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.ShaderPass = function ( shader, textureID ) {
THREE.Pass.call( this );
this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
if ( shader instanceof THREE.ShaderMaterial ) {
this.uniforms = shader.uniforms;
this.material = shader;
} else if ( shader ) {
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.material = new THREE.ShaderMaterial( {
defines: Object.assign( {}, shader.defines ),
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
}
this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
this.scene = new THREE.Scene();
this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.quad.frustumCulled = false; // Avoid getting clipped
this.scene.add( this.quad );
};
THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.ShaderPass,
render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {
if ( this.uniforms[ this.textureID ] ) {
this.uniforms[ this.textureID ].value = readBuffer.texture;
}
this.quad.material = this.material;
if ( this.renderToScreen ) {
renderer.render( this.scene, this.camera );
} else {
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
}
}
} );
================================================
FILE: WebContent/js/libs/TrackballControls.js
================================================
/**
* @author Eberhard Graether / http://egraether.com/
* @author Mark Lundin / http://mark-lundin.com
* @author Simone Manini / http://daron1337.github.io
* @author Luca Antiga / http://lantiga.github.io
*/
THREE.TrackballControls = function ( object, domElement ) {
var _this = this;
var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
// API
this.enabled = true;
this.screen = { left: 0, top: 0, width: 0, height: 0 };
this.rotateSpeed = 1.0;
this.zoomSpeed = 1.2;
this.panSpeed = 0.3;
this.noRotate = false;
this.noZoom = false;
this.noPan = false;
this.staticMoving = false;
this.dynamicDampingFactor = 0.2;
this.minDistance = 0;
this.maxDistance = Infinity;
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
// internals
this.target = new THREE.Vector3();
var EPS = 0.000001;
var lastPosition = new THREE.Vector3();
var _state = STATE.NONE,
_prevState = STATE.NONE,
_eye = new THREE.Vector3(),
_movePrev = new THREE.Vector2(),
_moveCurr = new THREE.Vector2(),
_lastAxis = new THREE.Vector3(),
_lastAngle = 0,
_zoomStart = new THREE.Vector2(),
_zoomEnd = new THREE.Vector2(),
_touchZoomDistanceStart = 0,
_touchZoomDistanceEnd = 0,
_panStart = new THREE.Vector2(),
_panEnd = new THREE.Vector2();
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.up0 = this.object.up.clone();
// events
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
// methods
this.handleResize = function () {
if ( this.domElement === document ) {
this.screen.left = 0;
this.screen.top = 0;
this.screen.width = window.innerWidth;
this.screen.height = window.innerHeight;
} else {
var box = this.domElement.getBoundingClientRect();
// adjustments come from similar code in the jquery offset() function
var d = this.domElement.ownerDocument.documentElement;
this.screen.left = box.left + window.pageXOffset - d.clientLeft;
this.screen.top = box.top + window.pageYOffset - d.clientTop;
this.screen.width = box.width;
this.screen.height = box.height;
}
};
var getMouseOnScreen = ( function () {
var vector = new THREE.Vector2();
return function getMouseOnScreen( pageX, pageY ) {
vector.set(
( pageX - _this.screen.left ) / _this.screen.width,
( pageY - _this.screen.top ) / _this.screen.height
);
return vector;
};
}() );
var getMouseOnCircle = ( function () {
var vector = new THREE.Vector2();
return function getMouseOnCircle( pageX, pageY ) {
vector.set(
( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ),
( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional
);
return vector;
};
}() );
this.rotateCamera = ( function () {
var axis = new THREE.Vector3(),
quaternion = new THREE.Quaternion(),
eyeDirection = new THREE.Vector3(),
objectUpDirection = new THREE.Vector3(),
objectSidewaysDirection = new THREE.Vector3(),
moveDirection = new THREE.Vector3(),
angle;
return function rotateCamera() {
moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
angle = moveDirection.length();
if ( angle ) {
_eye.copy( _this.object.position ).sub( _this.target );
eyeDirection.copy( _eye ).normalize();
objectUpDirection.copy( _this.object.up ).normalize();
objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();
objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );
moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );
axis.crossVectors( moveDirection, _eye ).normalize();
angle *= _this.rotateSpeed;
quaternion.setFromAxisAngle( axis, angle );
_eye.applyQuaternion( quaternion );
_this.object.up.applyQuaternion( quaternion );
_lastAxis.copy( axis );
_lastAngle = angle;
} else if ( ! _this.staticMoving && _lastAngle ) {
_lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor );
_eye.copy( _this.object.position ).sub( _this.target );
quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
_eye.applyQuaternion( quaternion );
_this.object.up.applyQuaternion( quaternion );
}
_movePrev.copy( _moveCurr );
};
}() );
this.zoomCamera = function () {
var factor;
if ( _state === STATE.TOUCH_ZOOM_PAN ) {
factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
_touchZoomDistanceStart = _touchZoomDistanceEnd;
_eye.multiplyScalar( factor );
} else {
factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
if ( factor !== 1.0 && factor > 0.0 ) {
_eye.multiplyScalar( factor );
}
if ( _this.staticMoving ) {
_zoomStart.copy( _zoomEnd );
} else {
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
}
}
};
this.panCamera = ( function () {
var mouseChange = new THREE.Vector2(),
objectUp = new THREE.Vector3(),
pan = new THREE.Vector3();
return function panCamera() {
mouseChange.copy( _panEnd ).sub( _panStart );
if ( mouseChange.lengthSq() ) {
mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
_this.object.position.add( pan );
_this.target.add( pan );
if ( _this.staticMoving ) {
_panStart.copy( _panEnd );
} else {
_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
}
}
};
}() );
this.checkDistances = function () {
if ( ! _this.noZoom || ! _this.noPan ) {
if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) {
_this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) );
_zoomStart.copy( _zoomEnd );
}
if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {
_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );
_zoomStart.copy( _zoomEnd );
}
}
};
this.update = function () {
_eye.subVectors( _this.object.position, _this.target );
if ( ! _this.noRotate ) {
_this.rotateCamera();
}
if ( ! _this.noZoom ) {
_this.zoomCamera();
}
if ( ! _this.noPan ) {
_this.panCamera();
}
_this.object.position.addVectors( _this.target, _eye );
_this.checkDistances();
_this.object.lookAt( _this.target );
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
}
};
this.reset = function () {
_state = STATE.NONE;
_prevState = STATE.NONE;
_this.target.copy( _this.target0 );
_this.object.position.copy( _this.position0 );
_this.object.up.copy( _this.up0 );
_eye.subVectors( _this.object.position, _this.target );
_this.object.lookAt( _this.target );
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
};
// listeners
function keydown( event ) {
if ( _this.enabled === false ) return;
window.removeEventListener( 'keydown', keydown );
_prevState = _state;
if ( _state !== STATE.NONE ) {
return;
} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) {
_state = STATE.ROTATE;
} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) {
_state = STATE.ZOOM;
} else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) {
_state = STATE.PAN;
}
}
function keyup( event ) {
if ( _this.enabled === false ) return;
_state = _prevState;
window.addEventListener( 'keydown', keydown, false );
}
function mousedown( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
if ( _state === STATE.NONE ) {
_state = event.button;
}
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
_movePrev.copy( _moveCurr );
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
_zoomEnd.copy( _zoomStart );
} else if ( _state === STATE.PAN && ! _this.noPan ) {
_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
_panEnd.copy( _panStart );
}
document.addEventListener( 'mousemove', mousemove, false );
document.addEventListener( 'mouseup', mouseup, false );
_this.dispatchEvent( startEvent );
}
function mousemove( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
_movePrev.copy( _moveCurr );
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
} else if ( _state === STATE.PAN && ! _this.noPan ) {
_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
}
}
function mouseup( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
_state = STATE.NONE;
document.removeEventListener( 'mousemove', mousemove );
document.removeEventListener( 'mouseup', mouseup );
_this.dispatchEvent( endEvent );
}
function mousewheel( event ) {
if ( _this.enabled === false ) return;
if ( _this.noZoom === true ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.deltaMode ) {
case 2:
// Zoom in pages
_zoomStart.y -= event.deltaY * 0.025;
break;
case 1:
// Zoom in lines
_zoomStart.y -= event.deltaY * 0.01;
break;
default:
// undefined, 0, assume pixels
_zoomStart.y -= event.deltaY * 0.00025;
break;
}
_this.dispatchEvent( startEvent );
_this.dispatchEvent( endEvent );
}
function touchstart( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
switch ( event.touches.length ) {
case 1:
_state = STATE.TOUCH_ROTATE;
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_movePrev.copy( _moveCurr );
break;
default: // 2 or more
_state = STATE.TOUCH_ZOOM_PAN;
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panStart.copy( getMouseOnScreen( x, y ) );
_panEnd.copy( _panStart );
break;
}
_this.dispatchEvent( startEvent );
}
function touchmove( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.touches.length ) {
case 1:
_movePrev.copy( _moveCurr );
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
break;
default: // 2 or more
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panEnd.copy( getMouseOnScreen( x, y ) );
break;
}
}
function touchend( event ) {
if ( _this.enabled === false ) return;
switch ( event.touches.length ) {
case 0:
_state = STATE.NONE;
break;
case 1:
_state = STATE.TOUCH_ROTATE;
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_movePrev.copy( _moveCurr );
break;
}
_this.dispatchEvent( endEvent );
}
function contextmenu( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
}
this.dispose = function () {
this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
this.domElement.removeEventListener( 'mousedown', mousedown, false );
this.domElement.removeEventListener( 'wheel', mousewheel, false );
this.domElement.removeEventListener( 'touchstart', touchstart, false );
this.domElement.removeEventListener( 'touchend', touchend, false );
this.domElement.removeEventListener( 'touchmove', touchmove, false );
document.removeEventListener( 'mousemove', mousemove, false );
document.removeEventListener( 'mouseup', mouseup, false );
window.removeEventListener( 'keydown', keydown, false );
window.removeEventListener( 'keyup', keyup, false );
};
this.domElement.addEventListener( 'contextmenu', contextmenu, false );
this.domElement.addEventListener( 'mousedown', mousedown, false );
this.domElement.addEventListener( 'wheel', mousewheel, false );
this.domElement.addEventListener( 'touchstart', touchstart, false );
this.domElement.addEventListener( 'touchend', touchend, false );
this.domElement.addEventListener( 'touchmove', touchmove, false );
window.addEventListener( 'keydown', keydown, false );
window.addEventListener( 'keyup', keyup, false );
this.handleResize();
// force an update at start
this.update();
};
THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.TrackballControls.prototype.constructor = THREE.TrackballControls;
================================================
FILE: WebContent/js/libs/dat.gui.js
================================================
/**
* dat-gui JavaScript Controller Library
* http://code.google.com/p/dat-gui
*
* Copyright 2011 Data Arts Team, Google Creative Lab
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.dat = {})));
}(this, (function (exports) { 'use strict';
function ___$insertStyle(css) {
if (!css) {
return;
}
if (typeof window === 'undefined') {
return;
}
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
function colorToString (color, forceCSSHex) {
var colorFormat = color.__state.conversionName.toString();
var r = Math.round(color.r);
var g = Math.round(color.g);
var b = Math.round(color.b);
var a = color.a;
var h = Math.round(color.h);
var s = color.s.toFixed(1);
var v = color.v.toFixed(1);
if (forceCSSHex || colorFormat === 'THREE_CHAR_HEX' || colorFormat === 'SIX_CHAR_HEX') {
var str = color.hex.toString(16);
while (str.length < 6) {
str = '0' + str;
}
return '#' + str;
} else if (colorFormat === 'CSS_RGB') {
return 'rgb(' + r + ',' + g + ',' + b + ')';
} else if (colorFormat === 'CSS_RGBA') {
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
} else if (colorFormat === 'HEX') {
return '0x' + color.hex.toString(16);
} else if (colorFormat === 'RGB_ARRAY') {
return '[' + r + ',' + g + ',' + b + ']';
} else if (colorFormat === 'RGBA_ARRAY') {
return '[' + r + ',' + g + ',' + b + ',' + a + ']';
} else if (colorFormat === 'RGB_OBJ') {
return '{r:' + r + ',g:' + g + ',b:' + b + '}';
} else if (colorFormat === 'RGBA_OBJ') {
return '{r:' + r + ',g:' + g + ',b:' + b + ',a:' + a + '}';
} else if (colorFormat === 'HSV_OBJ') {
return '{h:' + h + ',s:' + s + ',v:' + v + '}';
} else if (colorFormat === 'HSVA_OBJ') {
return '{h:' + h + ',s:' + s + ',v:' + v + ',a:' + a + '}';
}
return 'unknown format';
}
var ARR_EACH = Array.prototype.forEach;
var ARR_SLICE = Array.prototype.slice;
var Common = {
BREAK: {},
extend: function extend(target) {
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
var keys = this.isObject(obj) ? Object.keys(obj) : [];
keys.forEach(function (key) {
if (!this.isUndefined(obj[key])) {
target[key] = obj[key];
}
}.bind(this));
}, this);
return target;
},
defaults: function defaults(target) {
this.each(ARR_SLICE.call(arguments, 1), function (obj) {
var keys = this.isObject(obj) ? Object.keys(obj) : [];
keys.forEach(function (key) {
if (this.isUndefined(target[key])) {
target[key] = obj[key];
}
}.bind(this));
}, this);
return target;
},
compose: function compose() {
var toCall = ARR_SLICE.call(arguments);
return function () {
var args = ARR_SLICE.call(arguments);
for (var i = toCall.length - 1; i >= 0; i--) {
args = [toCall[i].apply(this, args)];
}
return args[0];
};
},
each: function each(obj, itr, scope) {
if (!obj) {
return;
}
if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) {
obj.forEach(itr, scope);
} else if (obj.length === obj.length + 0) {
var key = void 0;
var l = void 0;
for (key = 0, l = obj.length; key < l; key++) {
if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) {
return;
}
}
} else {
for (var _key in obj) {
if (itr.call(scope, obj[_key], _key) === this.BREAK) {
return;
}
}
}
},
defer: function defer(fnc) {
setTimeout(fnc, 0);
},
debounce: function debounce(func, threshold, callImmediately) {
var timeout = void 0;
return function () {
var obj = this;
var args = arguments;
function delayed() {
timeout = null;
if (!callImmediately) func.apply(obj, args);
}
var callNow = callImmediately || !timeout;
clearTimeout(timeout);
timeout = setTimeout(delayed, threshold);
if (callNow) {
func.apply(obj, args);
}
};
},
toArray: function toArray(obj) {
if (obj.toArray) return obj.toArray();
return ARR_SLICE.call(obj);
},
isUndefined: function isUndefined(obj) {
return obj === undefined;
},
isNull: function isNull(obj) {
return obj === null;
},
isNaN: function (_isNaN) {
function isNaN(_x) {
return _isNaN.apply(this, arguments);
}
isNaN.toString = function () {
return _isNaN.toString();
};
return isNaN;
}(function (obj) {
return isNaN(obj);
}),
isArray: Array.isArray || function (obj) {
return obj.constructor === Array;
},
isObject: function isObject(obj) {
return obj === Object(obj);
},
isNumber: function isNumber(obj) {
return obj === obj + 0;
},
isString: function isString(obj) {
return obj === obj + '';
},
isBoolean: function isBoolean(obj) {
return obj === false || obj === true;
},
isFunction: function isFunction(obj) {
return Object.prototype.toString.call(obj) === '[object Function]';
}
};
var INTERPRETATIONS = [
{
litmus: Common.isString,
conversions: {
THREE_CHAR_HEX: {
read: function read(original) {
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
if (test === null) {
return false;
}
return {
space: 'HEX',
hex: parseInt('0x' + test[1].toString() + test[1].toString() + test[2].toString() + test[2].toString() + test[3].toString() + test[3].toString(), 0)
};
},
write: colorToString
},
SIX_CHAR_HEX: {
read: function read(original) {
var test = original.match(/^#([A-F0-9]{6})$/i);
if (test === null) {
return false;
}
return {
space: 'HEX',
hex: parseInt('0x' + test[1].toString(), 0)
};
},
write: colorToString
},
CSS_RGB: {
read: function read(original) {
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
if (test === null) {
return false;
}
return {
space: 'RGB',
r: parseFloat(test[1]),
g: parseFloat(test[2]),
b: parseFloat(test[3])
};
},
write: colorToString
},
CSS_RGBA: {
read: function read(original) {
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
if (test === null) {
return false;
}
return {
space: 'RGB',
r: parseFloat(test[1]),
g: parseFloat(test[2]),
b: parseFloat(test[3]),
a: parseFloat(test[4])
};
},
write: colorToString
}
}
},
{
litmus: Common.isNumber,
conversions: {
HEX: {
read: function read(original) {
return {
space: 'HEX',
hex: original,
conversionName: 'HEX'
};
},
write: function write(color) {
return color.hex;
}
}
}
},
{
litmus: Common.isArray,
conversions: {
RGB_ARRAY: {
read: function read(original) {
if (original.length !== 3) {
return false;
}
return {
space: 'RGB',
r: original[0],
g: original[1],
b: original[2]
};
},
write: function write(color) {
return [color.r, color.g, color.b];
}
},
RGBA_ARRAY: {
read: function read(original) {
if (original.length !== 4) return false;
return {
space: 'RGB',
r: original[0],
g: original[1],
b: original[2],
a: original[3]
};
},
write: function write(color) {
return [color.r, color.g, color.b, color.a];
}
}
}
},
{
litmus: Common.isObject,
conversions: {
RGBA_OBJ: {
read: function read(original) {
if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b) && Common.isNumber(original.a)) {
return {
space: 'RGB',
r: original.r,
g: original.g,
b: original.b,
a: original.a
};
}
return false;
},
write: function write(color) {
return {
r: color.r,
g: color.g,
b: color.b,
a: color.a
};
}
},
RGB_OBJ: {
read: function read(original) {
if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b)) {
return {
space: 'RGB',
r: original.r,
g: original.g,
b: original.b
};
}
return false;
},
write: function write(color) {
return {
r: color.r,
g: color.g,
b: color.b
};
}
},
HSVA_OBJ: {
read: function read(original) {
if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v) && Common.isNumber(original.a)) {
return {
space: 'HSV',
h: original.h,
s: original.s,
v: original.v,
a: original.a
};
}
return false;
},
write: function write(color) {
return {
h: color.h,
s: color.s,
v: color.v,
a: color.a
};
}
},
HSV_OBJ: {
read: function read(original) {
if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v)) {
return {
space: 'HSV',
h: original.h,
s: original.s,
v: original.v
};
}
return false;
},
write: function write(color) {
return {
h: color.h,
s: color.s,
v: color.v
};
}
}
}
}];
var result = void 0;
var toReturn = void 0;
var interpret = function interpret() {
toReturn = false;
var original = arguments.length > 1 ? Common.toArray(arguments) : arguments[0];
Common.each(INTERPRETATIONS, function (family) {
if (family.litmus(original)) {
Common.each(family.conversions, function (conversion, conversionName) {
result = conversion.read(original);
if (toReturn === false && result !== false) {
toReturn = result;
result.conversionName = conversionName;
result.conversion = conversion;
return Common.BREAK;
}
});
return Common.BREAK;
}
});
return toReturn;
};
var tmpComponent = void 0;
var ColorMath = {
hsv_to_rgb: function hsv_to_rgb(h, s, v) {
var hi = Math.floor(h / 60) % 6;
var f = h / 60 - Math.floor(h / 60);
var p = v * (1.0 - s);
var q = v * (1.0 - f * s);
var t = v * (1.0 - (1.0 - f) * s);
var c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][hi];
return {
r: c[0] * 255,
g: c[1] * 255,
b: c[2] * 255
};
},
rgb_to_hsv: function rgb_to_hsv(r, g, b) {
var min = Math.min(r, g, b);
var max = Math.max(r, g, b);
var delta = max - min;
var h = void 0;
var s = void 0;
if (max !== 0) {
s = delta / max;
} else {
return {
h: NaN,
s: 0,
v: 0
};
}
if (r === max) {
h = (g - b) / delta;
} else if (g === max) {
h = 2 + (b - r) / delta;
} else {
h = 4 + (r - g) / delta;
}
h /= 6;
if (h < 0) {
h += 1;
}
return {
h: h * 360,
s: s,
v: max / 255
};
},
rgb_to_hex: function rgb_to_hex(r, g, b) {
var hex = this.hex_with_component(0, 2, r);
hex = this.hex_with_component(hex, 1, g);
hex = this.hex_with_component(hex, 0, b);
return hex;
},
component_from_hex: function component_from_hex(hex, componentIndex) {
return hex >> componentIndex * 8 & 0xFF;
},
hex_with_component: function hex_with_component(hex, componentIndex, value) {
return value << (tmpComponent = componentIndex * 8) | hex & ~(0xFF << tmpComponent);
}
};
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var get = function get(object, property, receiver) {
if (object === null) object = Function.prototype;
var desc = Object.getOwnPropertyDescriptor(object, property);
if (desc === undefined) {
var parent = Object.getPrototypeOf(object);
if (parent === null) {
return undefined;
} else {
return get(parent, property, receiver);
}
} else if ("value" in desc) {
return desc.value;
} else {
var getter = desc.get;
if (getter === undefined) {
return undefined;
}
return getter.call(receiver);
}
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
var Color = function () {
function Color() {
classCallCheck(this, Color);
this.__state = interpret.apply(this, arguments);
if (this.__state === false) {
throw new Error('Failed to interpret color arguments');
}
this.__state.a = this.__state.a || 1;
}
createClass(Color, [{
key: 'toString',
value: function toString() {
return colorToString(this);
}
}, {
key: 'toHexString',
value: function toHexString() {
return colorToString(this, true);
}
}, {
key: 'toOriginal',
value: function toOriginal() {
return this.__state.conversion.write(this);
}
}]);
return Color;
}();
function defineRGBComponent(target, component, componentHexIndex) {
Object.defineProperty(target, component, {
get: function get$$1() {
if (this.__state.space === 'RGB') {
return this.__state[component];
}
Color.recalculateRGB(this, component, componentHexIndex);
return this.__state[component];
},
set: function set$$1(v) {
if (this.__state.space !== 'RGB') {
Color.recalculateRGB(this, component, componentHexIndex);
this.__state.space = 'RGB';
}
this.__state[component] = v;
}
});
}
function defineHSVComponent(target, component) {
Object.defineProperty(target, component, {
get: function get$$1() {
if (this.__state.space === 'HSV') {
return this.__state[component];
}
Color.recalculateHSV(this);
return this.__state[component];
},
set: function set$$1(v) {
if (this.__state.space !== 'HSV') {
Color.recalculateHSV(this);
this.__state.space = 'HSV';
}
this.__state[component] = v;
}
});
}
Color.recalculateRGB = function (color, component, componentHexIndex) {
if (color.__state.space === 'HEX') {
color.__state[component] = ColorMath.component_from_hex(color.__state.hex, componentHexIndex);
} else if (color.__state.space === 'HSV') {
Common.extend(color.__state, ColorMath.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
} else {
throw new Error('Corrupted color state');
}
};
Color.recalculateHSV = function (color) {
var result = ColorMath.rgb_to_hsv(color.r, color.g, color.b);
Common.extend(color.__state, {
s: result.s,
v: result.v
});
if (!Common.isNaN(result.h)) {
color.__state.h = result.h;
} else if (Common.isUndefined(color.__state.h)) {
color.__state.h = 0;
}
};
Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
defineRGBComponent(Color.prototype, 'r', 2);
defineRGBComponent(Color.prototype, 'g', 1);
defineRGBComponent(Color.prototype, 'b', 0);
defineHSVComponent(Color.prototype, 'h');
defineHSVComponent(Color.prototype, 's');
defineHSVComponent(Color.prototype, 'v');
Object.defineProperty(Color.prototype, 'a', {
get: function get$$1() {
return this.__state.a;
},
set: function set$$1(v) {
this.__state.a = v;
}
});
Object.defineProperty(Color.prototype, 'hex', {
get: function get$$1() {
if (!this.__state.space !== 'HEX') {
this.__state.hex = ColorMath.rgb_to_hex(this.r, this.g, this.b);
}
return this.__state.hex;
},
set: function set$$1(v) {
this.__state.space = 'HEX';
this.__state.hex = v;
}
});
var Controller = function () {
function Controller(object, property) {
classCallCheck(this, Controller);
this.initialValue = object[property];
this.domElement = document.createElement('div');
this.object = object;
this.property = property;
this.__onChange = undefined;
this.__onFinishChange = undefined;
}
createClass(Controller, [{
key: 'onChange',
value: function onChange(fnc) {
this.__onChange = fnc;
return this;
}
}, {
key: 'onFinishChange',
value: function onFinishChange(fnc) {
this.__onFinishChange = fnc;
return this;
}
}, {
key: 'setValue',
value: function setValue(newValue) {
this.object[this.property] = newValue;
if (this.__onChange) {
this.__onChange.call(this, newValue);
}
this.updateDisplay();
return this;
}
}, {
key: 'getValue',
value: function getValue() {
return this.object[this.property];
}
}, {
key: 'updateDisplay',
value: function updateDisplay() {
return this;
}
}, {
key: 'isModified',
value: function isModified() {
return this.initialValue !== this.getValue();
}
}]);
return Controller;
}();
var EVENT_MAP = {
HTMLEvents: ['change'],
MouseEvents: ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
KeyboardEvents: ['keydown']
};
var EVENT_MAP_INV = {};
Common.each(EVENT_MAP, function (v, k) {
Common.each(v, function (e) {
EVENT_MAP_INV[e] = k;
});
});
var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
function cssValueToPixels(val) {
if (val === '0' || Common.isUndefined(val)) {
return 0;
}
var match = val.match(CSS_VALUE_PIXELS);
if (!Common.isNull(match)) {
return parseFloat(match[1]);
}
return 0;
}
var dom = {
makeSelectable: function makeSelectable(elem, selectable) {
if (elem === undefined || elem.style === undefined) return;
elem.onselectstart = selectable ? function () {
return false;
} : function () {};
elem.style.MozUserSelect = selectable ? 'auto' : 'none';
elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
elem.unselectable = selectable ? 'on' : 'off';
},
makeFullscreen: function makeFullscreen(elem, hor, vert) {
var vertical = vert;
var horizontal = hor;
if (Common.isUndefined(horizontal)) {
horizontal = true;
}
if (Common.isUndefined(vertical)) {
vertical = true;
}
elem.style.position = 'absolute';
if (horizontal) {
elem.style.left = 0;
elem.style.right = 0;
}
if (vertical) {
elem.style.top = 0;
elem.style.bottom = 0;
}
},
fakeEvent: function fakeEvent(elem, eventType, pars, aux) {
var params = pars || {};
var className = EVENT_MAP_INV[eventType];
if (!className) {
throw new Error('Event type ' + eventType + ' not supported.');
}
var evt = document.createEvent(className);
switch (className) {
case 'MouseEvents':
{
var clientX = params.x || params.clientX || 0;
var clientY = params.y || params.clientY || 0;
evt.initMouseEvent(eventType, params.bubbles || false, params.cancelable || true, window, params.clickCount || 1, 0,
0,
clientX,
clientY,
false, false, false, false, 0, null);
break;
}
case 'KeyboardEvents':
{
var init = evt.initKeyboardEvent || evt.initKeyEvent;
Common.defaults(params, {
cancelable: true,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
keyCode: undefined,
charCode: undefined
});
init(eventType, params.bubbles || false, params.cancelable, window, params.ctrlKey, params.altKey, params.shiftKey, params.metaKey, params.keyCode, params.charCode);
break;
}
default:
{
evt.initEvent(eventType, params.bubbles || false, params.cancelable || true);
break;
}
}
Common.defaults(evt, aux);
elem.dispatchEvent(evt);
},
bind: function bind(elem, event, func, newBool) {
var bool = newBool || false;
if (elem.addEventListener) {
elem.addEventListener(event, func, bool);
} else if (elem.attachEvent) {
elem.attachEvent('on' + event, func);
}
return dom;
},
unbind: function unbind(elem, event, func, newBool) {
var bool = newBool || false;
if (elem.removeEventListener) {
elem.removeEventListener(event, func, bool);
} else if (elem.detachEvent) {
elem.detachEvent('on' + event, func);
}
return dom;
},
addClass: function addClass(elem, className) {
if (elem.className === undefined) {
elem.className = className;
} else if (elem.className !== className) {
var classes = elem.className.split(/ +/);
if (classes.indexOf(className) === -1) {
classes.push(className);
elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
}
}
return dom;
},
removeClass: function removeClass(elem, className) {
if (className) {
if (elem.className === className) {
elem.removeAttribute('class');
} else {
var classes = elem.className.split(/ +/);
var index = classes.indexOf(className);
if (index !== -1) {
classes.splice(index, 1);
elem.className = classes.join(' ');
}
}
} else {
elem.className = undefined;
}
return dom;
},
hasClass: function hasClass(elem, className) {
return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
},
getWidth: function getWidth(elem) {
var style = getComputedStyle(elem);
return cssValueToPixels(style['border-left-width']) + cssValueToPixels(style['border-right-width']) + cssValueToPixels(style['padding-left']) + cssValueToPixels(style['padding-right']) + cssValueToPixels(style.width);
},
getHeight: function getHeight(elem) {
var style = getComputedStyle(elem);
return cssValueToPixels(style['border-top-width']) + cssValueToPixels(style['border-bottom-width']) + cssValueToPixels(style['padding-top']) + cssValueToPixels(style['padding-bottom']) + cssValueToPixels(style.height);
},
getOffset: function getOffset(el) {
var elem = el;
var offset = { left: 0, top: 0 };
if (elem.offsetParent) {
do {
offset.left += elem.offsetLeft;
offset.top += elem.offsetTop;
elem = elem.offsetParent;
} while (elem);
}
return offset;
},
isActive: function isActive(elem) {
return elem === document.activeElement && (elem.type || elem.href);
}
};
var BooleanController = function (_Controller) {
inherits(BooleanController, _Controller);
function BooleanController(object, property) {
classCallCheck(this, BooleanController);
var _this2 = possibleConstructorReturn(this, (BooleanController.__proto__ || Object.getPrototypeOf(BooleanController)).call(this, object, property));
var _this = _this2;
_this2.__prev = _this2.getValue();
_this2.__checkbox = document.createElement('input');
_this2.__checkbox.setAttribute('type', 'checkbox');
function onChange() {
_this.setValue(!_this.__prev);
}
dom.bind(_this2.__checkbox, 'change', onChange, false);
_this2.domElement.appendChild(_this2.__checkbox);
_this2.updateDisplay();
return _this2;
}
createClass(BooleanController, [{
key: 'setValue',
value: function setValue(v) {
var toReturn = get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'setValue', this).call(this, v);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
this.__prev = this.getValue();
return toReturn;
}
}, {
key: 'updateDisplay',
value: function updateDisplay() {
if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true;
this.__prev = true;
} else {
this.__checkbox.checked = false;
this.__prev = false;
}
return get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'updateDisplay', this).call(this);
}
}]);
return BooleanController;
}(Controller);
var OptionController = function (_Controller) {
inherits(OptionController, _Controller);
function OptionController(object, property, opts) {
classCallCheck(this, OptionController);
var _this2 = possibleConstructorReturn(this, (OptionController.__proto__ || Object.getPrototypeOf(OptionController)).call(this, object, property));
var options = opts;
var _this = _this2;
_this2.__select = document.createElement('select');
if (Common.isArray(options)) {
var map = {};
Common.each(options, function (element) {
map[element] = element;
});
options = map;
}
Common.each(options, function (value, key) {
var opt = document.createElement('option');
opt.innerHTML = key;
opt.setAttribute('value', value);
_this.__select.appendChild(opt);
});
_this2.updateDisplay();
dom.bind(_this2.__select, 'change', function () {
var desiredValue = this.options[this.selectedIndex].value;
_this.setValue(desiredValue);
});
_this2.domElement.appendChild(_this2.__select);
return _this2;
}
createClass(OptionController, [{
key: 'setValue',
value: function setValue(v) {
var toReturn = get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'setValue', this).call(this, v);
if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue());
}
return toReturn;
}
}, {
key: 'updateDisplay',
value: function updateDisplay() {
if (dom.isActive(this.__select)) return this;
this.__select.value = this.getValue();
return get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'updateDisplay', this).call(this);
}
}]);
return OptionController;
}(Controller);
var StringController = function (_Controller) {
inherits(StringController, _Controller);
function StringController(object, property) {
classCallCheck(this, StringController);
var _this2 = possibleConstructorReturn(this, (StringController.__proto__ || Object.getPrototypeOf(StringController)).call(this, object, property));
var _this = _this2;
function onChange() {
_this.setValue(_this.__input.value);
}
function onBlur() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
}
}
_this2.__input = document.createElement('input');
_this2.__input.setAttribute('type', 'text');
dom.bind(_this2.__input, 'keyup', onChange);
dom.bind(_this2.__input, 'change', onChange);
dom.bind(_this2.__input, 'blur', onBlur);
dom.bind(_this2.__input, 'keydown', function (e) {
if (e.keyCode === 13) {
this.blur();
}
});
_this2.updateDisplay();
_this2.domElement.appendChild(_this2.__input);
return _this2;
}
createClass(StringController, [{
key: 'updateDisplay',
value: function updateDisplay() {
if (!dom.isActive(this.__input)) {
this.__input.value = this.getValue();
}
return get(StringController.prototype.__proto__ || Object.getPrototypeOf(StringController.prototype), 'updateDisplay', this).call(this);
}
}]);
return StringController;
}(Controller);
function numDecimals(x) {
var _x = x.toString();
if (_x.indexOf('.') > -1) {
return _x.length - _x.indexOf('.') - 1;
}
return 0;
}
var NumberController = function (_Controller) {
inherits(NumberController, _Controller);
function NumberController(object, property, params) {
classCallCheck(this, NumberController);
var _this = possibleConstructorReturn(this, (NumberController.__proto__ || Object.getPrototypeOf(NumberController)).call(this, object, property));
var _params = params || {};
_this.__min = _params.min;
_this.__max = _params.max;
_this.__step = _params.step;
if (Common.isUndefined(_this.__step)) {
if (_this.initialValue === 0) {
_this.__impliedStep = 1;
} else {
_this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(_this.initialValue)) /
gitextract_5nk142y1/
├── .gitignore
├── .project
├── Gruntfile.js
├── LICENSE
├── README.md
├── WebContent/
│ ├── .htaccess
│ ├── about.html
│ ├── attraction-example.html
│ ├── badtv-example.html
│ ├── blur-example.html
│ ├── css/
│ │ └── styles.css
│ ├── cursor-example.html
│ ├── cuts-example.html
│ ├── debug-example.html
│ ├── deform-example.html
│ ├── dla-example.html
│ ├── dots-example.html
│ ├── edge-example.html
│ ├── fire-example.html
│ ├── flare-example.html
│ ├── fonts/
│ │ └── fontAwesome-4.7.0/
│ │ └── FontAwesome.otf
│ ├── galaxies-example.html
│ ├── gravity-example.html
│ ├── index.html
│ ├── js/
│ │ ├── libs/
│ │ │ ├── CopyShader.js
│ │ │ ├── EffectComposer.js
│ │ │ ├── GPUComputationRenderer.js
│ │ │ ├── MaskPass.js
│ │ │ ├── OrbitControls.js
│ │ │ ├── RenderPass.js
│ │ │ ├── ShaderPass.js
│ │ │ ├── TrackballControls.js
│ │ │ ├── dat.gui.js
│ │ │ ├── stats.js
│ │ │ └── three.js
│ │ ├── shader-example-2d.js
│ │ ├── shader-example-3d.js
│ │ ├── shader-example-debug.js
│ │ ├── shader-example-dla.js
│ │ ├── shader-example-evolve.js
│ │ ├── shader-example-evolveImage.js
│ │ ├── shader-example-filters.js
│ │ ├── shader-example-galaxies.js
│ │ ├── shader-example-gravity.js
│ │ ├── shader-example-mountains.js
│ │ ├── shader-example-postprocessing.js
│ │ ├── shader-example-repulsion.js
│ │ ├── shader-example-sphere.js
│ │ └── shader-example-stippling.js
│ ├── lens-example.html
│ ├── mountains-example.html
│ ├── noise-example.html
│ ├── objects/
│ │ └── suzanne_buffergeometry.json
│ ├── pencil-example.html
│ ├── pixelated-example.html
│ ├── pixels-example.html
│ ├── rain-example.html
│ ├── random-example.html
│ ├── reaction-example.html
│ ├── repulsion-example.html
│ ├── rgb-example.html
│ ├── shaders/
│ │ ├── frag-badtv.glsl
│ │ ├── frag-blur.glsl
│ │ ├── frag-cursor.glsl
│ │ ├── frag-cuts.glsl
│ │ ├── frag-debug-pos.glsl
│ │ ├── frag-debug-vel.glsl
│ │ ├── frag-debug.glsl
│ │ ├── frag-dla-pos.glsl
│ │ ├── frag-dla-vel.glsl
│ │ ├── frag-dla.glsl
│ │ ├── frag-dots.glsl
│ │ ├── frag-edge.glsl
│ │ ├── frag-fire.glsl
│ │ ├── frag-flare.glsl
│ │ ├── frag-galaxies-pos.glsl
│ │ ├── frag-galaxies-vel.glsl
│ │ ├── frag-grav-pos.glsl
│ │ ├── frag-grav-vel.glsl
│ │ ├── frag-lens.glsl
│ │ ├── frag-mountains.glsl
│ │ ├── frag-noise.glsl
│ │ ├── frag-normals.glsl
│ │ ├── frag-pencil.glsl
│ │ ├── frag-pixelated.glsl
│ │ ├── frag-rain.glsl
│ │ ├── frag-random.glsl
│ │ ├── frag-reaction.glsl
│ │ ├── frag-repulsion-pos.glsl
│ │ ├── frag-repulsion-vel.glsl
│ │ ├── frag-repulsion.glsl
│ │ ├── frag-rgb.glsl
│ │ ├── frag-sim.glsl
│ │ ├── frag-sort.glsl
│ │ ├── frag-sphere.glsl
│ │ ├── frag-stippling-pos.glsl
│ │ ├── frag-stippling-vel.glsl
│ │ ├── frag-stippling.glsl
│ │ ├── frag-stripes.glsl
│ │ ├── frag-tile.glsl
│ │ ├── frag-toon.glsl
│ │ ├── frag-wave.glsl
│ │ ├── vert-2d.glsl
│ │ ├── vert-3d.glsl
│ │ ├── vert-attraction.glsl
│ │ ├── vert-debug.glsl
│ │ ├── vert-deform.glsl
│ │ ├── vert-dla.glsl
│ │ ├── vert-filters.glsl
│ │ ├── vert-mountains.glsl
│ │ ├── vert-repulsion.glsl
│ │ ├── vert-sim.glsl
│ │ ├── vert-sphere.glsl
│ │ └── vert-stippling.glsl
│ ├── sort-example.html
│ ├── sphere-example.html
│ ├── stippling-example.html
│ ├── stripes-example.html
│ ├── tile-example.html
│ ├── toon-example.html
│ └── wave-example.html
├── html/
│ ├── about.html
│ ├── index.html
│ ├── template-example-2d.html
│ ├── template-example-3d.html
│ ├── template-example-post.html
│ └── template-example-sim.html
├── package.json
├── sass/
│ ├── originals/
│ │ └── _normalize.scss
│ ├── partials/
│ │ ├── _base.scss
│ │ ├── _content.scss
│ │ ├── _fonts.scss
│ │ ├── _footer.scss
│ │ ├── _layout.scss
│ │ ├── _navbar.scss
│ │ ├── _normalize.scss
│ │ ├── _sketch.scss
│ │ └── _variables.scss
│ └── styles.scss
└── shaders/
├── frag-badtv.glsl
├── frag-blur.glsl
├── frag-cursor.glsl
├── frag-cuts.glsl
├── frag-debug-pos.glsl
├── frag-debug-vel.glsl
├── frag-debug.glsl
├── frag-dla-pos.glsl
├── frag-dla-vel.glsl
├── frag-dla.glsl
├── frag-dots.glsl
├── frag-edge.glsl
├── frag-fire.glsl
├── frag-flare.glsl
├── frag-galaxies-pos.glsl
├── frag-galaxies-vel.glsl
├── frag-grav-pos.glsl
├── frag-grav-vel.glsl
├── frag-lens.glsl
├── frag-mountains.glsl
├── frag-noise.glsl
├── frag-normals.glsl
├── frag-pencil.glsl
├── frag-pixelated.glsl
├── frag-rain.glsl
├── frag-random.glsl
├── frag-reaction.glsl
├── frag-repulsion-pos.glsl
├── frag-repulsion-vel.glsl
├── frag-repulsion.glsl
├── frag-rgb.glsl
├── frag-sim.glsl
├── frag-sort.glsl
├── frag-sphere.glsl
├── frag-stippling-pos.glsl
├── frag-stippling-vel.glsl
├── frag-stippling.glsl
├── frag-stripes.glsl
├── frag-tile.glsl
├── frag-toon.glsl
├── frag-wave.glsl
├── imports/
│ ├── commonUniforms.glsl
│ ├── commonVaryings3d.glsl
│ ├── textureUniforms.glsl
│ └── textureVaryings.glsl
├── requires/
│ ├── calculateNormal.glsl
│ ├── classicNoise2d.glsl
│ ├── diffuseFactor.glsl
│ ├── kernels/
│ │ ├── edgeKernel.glsl
│ │ └── gaussianKernel.glsl
│ ├── laplacian.glsl
│ ├── noise1d.glsl
│ ├── random1d.glsl
│ ├── random2d.glsl
│ ├── rotate2d.glsl
│ ├── shapes/
│ │ ├── circle.glsl
│ │ ├── ellipse.glsl
│ │ ├── horizontalLine.glsl
│ │ ├── line.glsl
│ │ ├── lineSegment.glsl
│ │ ├── rectangle.glsl
│ │ └── square.glsl
│ └── simplexNoise2d.glsl
├── vert-2d.glsl
├── vert-3d.glsl
├── vert-attraction.glsl
├── vert-debug.glsl
├── vert-deform.glsl
├── vert-dla.glsl
├── vert-filters.glsl
├── vert-mountains.glsl
├── vert-repulsion.glsl
├── vert-sim.glsl
├── vert-sphere.glsl
└── vert-stippling.glsl
SYMBOL INDEX (521 symbols across 21 files)
FILE: Gruntfile.js
function replaceParametersForExample (line 6) | function replaceParametersForExample(name, htmlFile, jsFile, vertexShade...
function replaceParametersForSimExample (line 41) | function replaceParametersForSimExample(name, htmlFile, jsFile, position...
FILE: WebContent/js/libs/GPUComputationRenderer.js
function GPUComputationRenderer (line 100) | function GPUComputationRenderer( sizeX, sizeY, renderer ) {
FILE: WebContent/js/libs/OrbitControls.js
function getAutoRotationAngle (line 279) | function getAutoRotationAngle() {
function getZoomScale (line 285) | function getZoomScale() {
function rotateLeft (line 291) | function rotateLeft( angle ) {
function rotateUp (line 297) | function rotateUp( angle ) {
function dollyIn (line 384) | function dollyIn( dollyScale ) {
function dollyOut (line 405) | function dollyOut( dollyScale ) {
function handleMouseDownRotate (line 430) | function handleMouseDownRotate( event ) {
function handleMouseDownDolly (line 438) | function handleMouseDownDolly( event ) {
function handleMouseDownPan (line 446) | function handleMouseDownPan( event ) {
function handleMouseMoveRotate (line 454) | function handleMouseMoveRotate( event ) {
function handleMouseMoveDolly (line 474) | function handleMouseMoveDolly( event ) {
function handleMouseMovePan (line 498) | function handleMouseMovePan( event ) {
function handleMouseUp (line 514) | function handleMouseUp( event ) {
function handleMouseWheel (line 520) | function handleMouseWheel( event ) {
function handleKeyDown (line 538) | function handleKeyDown( event ) {
function handleTouchStartRotate (line 568) | function handleTouchStartRotate( event ) {
function handleTouchStartDollyPan (line 576) | function handleTouchStartDollyPan( event ) {
function handleTouchMoveRotate (line 602) | function handleTouchMoveRotate( event ) {
function handleTouchMoveDollyPan (line 622) | function handleTouchMoveDollyPan( event ) {
function handleTouchEnd (line 662) | function handleTouchEnd( event ) {
function onMouseDown (line 672) | function onMouseDown( event ) {
function onMouseMove (line 735) | function onMouseMove( event ) {
function onMouseUp (line 771) | function onMouseUp( event ) {
function onMouseWheel (line 786) | function onMouseWheel( event ) {
function onKeyDown (line 801) | function onKeyDown( event ) {
function onTouchStart (line 809) | function onTouchStart( event ) {
function onTouchMove (line 851) | function onTouchMove( event ) {
function onTouchEnd (line 886) | function onTouchEnd( event ) {
function onContextMenu (line 898) | function onContextMenu( event ) {
FILE: WebContent/js/libs/TrackballControls.js
function keydown (line 345) | function keydown( event ) {
function keyup (line 373) | function keyup( event ) {
function mousedown (line 383) | function mousedown( event ) {
function mousemove (line 420) | function mousemove( event ) {
function mouseup (line 444) | function mouseup( event ) {
function mousewheel (line 459) | function mousewheel( event ) {
function touchstart (line 492) | function touchstart( event ) {
function touchmove (line 524) | function touchmove( event ) {
function touchend (line 552) | function touchend( event ) {
function contextmenu (line 574) | function contextmenu( event ) {
FILE: WebContent/js/libs/dat.gui.js
function ___$insertStyle (line 20) | function ___$insertStyle(css) {
function colorToString (line 37) | function colorToString (color, forceCSSHex) {
function delayed (line 140) | function delayed() {
function isNaN (line 163) | function isNaN(_x) {
function defineProperties (line 504) | function defineProperties(target, props) {
function Color (line 587) | function Color() {
function defineRGBComponent (line 613) | function defineRGBComponent(target, component, componentHexIndex) {
function defineHSVComponent (line 631) | function defineHSVComponent(target, component) {
function Controller (line 699) | function Controller(object, property) {
function cssValueToPixels (line 761) | function cssValueToPixels(val) {
function BooleanController (line 920) | function BooleanController(object, property) {
function OptionController (line 964) | function OptionController(object, property, opts) {
function StringController (line 1013) | function StringController(object, property) {
function numDecimals (line 1051) | function numDecimals(x) {
function NumberController (line 1060) | function NumberController(object, property, params) {
function roundToDecimal (line 1117) | function roundToDecimal(value, decimals) {
function NumberControllerBox (line 1123) | function NumberControllerBox(object, property, params) {
function map (line 1185) | function map(v, i1, i2, o1, o2) {
function NumberControllerSlider (line 1190) | function NumberControllerSlider(object, property, min, max, step) {
function FunctionController (line 1257) | function FunctionController(object, property, text) {
function ColorController (line 1289) | function ColorController(object, property) {
function linearGradient (line 1524) | function linearGradient(elem, x, a, b) {
function hueGradient (line 1530) | function hueGradient(elem) {
function requestAnimationFrame (line 1592) | function requestAnimationFrame(callback) {
function CenteredDiv (line 1598) | function CenteredDiv() {
function resetWidth (line 1904) | function resetWidth() {
function addRow (line 2141) | function addRow(gui, newDom, liBefore) {
function removeListeners (line 2154) | function removeListeners(gui) {
function markPresetModified (line 2160) | function markPresetModified(gui, modified) {
function augmentController (line 2168) | function augmentController(gui, li, controller) {
function recallSavedValue (line 2266) | function recallSavedValue(gui, controller) {
function _add (line 2294) | function _add(gui, object, property, params) {
function getLocalStorageHash (line 2327) | function getLocalStorageHash(gui, key) {
function addPresetOption (line 2330) | function addPresetOption(gui, name, setSelected) {
function showHideExplain (line 2339) | function showHideExplain(gui, explain) {
function addSaveMenu (line 2342) | function addSaveMenu(gui) {
function addResizeHandle (line 2420) | function addResizeHandle(gui) {
function setWidth (line 2454) | function setWidth(gui, w) {
function getCurrentPreset (line 2463) | function getCurrentPreset(gui, useInitialValues) {
function setPresetSelectIndex (line 2475) | function setPresetSelectIndex(gui) {
function updateDisplays (line 2482) | function updateDisplays(controllerArray) {
FILE: WebContent/js/libs/stats.js
function addPanel (line 26) | function addPanel( panel ) {
function showPanel (line 33) | function showPanel( id ) {
FILE: WebContent/js/libs/three.js
function EventDispatcher (line 108) | function EventDispatcher() {}
function Vector2 (line 491) | function Vector2( x, y ) {
function Matrix4 (line 994) | function Matrix4() {
function Quaternion (line 1922) | function Quaternion( x, y, z, w ) {
function Vector3 (line 2556) | function Vector3( x, y, z ) {
function Matrix3 (line 3282) | function Matrix3() {
function Texture (line 3726) | function Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, fo...
function Vector4 (line 4039) | function Vector4( x, y, z, w ) {
function WebGLRenderTarget (line 4669) | function WebGLRenderTarget( width, height, options ) {
function WebGLRenderTargetCube (line 4749) | function WebGLRenderTargetCube( width, height, options ) {
function DataTexture (line 4767) | function DataTexture( data, width, height, format, type, mapping, wrapS,...
function Box3 (line 4792) | function Box3( min, max ) {
function traverse (line 5011) | function traverse( node ) {
function satForAxes (line 5193) | function satForAxes( axes ) {
function Sphere (line 5403) | function Sphere( center, radius ) {
function Plane (line 5577) | function Plane( normal, constant ) {
function Frustum (line 5819) | function Frustum( p0, p1, p2, p3, p4, p5 ) {
function cloneUniforms (line 6366) | function cloneUniforms( src ) {
function mergeUniforms (line 6403) | function mergeUniforms( uniforms ) {
function Color (line 6456) | function Color( r, g, b ) {
function hue2rgb (line 6529) | function hue2rgb( p, q, t ) {
function handleAlpha (line 6570) | function handleAlpha( string ) {
function SRGBToLinear (line 6758) | function SRGBToLinear( c ) {
function LinearToSRGB (line 6778) | function LinearToSRGB( c ) {
function WebGLAnimation (line 7505) | function WebGLAnimation() {
function WebGLAttributes (line 7560) | function WebGLAttributes( gl ) {
function Face3 (line 7714) | function Face3( a, b, c, normal, color, materialIndex ) {
function Euler (line 7773) | function Euler( x, y, z, order ) {
function Layers (line 8116) | function Layers() {
function Object3D (line 8166) | function Object3D() {
function serialize (line 8869) | function serialize( library, element ) {
function extractFromCache (line 8970) | function extractFromCache( cache ) {
function Geometry (line 9049) | function Geometry() {
function addFace (line 9268) | function addFace( a, b, c, materialIndex ) {
function materialIndexSort (line 9962) | function materialIndexSort( a, b ) {
function setBit (line 10118) | function setBit( value, position, enabled ) {
function getNormalIndex (line 10124) | function getNormalIndex( normal ) {
function getColorIndex (line 10141) | function getColorIndex( color ) {
function getUvIndex (line 10158) | function getUvIndex( uv ) {
function BufferAttribute (line 10463) | function BufferAttribute( array, itemSize, normalized ) {
function Int8BufferAttribute (line 10781) | function Int8BufferAttribute( array, itemSize, normalized ) {
function Uint8BufferAttribute (line 10791) | function Uint8BufferAttribute( array, itemSize, normalized ) {
function Uint8ClampedBufferAttribute (line 10801) | function Uint8ClampedBufferAttribute( array, itemSize, normalized ) {
function Int16BufferAttribute (line 10811) | function Int16BufferAttribute( array, itemSize, normalized ) {
function Uint16BufferAttribute (line 10821) | function Uint16BufferAttribute( array, itemSize, normalized ) {
function Int32BufferAttribute (line 10831) | function Int32BufferAttribute( array, itemSize, normalized ) {
function Uint32BufferAttribute (line 10841) | function Uint32BufferAttribute( array, itemSize, normalized ) {
function Float32BufferAttribute (line 10851) | function Float32BufferAttribute( array, itemSize, normalized ) {
function Float64BufferAttribute (line 10861) | function Float64BufferAttribute( array, itemSize, normalized ) {
function DirectGeometry (line 10874) | function DirectGeometry() {
function arrayMax (line 11144) | function arrayMax( array ) {
function BufferGeometry (line 11167) | function BufferGeometry() {
function BoxGeometry (line 12282) | function BoxGeometry( width, height, depth, widthSegments, heightSegment...
function BoxBufferGeometry (line 12307) | function BoxBufferGeometry( width, height, depth, widthSegments, heightS...
function PlaneGeometry (line 12478) | function PlaneGeometry( width, height, widthSegments, heightSegments ) {
function PlaneBufferGeometry (line 12501) | function PlaneBufferGeometry( width, height, widthSegments, heightSegmen...
function Material (line 12598) | function Material() {
function extractFromCache (line 12856) | function extractFromCache( cache ) {
function ShaderMaterial (line 12987) | function ShaderMaterial( parameters ) {
function Ray (line 13165) | function Ray( origin, direction ) {
function Triangle (line 13708) | function Triangle( a, b, c ) {
function MeshBasicMaterial (line 14083) | function MeshBasicMaterial( parameters ) {
function Mesh (line 14169) | function Mesh( geometry, material ) {
function checkIntersection (line 14285) | function checkIntersection( object, material, raycaster, ray, pA, pB, pC...
function checkBufferGeometryIntersection (line 14316) | function checkBufferGeometryIntersection( object, material, raycaster, r...
function WebGLBackground (line 14604) | function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
function WebGLBufferRenderer (line 14804) | function WebGLBufferRenderer( gl, extensions, info, capabilities ) {
function WebGLCapabilities (line 14861) | function WebGLCapabilities( gl, extensions, parameters ) {
function WebGLClipping (line 14975) | function WebGLClipping() {
function WebGLExtensions (line 15134) | function WebGLExtensions( gl ) {
function WebGLGeometries (line 15193) | function WebGLGeometries( gl, attributes, info ) {
function WebGLIndexedBufferRenderer (line 15371) | function WebGLIndexedBufferRenderer( gl, extensions, info, capabilities ) {
function WebGLInfo (line 15438) | function WebGLInfo( gl ) {
function absNumericalSort (line 15519) | function absNumericalSort( a, b ) {
function WebGLMorphtargets (line 15525) | function WebGLMorphtargets( gl ) {
function WebGLObjects (line 15628) | function WebGLObjects( geometries, info ) {
function CubeTexture (line 15678) | function CubeTexture( images, mapping, wrapS, wrapT, magFilter, minFilte...
function DataTexture3D (line 15714) | function DataTexture3D( data, width, height, depth ) {
function UniformContainer (line 15797) | function UniformContainer() {
function flatten (line 15819) | function flatten( array, nBlocks, blockSize ) {
function arraysEqual (line 15854) | function arraysEqual( a, b ) {
function copyArray (line 15868) | function copyArray( a, b ) {
function allocTexUnits (line 15880) | function allocTexUnits( renderer, n ) {
function setValue1f (line 15905) | function setValue1f( gl, v ) {
function setValue1i (line 15917) | function setValue1i( gl, v ) {
function setValue2fv (line 15931) | function setValue2fv( gl, v ) {
function setValue3fv (line 15958) | function setValue3fv( gl, v ) {
function setValue4fv (line 15998) | function setValue4fv( gl, v ) {
function setValue2fm (line 16029) | function setValue2fm( gl, v ) {
function setValue3fm (line 16056) | function setValue3fm( gl, v ) {
function setValue4fm (line 16083) | function setValue4fm( gl, v ) {
function setValueT1 (line 16112) | function setValueT1( gl, v, renderer ) {
function setValueT3D1 (line 16128) | function setValueT3D1( gl, v, renderer ) {
function setValueT6 (line 16144) | function setValueT6( gl, v, renderer ) {
function setValue2iv (line 16162) | function setValue2iv( gl, v ) {
function setValue3iv (line 16174) | function setValue3iv( gl, v ) {
function setValue4iv (line 16186) | function setValue4iv( gl, v ) {
function getSingularSetter (line 16200) | function getSingularSetter( type ) {
function setValue1fv (line 16228) | function setValue1fv( gl, v ) {
function setValue1iv (line 16239) | function setValue1iv( gl, v ) {
function setValueV2a (line 16253) | function setValueV2a( gl, v ) {
function setValueV3a (line 16266) | function setValueV3a( gl, v ) {
function setValueV4a (line 16279) | function setValueV4a( gl, v ) {
function setValueM2a (line 16294) | function setValueM2a( gl, v ) {
function setValueM3a (line 16307) | function setValueM3a( gl, v ) {
function setValueM4a (line 16320) | function setValueM4a( gl, v ) {
function setValueT1a (line 16335) | function setValueT1a( gl, v, renderer ) {
function setValueT6a (line 16357) | function setValueT6a( gl, v, renderer ) {
function getPureArraySetter (line 16381) | function getPureArraySetter( type ) {
function SingleUniform (line 16408) | function SingleUniform( id, activeInfo, addr ) {
function PureArrayUniform (line 16419) | function PureArrayUniform( id, activeInfo, addr ) {
function StructuredUniform (line 16445) | function StructuredUniform( id ) {
function addUniform (line 16481) | function addUniform( container, uniformObject ) {
function parseUniform (line 16488) | function parseUniform( activeInfo, addr, container ) {
function WebGLUniforms (line 16540) | function WebGLUniforms( gl, program, renderer ) {
function addLineNumbers (line 16615) | function addLineNumbers( string ) {
function WebGLShader (line 16629) | function WebGLShader( gl, type, string ) {
function getEncodingComponents (line 16661) | function getEncodingComponents( encoding ) {
function getTexelDecodingFunction (line 16686) | function getTexelDecodingFunction( functionName, encoding ) {
function getTexelEncodingFunction (line 16693) | function getTexelEncodingFunction( functionName, encoding ) {
function getToneMappingFunction (line 16700) | function getToneMappingFunction( functionName, toneMapping ) {
function generateExtensions (line 16735) | function generateExtensions( extensions, parameters, rendererExtensions ) {
function generateDefines (line 16750) | function generateDefines( defines ) {
function fetchAttributeLocations (line 16768) | function fetchAttributeLocations( gl, program ) {
function filterEmptyLine (line 16789) | function filterEmptyLine( string ) {
function replaceLightNums (line 16795) | function replaceLightNums( string, parameters ) {
function replaceClippingPlaneNums (line 16806) | function replaceClippingPlaneNums( string, parameters ) {
function parseIncludes (line 16814) | function parseIncludes( string ) {
function unrollLoops (line 16836) | function unrollLoops( string ) {
function WebGLProgram (line 16858) | function WebGLProgram( renderer, extensions, code, material, shader, par...
function WebGLPrograms (line 17388) | function WebGLPrograms( renderer, extensions, capabilities ) {
function WebGLProperties (line 17695) | function WebGLProperties() {
function painterSortStable (line 17745) | function painterSortStable( a, b ) {
function reversePainterSortStable (line 17771) | function reversePainterSortStable( a, b ) {
function WebGLRenderList (line 17790) | function WebGLRenderList() {
function WebGLRenderLists (line 17881) | function WebGLRenderLists() {
function UniformsCache (line 17928) | function UniformsCache() {
function WebGLLights (line 18023) | function WebGLLights() {
function WebGLRenderState (line 18266) | function WebGLRenderState() {
function WebGLRenderStates (line 18316) | function WebGLRenderStates() {
function MeshDepthMaterial (line 18385) | function MeshDepthMaterial( parameters ) {
function MeshDistanceMaterial (line 18466) | function MeshDistanceMaterial( parameters ) {
function WebGLShadowMap (line 18527) | function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
function WebGLState (line 18944) | function WebGLState( gl, extensions, utils, capabilities ) {
function WebGLTextures (line 19917) | function WebGLTextures( _gl, extensions, state, properties, capabilities...
function WebGLUtils (line 20860) | function WebGLUtils( gl, extensions, capabilities ) {
function Group (line 21024) | function Group() {
function Camera (line 21046) | function Camera() {
function PerspectiveCamera (line 21118) | function PerspectiveCamera( fov, aspect, near, far ) {
function ArrayCamera (line 21353) | function ArrayCamera( array ) {
function setProjectionFromUnion (line 21383) | function setProjectionFromUnion( camera, cameraL, cameraR ) {
function WebVRManager (line 21436) | function WebVRManager( renderer ) {
function WebXRManager (line 21826) | function WebXRManager( renderer ) {
function WebGLRenderer (line 22135) | function WebGLRenderer( parameters ) {
function FogExp2 (line 24727) | function FogExp2( color, density ) {
function Fog (line 24759) | function Fog( color, near, far ) {
function Scene (line 24793) | function Scene() {
function InterleavedBuffer (line 24843) | function InterleavedBuffer( array, stride ) {
function InterleavedBufferAttribute (line 24951) | function InterleavedBufferAttribute( interleavedBuffer, itemSize, offset...
function SpriteMaterial (line 25094) | function SpriteMaterial( parameters ) {
function Sprite (line 25140) | function Sprite( material ) {
function transformVertex (line 25196) | function transformVertex( vertexPosition, mvPosition, center, scale, sin...
function LOD (line 25309) | function LOD() {
function SkinnedMesh (line 25480) | function SkinnedMesh( geometry, material ) {
function Skeleton (line 25595) | function Skeleton( bones, boneInverses ) {
function Bone (line 25768) | function Bone() {
function LineBasicMaterial (line 25798) | function LineBasicMaterial( parameters ) {
function Line (line 25839) | function Line( geometry, material, mode ) {
function LineSegments (line 26095) | function LineSegments( geometry, material ) {
function LineLoop (line 26174) | function LineLoop( geometry, material ) {
function PointsMaterial (line 26206) | function PointsMaterial( parameters ) {
function Points (line 26253) | function Points( geometry, material ) {
function testPoint (line 26303) | function testPoint( point, index ) {
function VideoTexture (line 26391) | function VideoTexture( video, mapping, wrapS, wrapT, magFilter, minFilte...
function CompressedTexture (line 26428) | function CompressedTexture( mipmaps, width, height, format, type, mappin...
function CanvasTexture (line 26456) | function CanvasTexture( canvas, mapping, wrapS, wrapT, magFilter, minFil...
function DepthTexture (line 26473) | function DepthTexture( width, height, type, mapping, wrapS, wrapT, magFi...
function WireframeGeometry (line 26507) | function WireframeGeometry( geometry ) {
function ParametricGeometry (line 26685) | function ParametricGeometry( func, slices, stacks ) {
function ParametricBufferGeometry (line 26707) | function ParametricBufferGeometry( func, slices, stacks ) {
function PolyhedronGeometry (line 26840) | function PolyhedronGeometry( vertices, indices, radius, detail ) {
function PolyhedronBufferGeometry (line 26863) | function PolyhedronBufferGeometry( vertices, indices, radius, detail ) {
function TetrahedronGeometry (line 27171) | function TetrahedronGeometry( radius, detail ) {
function TetrahedronBufferGeometry (line 27192) | function TetrahedronBufferGeometry( radius, detail ) {
function OctahedronGeometry (line 27223) | function OctahedronGeometry( radius, detail ) {
function OctahedronBufferGeometry (line 27244) | function OctahedronBufferGeometry( radius, detail ) {
function IcosahedronGeometry (line 27278) | function IcosahedronGeometry( radius, detail ) {
function IcosahedronBufferGeometry (line 27299) | function IcosahedronBufferGeometry( radius, detail ) {
function DodecahedronGeometry (line 27337) | function DodecahedronGeometry( radius, detail ) {
function DodecahedronBufferGeometry (line 27358) | function DodecahedronBufferGeometry( radius, detail ) {
function TubeGeometry (line 27425) | function TubeGeometry( path, tubularSegments, radius, radialSegments, cl...
function TubeBufferGeometry (line 27461) | function TubeBufferGeometry( path, tubularSegments, radius, radialSegmen...
function TorusKnotGeometry (line 27637) | function TorusKnotGeometry( radius, tube, tubularSegments, radialSegment...
function TorusKnotBufferGeometry (line 27664) | function TorusKnotBufferGeometry( radius, tube, tubularSegments, radialS...
function TorusGeometry (line 27823) | function TorusGeometry( radius, tube, radialSegments, tubularSegments, a...
function TorusBufferGeometry (line 27847) | function TorusBufferGeometry( radius, tube, radialSegments, tubularSegme...
function linkedList (line 28007) | function linkedList( data, start, end, dim, clockwise ) {
function filterPoints (line 28034) | function filterPoints( start, end ) {
function earcutLinked (line 28066) | function earcutLinked( ear, triangles, dim, minX, minY, invSize, pass ) {
function isEar (line 28137) | function isEar( ear ) {
function isEarHashed (line 28164) | function isEarHashed( ear, minX, minY, invSize ) {
function cureLocalIntersections (line 28217) | function cureLocalIntersections( start, triangles, dim ) {
function splitEarcut (line 28250) | function splitEarcut( start, triangles, dim, minX, minY, invSize ) {
function eliminateHoles (line 28293) | function eliminateHoles( data, holeIndices, outerNode, dim ) {
function compareX (line 28322) | function compareX( a, b ) {
function eliminateHole (line 28330) | function eliminateHole( hole, outerNode ) {
function findHoleBridge (line 28346) | function findHoleBridge( hole, outerNode ) {
function indexCurve (line 28426) | function indexCurve( start, minX, minY, invSize ) {
function sortLinked (line 28449) | function sortLinked( list ) {
function zOrder (line 28515) | function zOrder( x, y, minX, minY, invSize ) {
function getLeftmost (line 28538) | function getLeftmost( start ) {
function pointInTriangle (line 28555) | function pointInTriangle( ax, ay, bx, by, cx, cy, px, py ) {
function isValidDiagonal (line 28565) | function isValidDiagonal( a, b ) {
function area (line 28574) | function area( p, q, r ) {
function equals (line 28582) | function equals( p1, p2 ) {
function intersects (line 28590) | function intersects( p1, q1, p2, q2 ) {
function intersectsPolygon (line 28602) | function intersectsPolygon( a, b ) {
function locallyInside (line 28625) | function locallyInside( a, b ) {
function middleInside (line 28635) | function middleInside( a, b ) {
function splitPolygon (line 28662) | function splitPolygon( a, b ) {
function insertNode (line 28687) | function insertNode( i, x, y, last ) {
function removeNode (line 28709) | function removeNode( p ) {
function Node (line 28719) | function Node( i, x, y ) {
function signedArea (line 28744) | function signedArea( data, start, end, dim ) {
function removeDupEndPts (line 28829) | function removeDupEndPts( points ) {
function addContour (line 28841) | function addContour( vertices, contour ) {
function ExtrudeGeometry (line 28877) | function ExtrudeGeometry( shapes, options ) {
function ExtrudeBufferGeometry (line 28909) | function ExtrudeBufferGeometry( shapes, options ) {
function toJSON (line 29645) | function toJSON( shapes, options, data ) {
function TextGeometry (line 29696) | function TextGeometry( text, parameters ) {
function TextBufferGeometry (line 29717) | function TextBufferGeometry( text, parameters ) {
function SphereGeometry (line 29759) | function SphereGeometry( radius, widthSegments, heightSegments, phiStart...
function SphereBufferGeometry (line 29785) | function SphereBufferGeometry( radius, widthSegments, heightSegments, ph...
function RingGeometry (line 29903) | function RingGeometry( innerRadius, outerRadius, thetaSegments, phiSegme...
function RingBufferGeometry (line 29928) | function RingBufferGeometry( innerRadius, outerRadius, thetaSegments, ph...
function LatheGeometry (line 30048) | function LatheGeometry( points, segments, phiStart, phiLength ) {
function LatheBufferGeometry (line 30071) | function LatheBufferGeometry( points, segments, phiStart, phiLength ) {
function ShapeGeometry (line 30224) | function ShapeGeometry( shapes, curveSegments ) {
function ShapeBufferGeometry (line 30263) | function ShapeBufferGeometry( shapes, curveSegments ) {
function toJSON$1 (line 30406) | function toJSON$1( shapes, data ) {
function EdgesGeometry (line 30435) | function EdgesGeometry( geometry, thresholdAngle ) {
function CylinderGeometry (line 30543) | function CylinderGeometry( radiusTop, radiusBottom, height, radialSegmen...
function CylinderBufferGeometry (line 30570) | function CylinderBufferGeometry( radiusTop, radiusBottom, height, radial...
function ConeGeometry (line 30850) | function ConeGeometry( radius, height, radialSegments, heightSegments, o...
function ConeBufferGeometry (line 30873) | function ConeBufferGeometry( radius, height, radialSegments, heightSegme...
function CircleGeometry (line 30902) | function CircleGeometry( radius, segments, thetaStart, thetaLength ) {
function CircleBufferGeometry (line 30925) | function CircleBufferGeometry( radius, segments, thetaStart, thetaLength...
function ShadowMaterial (line 31062) | function ShadowMaterial( parameters ) {
function RawShaderMaterial (line 31094) | function RawShaderMaterial( parameters ) {
function MeshStandardMaterial (line 31159) | function MeshStandardMaterial( parameters ) {
function MeshPhysicalMaterial (line 31288) | function MeshPhysicalMaterial( parameters ) {
function MeshPhongMaterial (line 31376) | function MeshPhongMaterial( parameters ) {
function MeshToonMaterial (line 31497) | function MeshToonMaterial( parameters ) {
function MeshNormalMaterial (line 31553) | function MeshNormalMaterial( parameters ) {
function MeshLambertMaterial (line 31653) | function MeshLambertMaterial( parameters ) {
function MeshMatcapMaterial (line 31770) | function MeshMatcapMaterial( parameters ) {
function LineDashedMaterial (line 31860) | function LineDashedMaterial( parameters ) {
function compareTime (line 31963) | function compareTime( i, j ) {
function Interpolant (line 32100) | function Interpolant( parameterPositions, sampleValues, sampleSize, resu...
function CubicInterpolant (line 32345) | function CubicInterpolant( parameterPositions, sampleValues, sampleSize,...
function LinearInterpolant (line 32489) | function LinearInterpolant( parameterPositions, sampleValues, sampleSize...
function DiscreteInterpolant (line 32533) | function DiscreteInterpolant( parameterPositions, sampleValues, sampleSi...
function KeyframeTrack (line 32561) | function KeyframeTrack( name, times, values, interpolation ) {
function BooleanKeyframeTrack (line 33004) | function BooleanKeyframeTrack( name, times, values ) {
function ColorKeyframeTrack (line 33038) | function ColorKeyframeTrack( name, times, values, interpolation ) {
function NumberKeyframeTrack (line 33068) | function NumberKeyframeTrack( name, times, values, interpolation ) {
function QuaternionLinearInterpolant (line 33092) | function QuaternionLinearInterpolant( parameterPositions, sampleValues, ...
function QuaternionKeyframeTrack (line 33133) | function QuaternionKeyframeTrack( name, times, values, interpolation ) {
function StringKeyframeTrack (line 33169) | function StringKeyframeTrack( name, times, values, interpolation ) {
function VectorKeyframeTrack (line 33200) | function VectorKeyframeTrack( name, times, values, interpolation ) {
function AnimationClip (line 33226) | function AnimationClip( name, duration, tracks ) {
function getTrackTypeForValueTypeName (line 33243) | function getTrackTypeForValueTypeName( typeName ) {
function parseKeyframeTrack (line 33285) | function parseKeyframeTrack( json ) {
function LoadingManager (line 33707) | function LoadingManager( onLoad, onProgress, onError ) {
function FileLoader (line 33805) | function FileLoader( manager ) {
function AnimationLoader (line 34117) | function AnimationLoader( manager ) {
function CompressedTextureLoader (line 34170) | function CompressedTextureLoader( manager ) {
function loadTexture (line 34194) | function loadTexture( i ) {
function DataTextureLoader (line 34304) | function DataTextureLoader( manager ) {
function ImageLoader (line 34398) | function ImageLoader( manager ) {
function onImageLoad (line 34438) | function onImageLoad() {
function onImageError (line 34451) | function onImageError( event ) {
function CubeTextureLoader (line 34501) | function CubeTextureLoader( manager ) {
function loadTexture (line 34521) | function loadTexture( i ) {
function TextureLoader (line 34572) | function TextureLoader( manager ) {
function Curve (line 34663) | function Curve() {
function EllipseCurve (line 35047) | function EllipseCurve( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle,...
function ArcCurve (line 35199) | function ArcCurve( aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise ) {
function CubicPoly (line 35234) | function CubicPoly() {
function CatmullRomCurve3 (line 35294) | function CatmullRomCurve3( points, closed, curveType, tension ) {
function CatmullRom (line 35469) | function CatmullRom( t, p0, p1, p2, p3 ) {
function QuadraticBezierP0 (line 35481) | function QuadraticBezierP0( t, p ) {
function QuadraticBezierP1 (line 35488) | function QuadraticBezierP1( t, p ) {
function QuadraticBezierP2 (line 35494) | function QuadraticBezierP2( t, p ) {
function QuadraticBezier (line 35500) | function QuadraticBezier( t, p0, p1, p2 ) {
function CubicBezierP0 (line 35509) | function CubicBezierP0( t, p ) {
function CubicBezierP1 (line 35516) | function CubicBezierP1( t, p ) {
function CubicBezierP2 (line 35523) | function CubicBezierP2( t, p ) {
function CubicBezierP3 (line 35529) | function CubicBezierP3( t, p ) {
function CubicBezier (line 35535) | function CubicBezier( t, p0, p1, p2, p3 ) {
function CubicBezierCurve (line 35542) | function CubicBezierCurve( v0, v1, v2, v3 ) {
function CubicBezierCurve3 (line 35614) | function CubicBezierCurve3( v0, v1, v2, v3 ) {
function LineCurve (line 35687) | function LineCurve( v1, v2 ) {
function LineCurve3 (line 35771) | function LineCurve3( v1, v2 ) {
function QuadraticBezierCurve (line 35847) | function QuadraticBezierCurve( v0, v1, v2 ) {
function QuadraticBezierCurve3 (line 35915) | function QuadraticBezierCurve3( v0, v1, v2 ) {
function SplineCurve (line 35984) | function SplineCurve( points /* array of Vector2 */ ) {
function CurvePath (line 36100) | function CurvePath() {
function Path (line 36351) | function Path( points ) {
function Shape (line 36530) | function Shape( points ) {
function Light (line 36634) | function Light( color, intensity ) {
function HemisphereLight (line 36690) | function HemisphereLight( skyColor, groundColor, intensity ) {
function LightShadow (line 36727) | function LightShadow( camera ) {
function SpotLightShadow (line 36783) | function SpotLightShadow() {
function SpotLight (line 36820) | function SpotLight( color, intensity, distance, angle, penumbra, decay ) {
function PointLight (line 36887) | function PointLight( color, intensity, distance, decay ) {
function OrthographicCamera (line 36943) | function OrthographicCamera( left, right, top, bottom, near, far ) {
function DirectionalLightShadow (line 37084) | function DirectionalLightShadow( ) {
function DirectionalLight (line 37101) | function DirectionalLight( color, intensity ) {
function AmbientLight (line 37140) | function AmbientLight( color, intensity ) {
function RectAreaLight (line 37162) | function RectAreaLight( color, intensity, width, height ) {
function MaterialLoader (line 37207) | function MaterialLoader( manager ) {
function getTexture (line 37234) | function getTexture( name ) {
function BufferGeometryLoader (line 37485) | function BufferGeometryLoader( manager ) {
function ObjectLoader (line 37594) | function ObjectLoader( manager ) {
function loadImage (line 38071) | function loadImage( url ) {
function parseConstant (line 38136) | function parseConstant( value, type ) {
function getGeometry (line 38225) | function getGeometry( name ) {
function getMaterial (line 38237) | function getMaterial( name ) {
function ImageBitmapLoader (line 38538) | function ImageBitmapLoader( manager ) {
function ShapePath (line 38644) | function ShapePath() {
function toShapesNoHoles (line 38691) | function toShapesNoHoles( inSubpaths ) {
function isPointInsidePolygon (line 38710) | function isPointInsidePolygon( inPt, inPolygon ) {
function Font (line 38924) | function Font( data ) {
function createPaths (line 38955) | function createPaths( text, size, data ) {
function createPath (line 38988) | function createPath( char, scale, offsetX, offsetY, data ) {
function FontLoader (line 39064) | function FontLoader( manager ) {
function Loader (line 39120) | function Loader() {}
function loadTexture (line 39200) | function loadTexture( path, repeat, offset, wrap, anisotropy ) {
function AudioLoader (line 39467) | function AudioLoader( manager ) {
function StereoCamera (line 39510) | function StereoCamera() {
function CubeCamera (line 39605) | function CubeCamera( near, far, cubeResolution, options ) {
function Clock (line 39707) | function Clock( autoStart ) {
function AudioListener (line 39778) | function AudioListener() {
function Audio (line 39917) | function Audio( listener ) {
function PositionalAudio (line 40255) | function PositionalAudio( listener ) {
function AudioAnalyser (line 40391) | function AudioAnalyser( audio, fftSize ) {
function PropertyMixer (line 40438) | function PropertyMixer( binding, typeName, valueSize ) {
function Composite (line 40646) | function Composite( targetGroup, path, optionalParsedPath ) {
function PropertyBinding (line 40708) | function PropertyBinding( rootNode, path, parsedPath ) {
function AnimationObjectGroup (line 41386) | function AnimationObjectGroup() {
function AnimationAction (line 41742) | function AnimationAction( mixer, clip, localRoot ) {
function AnimationMixer (line 42411) | function AnimationMixer( root ) {
method total (line 42591) | get total() {
method inUse (line 42596) | get inUse() {
method total (line 42603) | get total() {
method inUse (line 42608) | get inUse() {
method total (line 42615) | get total() {
method inUse (line 42620) | get inUse() {
function Uniform (line 43157) | function Uniform( value ) {
function InstancedBufferGeometry (line 43180) | function InstancedBufferGeometry() {
function InstancedInterleavedBuffer (line 43217) | function InstancedInterleavedBuffer( array, stride, meshPerAttribute ) {
function InstancedBufferAttribute (line 43247) | function InstancedBufferAttribute( array, itemSize, normalized, meshPerA...
function Raycaster (line 43289) | function Raycaster( origin, direction, near, far ) {
function ascSort (line 43318) | function ascSort( a, b ) {
function intersectObject (line 43324) | function intersectObject( object, raycaster, intersects, recursive ) {
function Spherical (line 43423) | function Spherical( radius, phi, theta ) {
function Cylindrical (line 43506) | function Cylindrical( radius, theta, y ) {
function Box2 (line 43566) | function Box2( min, max ) {
function Line3 (line 43806) | function Line3( start, end ) {
function ImmediateRenderObject (line 43953) | function ImmediateRenderObject( material ) {
function VertexNormalsHelper (line 43972) | function VertexNormalsHelper( object, size, hex, linewidth ) {
function SpotLightHelper (line 44117) | function SpotLightHelper( light, color ) {
function getBoneList (line 44211) | function getBoneList( object ) {
function SkeletonHelper (line 44231) | function SkeletonHelper( object ) {
function PointLightHelper (line 44325) | function PointLightHelper( light, sphereSize, color ) {
function RectAreaLightHelper (line 44414) | function RectAreaLightHelper( light, color ) {
function HemisphereLightHelper (line 44488) | function HemisphereLightHelper( light, size, color ) {
function GridHelper (line 44571) | function GridHelper( size, divisions, color1, color2 ) {
function PolarGridHelper (line 44617) | function PolarGridHelper( radius, radials, circles, divisions, color1, c...
function FaceNormalsHelper (line 44703) | function FaceNormalsHelper( object, size, hex, linewidth ) {
function DirectionalLightHelper (line 44813) | function DirectionalLightHelper( light, size, color ) {
function CameraHelper (line 44906) | function CameraHelper( camera ) {
function setPoint (line 45020) | function setPoint( point, x, y, z ) {
function BoxHelper (line 45100) | function BoxHelper( object, color ) {
function Box3Helper (line 45212) | function Box3Helper( box, hex ) {
function PlaneHelper (line 45259) | function PlaneHelper( plane, size, hex ) {
function ArrowHelper (line 45326) | function ArrowHelper( dir, origin, length, color, headLength, headWidth ) {
function AxesHelper (line 45441) | function AxesHelper( size ) {
function Face4 (line 45474) | function Face4( a, b, c, d, normal, color, materialIndex ) {
function MeshFaceMaterial (line 45485) | function MeshFaceMaterial( materials ) {
function MultiMaterial (line 45492) | function MultiMaterial( materials ) {
function PointCloud (line 45508) | function PointCloud( geometry, material ) {
function Particle (line 45515) | function Particle( material ) {
function ParticleSystem (line 45522) | function ParticleSystem( geometry, material ) {
function PointCloudMaterial (line 45529) | function PointCloudMaterial( parameters ) {
function ParticleBasicMaterial (line 45536) | function ParticleBasicMaterial( parameters ) {
function ParticleSystemMaterial (line 45543) | function ParticleSystemMaterial( parameters ) {
function Vertex (line 45550) | function Vertex( x, y, z ) {
function DynamicBufferAttribute (line 45559) | function DynamicBufferAttribute( array, itemSize ) {
function Int8Attribute (line 45566) | function Int8Attribute( array, itemSize ) {
function Uint8Attribute (line 45573) | function Uint8Attribute( array, itemSize ) {
function Uint8ClampedAttribute (line 45580) | function Uint8ClampedAttribute( array, itemSize ) {
function Int16Attribute (line 45587) | function Int16Attribute( array, itemSize ) {
function Uint16Attribute (line 45594) | function Uint16Attribute( array, itemSize ) {
function Int32Attribute (line 45601) | function Int32Attribute( array, itemSize ) {
function Uint32Attribute (line 45608) | function Uint32Attribute( array, itemSize ) {
function Float32Attribute (line 45615) | function Float32Attribute( array, itemSize ) {
function Float64Attribute (line 45622) | function Float64Attribute( array, itemSize ) {
function ClosedSplineCurve3 (line 45703) | function ClosedSplineCurve3( points ) {
function SplineCurve3 (line 45717) | function SplineCurve3( points ) {
function Spline (line 45730) | function Spline( points ) {
function AxisHelper (line 45763) | function AxisHelper( size ) {
function BoundingBoxHelper (line 45770) | function BoundingBoxHelper( object, color ) {
function EdgesHelper (line 45777) | function EdgesHelper( object, hex ) {
function WireframeHelper (line 45796) | function WireframeHelper( object, hex ) {
function XHRLoader (line 45816) | function XHRLoader( manager ) {
function BinaryTextureLoader (line 45823) | function BinaryTextureLoader( manager ) {
function Projector (line 47245) | function Projector() {
function CanvasRenderer (line 47273) | function CanvasRenderer() {
function JSONLoader (line 47281) | function JSONLoader() {
function LensFlare (line 47313) | function LensFlare() {
FILE: WebContent/js/shader-example-2d.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-3d.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-debug.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-dla.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-evolve.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-evolveImage.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-filters.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-galaxies.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-gravity.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-mountains.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-postprocessing.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-repulsion.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-sphere.js
function runSketch (line 5) | function runSketch() {
FILE: WebContent/js/shader-example-stippling.js
function runSketch (line 5) | function runSketch() {
Condensed preview — 214 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,961K chars).
[
{
"path": ".gitignore",
"chars": 46,
"preview": "node_modules\npackage-lock.json\n\n/.sass-cache/\n"
},
{
"path": ".project",
"chars": 214,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<projectDescription>\n\t<name>webgl-shader-examples</name>\n\t<comment></comment>\n\t<p"
},
{
"path": "Gruntfile.js",
"chars": 9333,
"preview": "module.exports = function(grunt) {\n\n\t/*\n\t * Defines the grunt-replace parameters that will fill the html template file f"
},
{
"path": "LICENSE",
"chars": 7651,
"preview": " GNU LESSER GENERAL PUBLIC LICENSE\n Version 3, 29 June 2007\n\n Copyright (C) 2007"
},
{
"path": "README.md",
"chars": 934,
"preview": "# WebGL shader examples\n\nSome simple examples of WebGL shaders. They can be seen live at [webgl-shaders.com](https://web"
},
{
"path": "WebContent/.htaccess",
"chars": 108,
"preview": "RewriteEngine On\nRewriteCond %{HTTPS} !=on\nRewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]\n\n"
},
{
"path": "WebContent/about.html",
"chars": 3431,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/attraction-example.html",
"chars": 4843,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/badtv-example.html",
"chars": 4787,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/blur-example.html",
"chars": 5854,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/css/styles.css",
"chars": 11840,
"preview": "/*\n * Normalize\n *\n * v8.0.0 | MIT License | github.com/necolas/normalize.css\n */\nhtml {\n line-height: 1.15;\n -webkit-"
},
{
"path": "WebContent/cursor-example.html",
"chars": 3348,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/cuts-example.html",
"chars": 3767,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/debug-example.html",
"chars": 3500,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/deform-example.html",
"chars": 4555,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/dla-example.html",
"chars": 6637,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/dots-example.html",
"chars": 4364,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/edge-example.html",
"chars": 4481,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/fire-example.html",
"chars": 6155,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/flare-example.html",
"chars": 6852,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/galaxies-example.html",
"chars": 5805,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/gravity-example.html",
"chars": 5776,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/index.html",
"chars": 4381,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/js/libs/CopyShader.js",
"chars": 622,
"preview": "/**\n * @author alteredq / http://alteredqualia.com/\n *\n * Full-screen textured quad shader\n */\n\nTHREE.CopyShader = {\n\n\tu"
},
{
"path": "WebContent/js/libs/EffectComposer.js",
"chars": 3727,
"preview": "/**\n * @author alteredq / http://alteredqualia.com/\n */\n\nTHREE.EffectComposer = function ( renderer, renderTarget ) {\n\n\t"
},
{
"path": "WebContent/js/libs/GPUComputationRenderer.js",
"chars": 10358,
"preview": "/**\n * @author yomboprime https://github.com/yomboprime\n *\n * GPUComputationRenderer, based on SimulationRenderer by zz8"
},
{
"path": "WebContent/js/libs/MaskPass.js",
"chars": 2036,
"preview": "/**\n * @author alteredq / http://alteredqualia.com/\n */\n\nTHREE.MaskPass = function ( scene, camera ) {\n\n\tTHREE.Pass.call"
},
{
"path": "WebContent/js/libs/OrbitControls.js",
"chars": 22658,
"preview": "/**\n * @author qiao / https://github.com/qiao\n * @author mrdoob / http://mrdoob.com\n * @author alteredq / http://altered"
},
{
"path": "WebContent/js/libs/RenderPass.js",
"chars": 1334,
"preview": "/**\n * @author alteredq / http://alteredqualia.com/\n */\n\nTHREE.RenderPass = function ( scene, camera, overrideMaterial, "
},
{
"path": "WebContent/js/libs/ShaderPass.js",
"chars": 1429,
"preview": "/**\n * @author alteredq / http://alteredqualia.com/\n */\n\nTHREE.ShaderPass = function ( shader, textureID ) {\n\n\tTHREE.Pas"
},
{
"path": "WebContent/js/libs/TrackballControls.js",
"chars": 13913,
"preview": "/**\n * @author Eberhard Graether / http://egraether.com/\n * @author Mark Lundin \t/ http://mark-lundin.com\n * @author Sim"
},
{
"path": "WebContent/js/libs/dat.gui.js",
"chars": 87038,
"preview": "/**\n * dat-gui JavaScript Controller Library\n * http://code.google.com/p/dat-gui\n *\n * Copyright 2011 Data Arts Team, Go"
},
{
"path": "WebContent/js/libs/stats.js",
"chars": 3817,
"preview": "(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory()"
},
{
"path": "WebContent/js/libs/three.js",
"chars": 1113165,
"preview": "(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n\ttypeof"
},
{
"path": "WebContent/js/shader-example-2d.js",
"chars": 3371,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, clock, stats, unifor"
},
{
"path": "WebContent/js/shader-example-3d.js",
"chars": 5588,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, clock, stats, contro"
},
{
"path": "WebContent/js/shader-example-debug.js",
"chars": 4004,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, gpuSimulator, positi"
},
{
"path": "WebContent/js/shader-example-dla.js",
"chars": 6667,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, clock, stats, simula"
},
{
"path": "WebContent/js/shader-example-evolve.js",
"chars": 5243,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, renderTarget1, renderTarget2, scene"
},
{
"path": "WebContent/js/shader-example-evolveImage.js",
"chars": 5723,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, renderTarget1, renderTarget2, scene"
},
{
"path": "WebContent/js/shader-example-filters.js",
"chars": 6438,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, clock, stats, contro"
},
{
"path": "WebContent/js/shader-example-galaxies.js",
"chars": 9117,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, stats, simulator, po"
},
{
"path": "WebContent/js/shader-example-gravity.js",
"chars": 6953,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, stats, simulator, po"
},
{
"path": "WebContent/js/shader-example-mountains.js",
"chars": 4928,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, clock, stats, skyCol"
},
{
"path": "WebContent/js/shader-example-postprocessing.js",
"chars": 6234,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, clock, stats, contro"
},
{
"path": "WebContent/js/shader-example-repulsion.js",
"chars": 7723,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, stats, simulator, po"
},
{
"path": "WebContent/js/shader-example-sphere.js",
"chars": 3954,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, clock, stats, unifor"
},
{
"path": "WebContent/js/shader-example-stippling.js",
"chars": 7952,
"preview": "window.onload = function() {\n\trunSketch();\n};\n\nfunction runSketch() {\n\tvar renderer, scene, camera, stats, simulator, po"
},
{
"path": "WebContent/lens-example.html",
"chars": 3419,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/mountains-example.html",
"chars": 7689,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/noise-example.html",
"chars": 5124,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/objects/suzanne_buffergeometry.json",
"chars": 24675,
"preview": "{\n \"metadata\":{\n \"position\":505,\n \"type\":\"BufferGeometry\",\n \"generator\":\"io_three\",\n \"ver"
},
{
"path": "WebContent/pencil-example.html",
"chars": 5285,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/pixelated-example.html",
"chars": 4023,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/pixels-example.html",
"chars": 3635,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/rain-example.html",
"chars": 6740,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/random-example.html",
"chars": 3215,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/reaction-example.html",
"chars": 4844,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/repulsion-example.html",
"chars": 7417,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/rgb-example.html",
"chars": 3979,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/shaders/frag-badtv.glsl",
"chars": 2034,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-blur.glsl",
"chars": 3486,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-cursor.glsl",
"chars": 976,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-cuts.glsl",
"chars": 1017,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-debug-pos.glsl",
"chars": 246,
"preview": "#define GLSLIFY 1\nvoid main() {\n vec2 uv = gl_FragCoord.xy / resolution;\n vec3 position = texture2D(u_positionText"
},
{
"path": "WebContent/shaders/frag-debug-vel.glsl",
"chars": 177,
"preview": "#define GLSLIFY 1\nvoid main() {\n vec2 uv = gl_FragCoord.xy / resolution;\n vec3 velocity = texture2D(u_velocityText"
},
{
"path": "WebContent/shaders/frag-debug.glsl",
"chars": 73,
"preview": "#define GLSLIFY 1\nvoid main() {\n gl_FragColor = vec4(vec3(1.0), 1);\n}\n"
},
{
"path": "WebContent/shaders/frag-dla-pos.glsl",
"chars": 2658,
"preview": "#define GLSLIFY 1\n/*\n * Random number generator with a vec2 seed\n *\n * Credits:\n * http://byteblacksmith.com/improvement"
},
{
"path": "WebContent/shaders/frag-dla-vel.glsl",
"chars": 18,
"preview": "#define GLSLIFY 1\n"
},
{
"path": "WebContent/shaders/frag-dla.glsl",
"chars": 455,
"preview": "#define GLSLIFY 1\n// Texture with the particle profile\nuniform sampler2D u_texture;\n\n// Varying with the aggregation inf"
},
{
"path": "WebContent/shaders/frag-dots.glsl",
"chars": 1817,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-edge.glsl",
"chars": 2113,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-fire.glsl",
"chars": 3789,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-flare.glsl",
"chars": 4483,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-galaxies-pos.glsl",
"chars": 464,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\n\n/*\n * The main program\n */\nvoid main() {\n // Get the pa"
},
{
"path": "WebContent/shaders/frag-galaxies-vel.glsl",
"chars": 1769,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\nuniform float u_mass;\nuniform float u_haloSize;\n\n// Simulat"
},
{
"path": "WebContent/shaders/frag-grav-pos.glsl",
"chars": 464,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\n\n/*\n * The main program\n */\nvoid main() {\n // Get the pa"
},
{
"path": "WebContent/shaders/frag-grav-vel.glsl",
"chars": 1752,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\n\n// Simulation constants\nconst float width = resolution.x;\n"
},
{
"path": "WebContent/shaders/frag-lens.glsl",
"chars": 1051,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-mountains.glsl",
"chars": 2243,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-noise.glsl",
"chars": 2854,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-normals.glsl",
"chars": 1585,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-pencil.glsl",
"chars": 2732,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-pixelated.glsl",
"chars": 1258,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-rain.glsl",
"chars": 4473,
"preview": "#define GLSLIFY 1\n#define PI 3.14159265\n\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform flo"
},
{
"path": "WebContent/shaders/frag-random.glsl",
"chars": 942,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-reaction.glsl",
"chars": 2466,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-repulsion-pos.glsl",
"chars": 825,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\n\n// Simulation constants\n"
},
{
"path": "WebContent/shaders/frag-repulsion-vel.glsl",
"chars": 2359,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\n\n// Simulation constants\n"
},
{
"path": "WebContent/shaders/frag-repulsion.glsl",
"chars": 280,
"preview": "#define GLSLIFY 1\n// Texture with the particle profile\nuniform sampler2D u_texture;\n\n// Particle color varying\nvarying v"
},
{
"path": "WebContent/shaders/frag-rgb.glsl",
"chars": 1232,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-sim.glsl",
"chars": 312,
"preview": "#define GLSLIFY 1\n// Texture with the particle profile\nuniform sampler2D u_texture;\n\n/*\n * The main program\n */\nvoid mai"
},
{
"path": "WebContent/shaders/frag-sort.glsl",
"chars": 4008,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-sphere.glsl",
"chars": 1771,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-stippling-pos.glsl",
"chars": 825,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\n\n// Simulation constants\n"
},
{
"path": "WebContent/shaders/frag-stippling-vel.glsl",
"chars": 3150,
"preview": "#define GLSLIFY 1\n// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\nuniform sampler2D u_bgTex"
},
{
"path": "WebContent/shaders/frag-stippling.glsl",
"chars": 233,
"preview": "#define GLSLIFY 1\n// Texture with the particle profile\nuniform sampler2D u_texture;\n\n/*\n * The main program\n */\nvoid mai"
},
{
"path": "WebContent/shaders/frag-stripes.glsl",
"chars": 1115,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-tile.glsl",
"chars": 3757,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-toon.glsl",
"chars": 1165,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/frag-wave.glsl",
"chars": 1029,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/vert-2d.glsl",
"chars": 128,
"preview": "#define GLSLIFY 1\n/*\n * The main program\n */\nvoid main() {\n // Vertex shader output\n gl_Position = vec4(position, "
},
{
"path": "WebContent/shaders/vert-3d.glsl",
"chars": 335,
"preview": "#define GLSLIFY 1\n// Common varyings\nvarying vec3 v_position;\nvarying vec3 v_normal;\n\n/*\n * The main program\n */\nvoid ma"
},
{
"path": "WebContent/shaders/vert-attraction.glsl",
"chars": 1023,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/vert-debug.glsl",
"chars": 364,
"preview": "#define GLSLIFY 1\nattribute float a_index;\n\nuniform float u_width;\nuniform float u_height;\nuniform sampler2D u_positionT"
},
{
"path": "WebContent/shaders/vert-deform.glsl",
"chars": 747,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/vert-dla.glsl",
"chars": 882,
"preview": "#define GLSLIFY 1\n// Particle index attribute\nattribute float a_index;\n\n// Simulation uniforms\nuniform float u_width;\nun"
},
{
"path": "WebContent/shaders/vert-filters.glsl",
"chars": 214,
"preview": "#define GLSLIFY 1\n// Texture varyings\nvarying vec2 v_uv;\n\n/*\n * The main program\n */\nvoid main() {\n // Calculate the "
},
{
"path": "WebContent/shaders/vert-mountains.glsl",
"chars": 3198,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/vert-repulsion.glsl",
"chars": 1281,
"preview": "#define GLSLIFY 1\n// Particle index attribute\nattribute float a_index;\n\n// Simulation uniforms\nuniform float u_width;\nun"
},
{
"path": "WebContent/shaders/vert-sim.glsl",
"chars": 606,
"preview": "#define GLSLIFY 1\n// Particle index attribute\nattribute float a_index;\n\n// Simulation uniforms\nuniform float u_width;\nun"
},
{
"path": "WebContent/shaders/vert-sphere.glsl",
"chars": 2823,
"preview": "#define GLSLIFY 1\n// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform floa"
},
{
"path": "WebContent/shaders/vert-stippling.glsl",
"chars": 1464,
"preview": "#define GLSLIFY 1\n// Particle index attribute\nattribute float a_index;\n\n// Simulation uniforms\nuniform float u_width;\nun"
},
{
"path": "WebContent/sort-example.html",
"chars": 6384,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/sphere-example.html",
"chars": 6824,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/stippling-example.html",
"chars": 8344,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/stripes-example.html",
"chars": 3671,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/tile-example.html",
"chars": 6024,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/toon-example.html",
"chars": 3712,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "WebContent/wave-example.html",
"chars": 3576,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "html/about.html",
"chars": 3431,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "html/index.html",
"chars": 4381,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "html/template-example-2d.html",
"chars": 2149,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "html/template-example-3d.html",
"chars": 2222,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "html/template-example-post.html",
"chars": 2517,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "html/template-example-sim.html",
"chars": 2668,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initia"
},
{
"path": "package.json",
"chars": 927,
"preview": "{\n\t\"name\": \"webgl-shader-examples\",\n\t\"version\": \"0.1.0\",\n\t\"description\": \"Some simple examples of WebGL shaders\",\n\t\"main"
},
{
"path": "sass/originals/_normalize.scss",
"chars": 6052,
"preview": "/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ==========================="
},
{
"path": "sass/partials/_base.scss",
"chars": 745,
"preview": "/*\n * General styling\n */\n\n*, *:before, *:after {\n\tbox-sizing: border-box;\n}\n\nbody {\n\tfont-family: \"HelveticaNeue-Light\""
},
{
"path": "sass/partials/_content.scss",
"chars": 1179,
"preview": "/*\n * Content components\n */\n\n.main-container {\n\tpadding: $main-container-top-padding $container-sides-padding 0 $contai"
},
{
"path": "sass/partials/_fonts.scss",
"chars": 3855,
"preview": "/*\n * Fonts declarations\n */\n\n@font-face {\n\tfont-family: \"Font Awesome 4.7\";\n\tfont-style: normal;\n\tfont-weight: normal;\n"
},
{
"path": "sass/partials/_footer.scss",
"chars": 359,
"preview": "/*\n * Footer components\n */\n\n.footer-container {\n\tpadding: 0 $container-sides-padding;\n}\n\n.footer-content {\n\tborder-top:"
},
{
"path": "sass/partials/_layout.scss",
"chars": 801,
"preview": "/*\n * General layout\n */\n\nhtml, body {\n\theight: 100%;\n}\n\n\n// First flexbox group\n\nbody {\n\tdisplay: flex;\n\tflex-direction"
},
{
"path": "sass/partials/_navbar.scss",
"chars": 2154,
"preview": "/*\n * Navigation bar components\n */\n\n.nav-container {\n\twidth: 100%;\n\tpadding: $nav-padding;\n\tborder-bottom: $nav-border "
},
{
"path": "sass/partials/_normalize.scss",
"chars": 2195,
"preview": "/*\n * Normalize\n *\n * v8.0.0 | MIT License | github.com/necolas/normalize.css\n */\nhtml {\n\tline-height: 1.15;\n\t-webkit-te"
},
{
"path": "sass/partials/_sketch.scss",
"chars": 342,
"preview": "/*\n * Sketch components\n */\n\n.sketch-container {\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\t\n\tcanvas {\n\t\tdisplay: block;\n"
},
{
"path": "sass/partials/_variables.scss",
"chars": 1832,
"preview": "// Media queries breakpoint variables\n$S: 480px; // 30em for 16px body font\n$M: 816px; // 51em for 16px body font\n$L: "
},
{
"path": "sass/styles.scss",
"chars": 248,
"preview": "\n@import \"partials/variables\";\n@import \"partials/normalize\";\n@import \"partials/fonts\";\n@import \"partials/base\";\n@import "
},
{
"path": "shaders/frag-badtv.glsl",
"chars": 1107,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-blur.glsl",
"chars": 3438,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-cursor.glsl",
"chars": 761,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-cuts.glsl",
"chars": 874,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-debug-pos.glsl",
"chars": 228,
"preview": "void main() {\n vec2 uv = gl_FragCoord.xy / resolution;\n vec3 position = texture2D(u_positionTexture, uv).xyz;\n "
},
{
"path": "shaders/frag-debug-vel.glsl",
"chars": 159,
"preview": "void main() {\n vec2 uv = gl_FragCoord.xy / resolution;\n vec3 velocity = texture2D(u_velocityTexture, uv).xyz;\n\n "
},
{
"path": "shaders/frag-debug.glsl",
"chars": 55,
"preview": "void main() {\n gl_FragColor = vec4(vec3(1.0), 1);\n}\n"
},
{
"path": "shaders/frag-dla-pos.glsl",
"chars": 2254,
"preview": "#pragma glslify: random = require(\"./requires/random2d\")\n\n// Simulation uniforms\nuniform float u_minDistance;\nuniform fl"
},
{
"path": "shaders/frag-dla-vel.glsl",
"chars": 0,
"preview": ""
},
{
"path": "shaders/frag-dla.glsl",
"chars": 437,
"preview": "// Texture with the particle profile\nuniform sampler2D u_texture;\n\n// Varying with the aggregation information\nvarying f"
},
{
"path": "shaders/frag-dots.glsl",
"chars": 1261,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/frag-edge.glsl",
"chars": 2065,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-fire.glsl",
"chars": 1981,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-flare.glsl",
"chars": 2674,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-galaxies-pos.glsl",
"chars": 446,
"preview": "// Simulation uniforms\nuniform float u_dt;\n\n/*\n * The main program\n */\nvoid main() {\n // Get the particle texture pos"
},
{
"path": "shaders/frag-galaxies-vel.glsl",
"chars": 1751,
"preview": "// Simulation uniforms\nuniform float u_dt;\nuniform float u_mass;\nuniform float u_haloSize;\n\n// Simulation constants\ncons"
},
{
"path": "shaders/frag-grav-pos.glsl",
"chars": 446,
"preview": "// Simulation uniforms\nuniform float u_dt;\n\n/*\n * The main program\n */\nvoid main() {\n // Get the particle texture pos"
},
{
"path": "shaders/frag-grav-vel.glsl",
"chars": 1734,
"preview": "// Simulation uniforms\nuniform float u_dt;\n\n// Simulation constants\nconst float width = resolution.x;\nconst float height"
},
{
"path": "shaders/frag-lens.glsl",
"chars": 1003,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-mountains.glsl",
"chars": 1479,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/frag-noise.glsl",
"chars": 1018,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: noise = require(\"./requires/classicNoise2d\")\n\n"
},
{
"path": "shaders/frag-normals.glsl",
"chars": 821,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/frag-pencil.glsl",
"chars": 2181,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/frag-pixelated.glsl",
"chars": 1210,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-rain.glsl",
"chars": 4153,
"preview": "#define PI 3.14159265\n\n#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: random = require(\"./req"
},
{
"path": "shaders/frag-random.glsl",
"chars": 479,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: random = require(\"./requires/random2d\")\n\n/*\n *"
},
{
"path": "shaders/frag-reaction.glsl",
"chars": 1688,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-repulsion-pos.glsl",
"chars": 807,
"preview": "// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\n\n// Simulation constants\nconst float width "
},
{
"path": "shaders/frag-repulsion-vel.glsl",
"chars": 2341,
"preview": "// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\n\n// Simulation constants\nconst float width "
},
{
"path": "shaders/frag-repulsion.glsl",
"chars": 262,
"preview": "// Texture with the particle profile\nuniform sampler2D u_texture;\n\n// Particle color varying\nvarying vec3 v_color;\n\n/*\n "
},
{
"path": "shaders/frag-rgb.glsl",
"chars": 1184,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-sim.glsl",
"chars": 294,
"preview": "// Texture with the particle profile\nuniform sampler2D u_texture;\n\n/*\n * The main program\n */\nvoid main() {\n // Get t"
},
{
"path": "shaders/frag-sort.glsl",
"chars": 3960,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/textureUniforms.glsl\")\n#prag"
},
{
"path": "shaders/frag-sphere.glsl",
"chars": 1007,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/frag-stippling-pos.glsl",
"chars": 807,
"preview": "// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\n\n// Simulation constants\nconst float width "
},
{
"path": "shaders/frag-stippling-vel.glsl",
"chars": 3132,
"preview": "// Simulation uniforms\nuniform float u_dt;\nuniform float u_nActiveParticles;\nuniform sampler2D u_bgTexture;\nuniform vec2"
},
{
"path": "shaders/frag-stippling.glsl",
"chars": 215,
"preview": "// Texture with the particle profile\nuniform sampler2D u_texture;\n\n/*\n * The main program\n */\nvoid main() {\n // Fragm"
},
{
"path": "shaders/frag-stripes.glsl",
"chars": 821,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/frag-tile.glsl",
"chars": 1891,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: square = require(\"./requires/shapes/square\")\n#"
},
{
"path": "shaders/frag-toon.glsl",
"chars": 871,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/frag-wave.glsl",
"chars": 735,
"preview": "#pragma glslify: import(\"./imports/commonUniforms.glsl\")\n#pragma glslify: import(\"./imports/commonVaryings3d.glsl\")\n#pra"
},
{
"path": "shaders/imports/commonUniforms.glsl",
"chars": 113,
"preview": "// Common uniforms\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\nuniform float u_frame;\n"
},
{
"path": "shaders/imports/commonVaryings3d.glsl",
"chars": 67,
"preview": "// Common varyings\nvarying vec3 v_position;\nvarying vec3 v_normal;\n"
},
{
"path": "shaders/imports/textureUniforms.glsl",
"chars": 49,
"preview": "// Texture uniforms\nuniform sampler2D u_texture;\n"
},
{
"path": "shaders/imports/textureVaryings.glsl",
"chars": 39,
"preview": "// Texture varyings\nvarying vec2 v_uv;\n"
},
{
"path": "shaders/requires/calculateNormal.glsl",
"chars": 584,
"preview": "/*\n * Calculates the normal vector at the given position\n *\n * Uses this fix for some mobiles:\n * https://stackoverfl"
},
{
"path": "shaders/requires/classicNoise2d.glsl",
"chars": 1853,
"preview": "/*\n * GLSL textureless classic 2D noise \"cnoise\",\n * with an RSL-style periodic variant \"pnoise\".\n * Author: Stefan Gus"
},
{
"path": "shaders/requires/diffuseFactor.glsl",
"chars": 319,
"preview": "/*\n * Calculates the diffuse factor produced by the light illumination\n */\nfloat diffuseFactor(vec3 normal, vec3 light_"
},
{
"path": "shaders/requires/kernels/edgeKernel.glsl",
"chars": 188,
"preview": "// Edge detection kernel\nconst mat3 kernel = mat3(-1.0, -1.0, -1.0,\n -1.0, +8.0, -1.0,\n "
},
{
"path": "shaders/requires/kernels/gaussianKernel.glsl",
"chars": 248,
"preview": "// Approximate gaussian kernel\nconst mat3 kernel = mat3(1.0 / 16.0, 2.0 / 16.0, 1.0 / 16.0,\n 2.0"
},
{
"path": "shaders/requires/laplacian.glsl",
"chars": 826,
"preview": "/*\n * Calculates the Laplacian at a given texture position\n */\nvec4 laplacian(vec2 uv, sampler2D texture, vec2 texture_"
},
{
"path": "shaders/requires/noise1d.glsl",
"chars": 338,
"preview": "#pragma glslify: random1d = require(\"./random1d\")\n\n/*\n * Pseudo-noise generator\n *\n * Credits:\n * https://thebookofshade"
},
{
"path": "shaders/requires/random1d.glsl",
"chars": 333,
"preview": "/*\n * Random number generator with a float seed\n *\n * Credits:\n * http://byteblacksmith.com/improvements-to-the-canonica"
},
{
"path": "shaders/requires/random2d.glsl",
"chars": 476,
"preview": "/*\n * Random number generator with a vec2 seed\n *\n * Credits:\n * http://byteblacksmith.com/improvements-to-the-canonical"
},
{
"path": "shaders/requires/rotate2d.glsl",
"chars": 184,
"preview": "/*\n * Returns a rotation matrix for the given angle\n */\nmat2 rotate(float angle) {\n return mat2(cos(angle), -sin(angl"
},
{
"path": "shaders/requires/shapes/circle.glsl",
"chars": 261,
"preview": "/*\n * Returns a value between 1 and 0 that indicates if the pixel is inside the circle\n */\nfloat circle(vec2 pixel, vec2"
},
{
"path": "shaders/requires/shapes/ellipse.glsl",
"chars": 388,
"preview": "/*\n * Returns a value between 1 and 0 that indicates if the pixel is inside the ellipse\n */\nfloat ellipse(vec2 pixel, ve"
},
{
"path": "shaders/requires/shapes/horizontalLine.glsl",
"chars": 280,
"preview": "/*\n * Returns a value between 1 and 0 that indicates if the pixel is inside the horizontal line\n */\nfloat horizontalLine"
},
{
"path": "shaders/requires/shapes/line.glsl",
"chars": 454,
"preview": "/*\n * Returns a value between 1 and 0 that indicates if the pixel is inside the line\n */\nfloat line(vec2 pixel, vec2 poi"
},
{
"path": "shaders/requires/shapes/lineSegment.glsl",
"chars": 657,
"preview": "/*\n * Returns a value between 1 and 0 that indicates if the pixel is inside the line segment\n */\nfloat lineSegment(vec2 "
},
{
"path": "shaders/requires/shapes/rectangle.glsl",
"chars": 449,
"preview": "/*\n * Returns a value between 1 and 0 that indicates if the pixel is inside the rectangle\n */\nfloat rectangle(vec2 pixel"
},
{
"path": "shaders/requires/shapes/square.glsl",
"chars": 439,
"preview": "/*\n * Returns a value between 1 and 0 that indicates if the pixel is inside the square\n */\nfloat square(vec2 pixel, vec2"
}
]
// ... and 14 more files (download for full content)
About this extraction
This page contains the full source code of the jagracar/webgl-shader-examples GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 214 files (1.7 MB), approximately 515.1k tokens, and a symbol index with 521 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.