├── .gitignore ├── LICENSE ├── README.md ├── assets ├── audio │ ├── demo-it.mp3 │ └── demo-it.txt ├── cubemaps │ ├── ForestReflection.dds │ ├── hamarikyu_bridge_cube_pmrem32f.dds │ ├── pisa_negx.jpg │ ├── pisa_negy.jpg │ ├── pisa_negz.jpg │ ├── pisa_posx.jpg │ ├── pisa_posy.jpg │ ├── pisa_posz.jpg │ ├── pisa_preview.jpg │ ├── uffizi │ │ ├── uffizi_cross_negx.jpg │ │ ├── uffizi_cross_negy.jpg │ │ ├── uffizi_cross_negz.jpg │ │ ├── uffizi_cross_posx.jpg │ │ ├── uffizi_cross_posy.jpg │ │ └── uffizi_cross_posz.jpg │ └── uffizi_lod │ │ ├── uffizi_m00_c00.png │ │ ├── uffizi_m00_c01.png │ │ ├── uffizi_m00_c02.png │ │ ├── uffizi_m00_c03.png │ │ ├── uffizi_m00_c04.png │ │ ├── uffizi_m00_c05.png │ │ ├── uffizi_m01_c00.png │ │ ├── uffizi_m01_c01.png │ │ ├── uffizi_m01_c02.png │ │ ├── uffizi_m01_c03.png │ │ ├── uffizi_m01_c04.png │ │ ├── uffizi_m01_c05.png │ │ ├── uffizi_m02_c00.png │ │ ├── uffizi_m02_c01.png │ │ ├── uffizi_m02_c02.png │ │ ├── uffizi_m02_c03.png │ │ ├── uffizi_m02_c04.png │ │ ├── uffizi_m02_c05.png │ │ ├── uffizi_m03_c00.png │ │ ├── uffizi_m03_c01.png │ │ ├── uffizi_m03_c02.png │ │ ├── uffizi_m03_c03.png │ │ ├── uffizi_m03_c04.png │ │ ├── uffizi_m03_c05.png │ │ ├── uffizi_m04_c00.png │ │ ├── uffizi_m04_c01.png │ │ ├── uffizi_m04_c02.png │ │ ├── uffizi_m04_c03.png │ │ ├── uffizi_m04_c04.png │ │ ├── uffizi_m04_c05.png │ │ ├── uffizi_m05_c00.png │ │ ├── uffizi_m05_c01.png │ │ ├── uffizi_m05_c02.png │ │ ├── uffizi_m05_c03.png │ │ ├── uffizi_m05_c04.png │ │ ├── uffizi_m05_c05.png │ │ ├── uffizi_m06_c00.png │ │ ├── uffizi_m06_c01.png │ │ ├── uffizi_m06_c02.png │ │ ├── uffizi_m06_c03.png │ │ ├── uffizi_m06_c04.png │ │ ├── uffizi_m06_c05.png │ │ ├── uffizi_m07_c00.png │ │ ├── uffizi_m07_c01.png │ │ ├── uffizi_m07_c02.png │ │ ├── uffizi_m07_c03.png │ │ ├── uffizi_m07_c04.png │ │ ├── uffizi_m07_c05.png │ │ ├── uffizi_m08_c00.png │ │ ├── uffizi_m08_c01.png │ │ ├── uffizi_m08_c02.png │ │ ├── uffizi_m08_c03.png │ │ ├── uffizi_m08_c04.png │ │ └── uffizi_m08_c05.png ├── glsl │ ├── Basic.frag │ ├── Basic.vert │ ├── ReflectionCubemap.frag │ ├── ReflectionCubemap.vert │ ├── ReflectionEquirect.frag │ ├── ReflectionEquirect.vert │ ├── RepeatedTexture.frag │ ├── RepeatedTexture.vert │ ├── ShowColors.frag │ ├── ShowColors.vert │ ├── ShowNormals.frag │ ├── ShowNormals.vert │ ├── ShowNormalsInstanced.frag │ ├── ShowNormalsInstanced.vert │ ├── ShowTexCoords.frag │ ├── ShowTexCoords.vert │ ├── SkyboxCubemap.frag │ ├── SkyboxCubemap.vert │ ├── SkyboxEnvMap.frag │ ├── SkyboxEnvMap.vert │ ├── SolidColor.frag │ ├── SolidColor.vert │ ├── Textured.frag │ └── Textured.vert ├── palettes │ ├── example.png │ └── rainbow.jpg ├── text │ ├── data.json │ ├── loremipsum.json │ └── loremipsum.txt └── textures │ ├── envmap.jpg │ ├── envmap_blur.jpg │ ├── envmap_blur2.jpg │ ├── grass.png │ ├── matcaps │ ├── MatcapBronze.jpg │ ├── MatcapBronze.txt │ ├── generator11.jpg │ ├── generator11.txt │ ├── green_glass_860.png │ ├── green_glass_860.txt │ ├── plastic_red.jpg │ └── plastic_red.txt │ ├── noise.png │ ├── opengl.png │ ├── palette_green.png │ ├── plask.png │ ├── sprite_brush.png │ ├── test.png │ ├── testcard.jpg │ ├── var.png │ └── webgl.png ├── cam.Arcball └── main.js ├── context.Mesh.divisor └── main.js ├── context.Texture.flip ├── README.md └── main.js ├── context.Texture.mipmap └── main.js ├── context.TextureCube.dynamic └── main.js ├── context.createMesh └── main.js ├── context.createTextureCube └── main.js ├── context.transform └── main.js ├── draw.drawRect.textured └── main.js ├── draw └── main.js ├── geom.Plane └── main.js ├── geom.Ray └── main.js ├── geom.Rect └── main.js ├── gui └── main.js ├── io.loadBinary └── main.js ├── io.loadImage └── main.js ├── io.loadJSON └── main.js ├── io.loadText └── main.js ├── package.json ├── random └── main.js ├── sys.Keyboard └── main.js ├── sys.Mouse └── main.js ├── sys.ResourceLoader └── main.js ├── sys.Screen └── main.js ├── sys.Window.getResources └── main.js ├── sys.Window.getTime └── main.js └── sys.Window └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | old/ 4 | .atom-build.json 5 | npm-debug.log 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012-2015 Variable.io Ltd 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pex-examples 2 | 3 | Examples for the pex library 4 | 5 | ## How to run the examples in the browser? 6 | 7 | ``` 8 | git clone http://github.com/variablestudio/pex-examples 9 | cd pex-examples 10 | npm install 11 | beefy sys.Window/main.js --open -- -i plask -g glslify-promise/transform 12 | ``` 13 | 14 | Replace `sys.Window` with another example name of your choice. 15 | -------------------------------------------------------------------------------- /assets/audio/demo-it.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/audio/demo-it.mp3 -------------------------------------------------------------------------------- /assets/audio/demo-it.txt: -------------------------------------------------------------------------------- 1 | Demo.it by Mikołaj Kuik -------------------------------------------------------------------------------- /assets/cubemaps/ForestReflection.dds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/ForestReflection.dds -------------------------------------------------------------------------------- /assets/cubemaps/hamarikyu_bridge_cube_pmrem32f.dds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/hamarikyu_bridge_cube_pmrem32f.dds -------------------------------------------------------------------------------- /assets/cubemaps/pisa_negx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/pisa_negx.jpg -------------------------------------------------------------------------------- /assets/cubemaps/pisa_negy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/pisa_negy.jpg -------------------------------------------------------------------------------- /assets/cubemaps/pisa_negz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/pisa_negz.jpg -------------------------------------------------------------------------------- /assets/cubemaps/pisa_posx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/pisa_posx.jpg -------------------------------------------------------------------------------- /assets/cubemaps/pisa_posy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/pisa_posy.jpg -------------------------------------------------------------------------------- /assets/cubemaps/pisa_posz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/pisa_posz.jpg -------------------------------------------------------------------------------- /assets/cubemaps/pisa_preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/pisa_preview.jpg -------------------------------------------------------------------------------- /assets/cubemaps/uffizi/uffizi_cross_negx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi/uffizi_cross_negx.jpg -------------------------------------------------------------------------------- /assets/cubemaps/uffizi/uffizi_cross_negy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi/uffizi_cross_negy.jpg -------------------------------------------------------------------------------- /assets/cubemaps/uffizi/uffizi_cross_negz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi/uffizi_cross_negz.jpg -------------------------------------------------------------------------------- /assets/cubemaps/uffizi/uffizi_cross_posx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi/uffizi_cross_posx.jpg -------------------------------------------------------------------------------- /assets/cubemaps/uffizi/uffizi_cross_posy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi/uffizi_cross_posy.jpg -------------------------------------------------------------------------------- /assets/cubemaps/uffizi/uffizi_cross_posz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi/uffizi_cross_posz.jpg -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m00_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m00_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m00_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m00_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m00_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m00_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m00_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m00_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m00_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m00_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m00_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m00_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m01_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m01_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m01_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m01_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m01_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m01_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m01_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m01_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m01_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m01_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m01_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m01_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m02_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m02_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m02_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m02_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m02_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m02_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m02_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m02_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m02_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m02_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m02_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m02_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m03_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m03_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m03_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m03_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m03_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m03_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m03_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m03_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m03_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m03_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m03_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m03_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m04_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m04_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m04_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m04_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m04_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m04_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m04_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m04_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m04_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m04_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m04_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m04_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m05_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m05_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m05_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m05_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m05_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m05_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m05_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m05_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m05_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m05_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m05_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m05_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m06_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m06_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m06_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m06_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m06_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m06_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m06_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m06_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m06_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m06_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m06_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m06_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m07_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m07_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m07_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m07_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m07_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m07_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m07_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m07_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m07_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m07_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m07_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m07_c05.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m08_c00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m08_c00.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m08_c01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m08_c01.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m08_c02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m08_c02.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m08_c03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m08_c03.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m08_c04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m08_c04.png -------------------------------------------------------------------------------- /assets/cubemaps/uffizi_lod/uffizi_m08_c05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/cubemaps/uffizi_lod/uffizi_m08_c05.png -------------------------------------------------------------------------------- /assets/glsl/Basic.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | 4 | void main() { 5 | gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 6 | } 7 | -------------------------------------------------------------------------------- /assets/glsl/Basic.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aPosition; 2 | 3 | uniform mat4 uProjectionMatrix; 4 | uniform mat4 uViewMatrix; 5 | uniform mat4 uModelMatrix; 6 | 7 | void main() { 8 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 9 | } 10 | -------------------------------------------------------------------------------- /assets/glsl/ReflectionCubemap.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | uniform mat4 uInverseViewMatrix; 6 | uniform samplerCube uReflectionMap; 7 | uniform float uReflectionMapFlipEnvMap; 8 | varying vec3 ecPosition; 9 | varying vec3 ecNormal; 10 | 11 | vec4 textureCubeEnvMap(samplerCube envMap, vec3 N, float flipEnvMap) { 12 | N.x *= flipEnvMap; 13 | return textureCube(uReflectionMap, N); 14 | } 15 | 16 | void main() { 17 | vec3 ecEyeDir = normalize(-ecPosition); 18 | vec3 wcEyeDir = vec3(uInverseViewMatrix * vec4(ecEyeDir, 0.0)); 19 | vec3 wcNormal = vec3(uInverseViewMatrix * vec4(ecNormal, 0.0)); 20 | 21 | vec3 reflectionWorld = reflect(-wcEyeDir, normalize(wcNormal)); //eye coordinates reflection vector 22 | 23 | vec4 color = textureCubeEnvMap(uReflectionMap, reflectionWorld, uReflectionMapFlipEnvMap); 24 | 25 | //gl_FragColor = vec4(ecNormal * 0.5 + 0.5, 1.0); 26 | gl_FragColor = color; 27 | } 28 | -------------------------------------------------------------------------------- /assets/glsl/ReflectionCubemap.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aPosition; 2 | attribute vec3 aNormal; 3 | 4 | uniform mat4 uProjectionMatrix; 5 | uniform mat4 uViewMatrix; 6 | uniform mat4 uModelMatrix; 7 | uniform mat3 uNormalMatrix; 8 | 9 | varying vec3 ecPosition; 10 | varying vec3 ecNormal; 11 | 12 | void main() { 13 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 14 | ecPosition = vec3(uViewMatrix * uModelMatrix * aPosition); 15 | ecNormal = uNormalMatrix * aNormal; 16 | } 17 | -------------------------------------------------------------------------------- /assets/glsl/ReflectionEquirect.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | uniform mat4 uInverseViewMatrix; 6 | uniform sampler2D uReflectionMap; 7 | 8 | varying vec3 ecPosition; 9 | varying vec3 ecNormal; 10 | 11 | //always flip equirect env map 12 | const float flipEnvMap = -1.0; 13 | 14 | #define PI 3.1415926 15 | #define TwoPI (2.0 * PI) 16 | 17 | 18 | vec4 texture2DEnvMap(sampler2D envMap, vec3 N, float flipEnvMap) { 19 | //I assume envMap texture has been flipped the WebGL way (pixel 0,0 is a the bottom) 20 | //therefore we flip wcNorma.y as acos(1) = 0 21 | float phi = acos(-N.y); 22 | float theta = atan(flipEnvMap * N.x, N.z) + PI; 23 | return texture2D(envMap, vec2(theta / TwoPI, phi / PI)); 24 | } 25 | 26 | void main() { 27 | vec3 ecEyeDir = normalize(-ecPosition); 28 | vec3 wcEyeDir = vec3(uInverseViewMatrix * vec4(ecEyeDir, 0.0)); 29 | vec3 wcNormal = vec3(uInverseViewMatrix * vec4(ecNormal, 0.0)); 30 | 31 | vec3 reflectionWorld = reflect(-wcEyeDir, normalize(wcNormal)); //eye coordinates reflection vector 32 | 33 | vec4 color = texture2DEnvMap(uReflectionMap, reflectionWorld, flipEnvMap); 34 | 35 | //gl_FragColor = vec4(ecNormal * 0.5 + 0.5, 1.0); 36 | gl_FragColor = color; 37 | } 38 | -------------------------------------------------------------------------------- /assets/glsl/ReflectionEquirect.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aPosition; 2 | attribute vec3 aNormal; 3 | 4 | uniform mat4 uProjectionMatrix; 5 | uniform mat4 uViewMatrix; 6 | uniform mat4 uModelMatrix; 7 | uniform mat3 uNormalMatrix; 8 | 9 | varying vec3 ecPosition; 10 | varying vec3 ecNormal; 11 | 12 | void main() { 13 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 14 | ecPosition = vec3(uViewMatrix * uModelMatrix * aPosition); 15 | ecNormal = uNormalMatrix * aNormal; 16 | } 17 | -------------------------------------------------------------------------------- /assets/glsl/RepeatedTexture.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec2 vTexCoord0; 6 | uniform sampler2D uTexture; 7 | uniform vec2 uRepeat; 8 | void main() { 9 | gl_FragColor = texture2D(uTexture, vTexCoord0 * uRepeat); 10 | } 11 | -------------------------------------------------------------------------------- /assets/glsl/RepeatedTexture.vert: -------------------------------------------------------------------------------- 1 | attribute vec2 aTexCoord0; 2 | attribute vec4 aPosition; 3 | uniform mat4 uProjectionMatrix; 4 | uniform mat4 uViewMatrix; 5 | uniform mat4 uModelMatrix; 6 | varying vec2 vTexCoord0; 7 | void main() { 8 | vTexCoord0 = aTexCoord0; 9 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 10 | } 11 | -------------------------------------------------------------------------------- /assets/glsl/ShowColors.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec4 vColor; 6 | void main() { 7 | gl_FragColor = vColor; 8 | } 9 | -------------------------------------------------------------------------------- /assets/glsl/ShowColors.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aColor; 2 | attribute vec4 aPosition; 3 | uniform mat4 uProjectionMatrix; 4 | uniform mat4 uViewMatrix; 5 | uniform mat4 uModelMatrix; 6 | uniform float uPointSize; 7 | varying vec4 vColor; 8 | void main() { 9 | vColor = aColor; 10 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 11 | gl_PointSize = uPointSize; 12 | } 13 | -------------------------------------------------------------------------------- /assets/glsl/ShowNormals.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec3 ecNormal; 6 | 7 | void main() { 8 | gl_FragColor = vec4(normalize(ecNormal) * 0.5 + 0.5, 1.0); 9 | } 10 | -------------------------------------------------------------------------------- /assets/glsl/ShowNormals.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aPosition; 2 | attribute vec3 aNormal; 3 | 4 | uniform mat4 uProjectionMatrix; 5 | uniform mat4 uViewMatrix; 6 | uniform mat4 uModelMatrix; 7 | uniform mat3 uNormalMatrix; 8 | 9 | varying vec3 ecNormal; 10 | 11 | void main() { 12 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 13 | ecNormal = uNormalMatrix * aNormal; 14 | } 15 | -------------------------------------------------------------------------------- /assets/glsl/ShowNormalsInstanced.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec3 ecNormal; 6 | 7 | void main() { 8 | gl_FragColor = vec4(normalize(ecNormal) * 0.5 + 0.5, 1.0); 9 | } 10 | -------------------------------------------------------------------------------- /assets/glsl/ShowNormalsInstanced.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aPosition; 2 | attribute vec3 aNormal; 3 | attribute vec3 aCustom0; //offset 4 | attribute float aCustom1; //scale 5 | 6 | uniform mat4 uProjectionMatrix; 7 | uniform mat4 uViewMatrix; 8 | uniform mat4 uModelMatrix; 9 | uniform mat3 uNormalMatrix; 10 | 11 | varying vec3 ecNormal; 12 | 13 | void main() { 14 | vec3 offset = aCustom0; 15 | float scale = aCustom1; 16 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aPosition.xyz * scale + offset, 1.0); 17 | ecNormal = uNormalMatrix * aNormal; 18 | } 19 | -------------------------------------------------------------------------------- /assets/glsl/ShowTexCoords.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec2 vTexCoord0; 6 | void main() { 7 | gl_FragColor = vec4(vTexCoord0, 0.0, 1.0); 8 | } 9 | -------------------------------------------------------------------------------- /assets/glsl/ShowTexCoords.vert: -------------------------------------------------------------------------------- 1 | attribute vec2 aTexCoord0; 2 | attribute vec4 aPosition; 3 | uniform mat4 uProjectionMatrix; 4 | uniform mat4 uViewMatrix; 5 | uniform mat4 uModelMatrix; 6 | varying vec2 vTexCoord0; 7 | void main() { 8 | vTexCoord0 = aTexCoord0; 9 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 10 | } 11 | -------------------------------------------------------------------------------- /assets/glsl/SkyboxCubemap.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec3 vNormal; 6 | 7 | uniform samplerCube uReflectionMap; 8 | uniform float uReflectionMapFlipEnvMap; 9 | 10 | vec4 textureCubeEnvMap(samplerCube envMap, vec3 N, float flipEnvMap) { 11 | N.x *= flipEnvMap; 12 | return textureCube(uReflectionMap, N); 13 | } 14 | 15 | void main() { 16 | vec3 N = normalize(vNormal); 17 | gl_FragColor = textureCubeEnvMap(uReflectionMap, N, uReflectionMapFlipEnvMap); 18 | } 19 | -------------------------------------------------------------------------------- /assets/glsl/SkyboxCubemap.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aPosition; 2 | attribute vec3 aNormal; 3 | 4 | uniform mat4 uProjectionMatrix; 5 | uniform mat4 uViewMatrix; 6 | uniform mat4 uModelMatrix; 7 | 8 | varying vec3 vNormal; 9 | 10 | void main() { 11 | vNormal = normalize(aPosition.xyz); 12 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 13 | } 14 | -------------------------------------------------------------------------------- /assets/glsl/SkyboxEnvMap.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec3 vNormal; 6 | 7 | uniform sampler2D uReflectionEnvMap; 8 | 9 | #define PI 3.1415926 10 | #define TwoPI (2.0 * PI) 11 | 12 | /** 13 | * Samples equirectangular (lat/long) panorama environment map 14 | * @param {sampler2D} envMap - equirectangular (lat/long) panorama texture 15 | * @param {vec3} wcNormal - normal in the world coordinate space 16 | * @return {vec4} - sampledColor 17 | * @description Based on http://http.developer.nvidia.com/GPUGems/gpugems_ch17.html and http://gl.ict.usc.edu/Data/HighResProbes/ 18 | */ 19 | vec4 texture2DEnvMap(sampler2D envMap, vec3 wcNormal) { 20 | //-1.0 for left handed coorinate system oriented texture (usual case) 21 | const float flipEnvMap = -1.0; 22 | //I assume envMap texture has been flipped the WebGL way (pixel 0,0 is a the bottom) 23 | //So top was at 0,0 and now is at 0,1 therefore we flip wcNorma.y as acos(1) = 0 but we want 1 24 | float phi = acos(-wcNormal.y); 25 | float theta = atan(flipEnvMap * wcNormal.x, wcNormal.z) + PI; 26 | vec2 texCoord = vec2(theta / TwoPI, phi / PI); 27 | return texture2D(envMap, texCoord); 28 | } 29 | 30 | void main() { 31 | vec3 N = normalize(vNormal); 32 | gl_FragColor = texture2DEnvMap(uReflectionEnvMap, N); 33 | } 34 | -------------------------------------------------------------------------------- /assets/glsl/SkyboxEnvMap.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aPosition; 2 | attribute vec3 aNormal; 3 | 4 | uniform mat4 uProjectionMatrix; 5 | uniform mat4 uViewMatrix; 6 | uniform mat4 uModelMatrix; 7 | 8 | varying vec3 vNormal; 9 | 10 | void main() { 11 | vNormal = aPosition.xyz; 12 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 13 | } 14 | -------------------------------------------------------------------------------- /assets/glsl/SolidColor.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | uniform vec4 uColor; 6 | 7 | void main() { 8 | gl_FragColor = uColor; 9 | } 10 | -------------------------------------------------------------------------------- /assets/glsl/SolidColor.vert: -------------------------------------------------------------------------------- 1 | attribute vec4 aColor; 2 | attribute vec4 aPosition; 3 | uniform mat4 uProjectionMatrix; 4 | uniform mat4 uViewMatrix; 5 | uniform mat4 uModelMatrix; 6 | uniform float uPointSize; 7 | void main() { 8 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 9 | gl_PointSize = uPointSize; 10 | } 11 | -------------------------------------------------------------------------------- /assets/glsl/Textured.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision highp float; 3 | #endif 4 | 5 | varying vec2 vTexCoord0; 6 | uniform sampler2D uTexture; 7 | void main() { 8 | gl_FragColor = texture2D(uTexture, vTexCoord0); 9 | } 10 | -------------------------------------------------------------------------------- /assets/glsl/Textured.vert: -------------------------------------------------------------------------------- 1 | attribute vec2 aTexCoord0; 2 | attribute vec4 aPosition; 3 | uniform mat4 uProjectionMatrix; 4 | uniform mat4 uViewMatrix; 5 | uniform mat4 uModelMatrix; 6 | varying vec2 vTexCoord0; 7 | void main() { 8 | vTexCoord0 = aTexCoord0; 9 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; 10 | } 11 | -------------------------------------------------------------------------------- /assets/palettes/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/palettes/example.png -------------------------------------------------------------------------------- /assets/palettes/rainbow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/palettes/rainbow.jpg -------------------------------------------------------------------------------- /assets/text/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": [0.0, 0.8, 1.0, 1.0] 3 | } 4 | -------------------------------------------------------------------------------- /assets/text/loremipsum.json: -------------------------------------------------------------------------------- 1 | [ 2 | "Lorem ipsum dolor sit amet, ut pri bonorum erroribus, tibique dissentias suscipiantur an per.", 3 | "Epicuri nominati cotidieque no pri, sit iudico ubique ei, case scaevola ullamcorper et sea.", 4 | "Eu per munere epicurei atomorum, movet nullam conclusionemque id vix.", 5 | "Nec eu etiam dissentiunt, praesent scripserit pri eu.", 6 | "Vocent eligendi his eu. Eu mei ceteros lucilius, ut molestie invenire eam, ex has labore facete delenit." 7 | ] 8 | -------------------------------------------------------------------------------- /assets/text/loremipsum.txt: -------------------------------------------------------------------------------- 1 | Lorem ipsum dolor sit amet, ut pri bonorum erroribus, tibique dissentias suscipiantur an per. Epicuri nominati cotidieque no pri, sit iudico ubique ei, case scaevola ullamcorper et sea. Eu per munere epicurei atomorum, movet nullam conclusionemque id vix. Nec eu etiam dissentiunt, praesent scripserit pri eu. Vocent eligendi his eu. Eu mei ceteros lucilius, ut molestie invenire eam, ex has labore facete delenit. 2 | -------------------------------------------------------------------------------- /assets/textures/envmap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/envmap.jpg -------------------------------------------------------------------------------- /assets/textures/envmap_blur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/envmap_blur.jpg -------------------------------------------------------------------------------- /assets/textures/envmap_blur2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/envmap_blur2.jpg -------------------------------------------------------------------------------- /assets/textures/grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/grass.png -------------------------------------------------------------------------------- /assets/textures/matcaps/MatcapBronze.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/matcaps/MatcapBronze.jpg -------------------------------------------------------------------------------- /assets/textures/matcaps/MatcapBronze.txt: -------------------------------------------------------------------------------- 1 | http://forums.newtek.com/showthread.php?115614-Blender-can-recreate-matcaps-from-zbrush-Can-we-do-the-same-in-lightwave -------------------------------------------------------------------------------- /assets/textures/matcaps/generator11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/matcaps/generator11.jpg -------------------------------------------------------------------------------- /assets/textures/matcaps/generator11.txt: -------------------------------------------------------------------------------- 1 | This work by Ben Simonds is licensed under a Creative Commons Attribution 3.0 Unported License. 2 | http://bensimonds.com/2010/07/30/matcap-generator/ -------------------------------------------------------------------------------- /assets/textures/matcaps/green_glass_860.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/matcaps/green_glass_860.png -------------------------------------------------------------------------------- /assets/textures/matcaps/green_glass_860.txt: -------------------------------------------------------------------------------- 1 | ? -------------------------------------------------------------------------------- /assets/textures/matcaps/plastic_red.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/matcaps/plastic_red.jpg -------------------------------------------------------------------------------- /assets/textures/matcaps/plastic_red.txt: -------------------------------------------------------------------------------- 1 | http://videometry.blogspot.no/2014/03/matcap-materials-and-smooth-soft.html -------------------------------------------------------------------------------- /assets/textures/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/noise.png -------------------------------------------------------------------------------- /assets/textures/opengl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/opengl.png -------------------------------------------------------------------------------- /assets/textures/palette_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/palette_green.png -------------------------------------------------------------------------------- /assets/textures/plask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/plask.png -------------------------------------------------------------------------------- /assets/textures/sprite_brush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/sprite_brush.png -------------------------------------------------------------------------------- /assets/textures/test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/test.png -------------------------------------------------------------------------------- /assets/textures/testcard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/testcard.jpg -------------------------------------------------------------------------------- /assets/textures/var.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/var.png -------------------------------------------------------------------------------- /assets/textures/webgl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pex-gl/pex-examples/7e7ec75b8f7e6d7c75f57476d777f7e058574a8d/assets/textures/webgl.png -------------------------------------------------------------------------------- /cam.Arcball/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var PerspCamera = require('pex-cam/PerspCamera'); 3 | var Arcball = require('pex-cam/Arcball'); 4 | var Draw = require('pex-draw'); 5 | var glslify = require('glslify-promise'); 6 | 7 | Window.create({ 8 | settings : { 9 | width : 800, 10 | height : 600, 11 | fullscreen: typeof(document) != 'undefined' 12 | }, 13 | resources : { 14 | vert : {glsl : glslify(__dirname + '/../assets/glsl/ShowColors.vert') }, 15 | frag : {glsl : glslify(__dirname + '/../assets/glsl/ShowColors.frag') } 16 | }, 17 | init : function(){ 18 | var ctx = this.getContext(); 19 | var resources = this.getResources(); 20 | 21 | this._program = ctx.createProgram(resources.vert,resources.frag); 22 | ctx.bindProgram(this._program); 23 | 24 | this._camera = new PerspCamera(45,this.getAspectRatio(),0.001,20.0); 25 | this._camera.lookAt([1,1,1],[0,0,0]); 26 | 27 | this._arcball = new Arcball(this._camera,this.getWidth(),this.getHeight()); 28 | this._arcballState = this._arcball.getState(); 29 | 30 | this._draw = new Draw(ctx); 31 | 32 | ctx.setClearColor(0.125,0.125,0.125,1); 33 | ctx.setDepthTest(true); 34 | ctx.setProjectionMatrix(this._camera.getProjectionMatrix()); 35 | 36 | this.addEventListener(this._arcball); 37 | }, 38 | onKeyPress : function(e){ 39 | switch (e.str){ 40 | case ' ': 41 | this._arcball.resetPanning(); 42 | break; 43 | case 's': 44 | this._arcballState = this._arcball.getState(); 45 | break; 46 | case 'l': 47 | this._arcball.setState(this._arcballState); 48 | break; 49 | } 50 | 51 | switch (+e.str){ 52 | case 1: 53 | this._arcball.setLookDirection([1,0,0]); 54 | break; 55 | case 2: 56 | this._arcball.setLookDirection([0,1,0]); 57 | break; 58 | case 3: 59 | this._arcball.setLookDirection([0,0,1]); 60 | break; 61 | case 4: 62 | this._arcball.setLookDirection([1,1,1]); 63 | break; 64 | case 5: 65 | this._arcball.setLookDirection([-1,-1,-1]); 66 | break; 67 | } 68 | }, 69 | draw : function(){ 70 | var ctx = this.getContext(); 71 | var draw = this._draw; 72 | 73 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 74 | 75 | this._arcball.apply(); 76 | ctx.setViewMatrix(this._camera.getViewMatrix()); 77 | 78 | ctx.pushModelMatrix(); 79 | ctx.scale([0.5,0.125,0.5]); 80 | draw.drawCubeColored(); 81 | ctx.popModelMatrix(); 82 | 83 | draw.debugArcball(this._arcball,true); 84 | } 85 | }); 86 | -------------------------------------------------------------------------------- /context.Mesh.divisor/main.js: -------------------------------------------------------------------------------- 1 | //Ported from https://github.com/glo-js/glo-demo-primitive 2 | 3 | var Window = require('pex-sys/Window'); 4 | var Mat4 = require('pex-math/Mat4'); 5 | var Vec3 = require('pex-math/Vec3'); 6 | var createSphere = require('primitive-sphere'); 7 | var glslify = require('glslify-promise'); 8 | var PerspCamera = require('pex-cam/PerspCamera'); 9 | var Arcball = require('pex-cam/Arcball'); 10 | 11 | Window.create({ 12 | settings: { 13 | width: 1280, 14 | height: 720, 15 | type: '3d' 16 | }, 17 | resources: { 18 | showNormalsVert: { glsl: glslify(__dirname + '/../assets/glsl/ShowNormalsInstanced.vert') }, 19 | showNormalsFrag: { glsl: glslify(__dirname + '/../assets/glsl/ShowNormalsInstanced.frag') } 20 | }, 21 | init: function() { 22 | var ctx = this.getContext(); 23 | 24 | this.camera = new PerspCamera(45,this.getAspectRatio(),0.001,20.0); 25 | this.camera.lookAt([2, 1, 2], [0, 0, 0]); 26 | 27 | ctx.setProjectionMatrix(this.camera.getProjectionMatrix()); 28 | 29 | this.arcball = new Arcball(this.camera, this.getWidth(), this.getHeight()); 30 | this.arcball.setDistance(3.0); 31 | this.addEventListener(this.arcball); 32 | 33 | var res = this.getResources(); 34 | 35 | this.program = ctx.createProgram(res.showNormalsVert, res.showNormalsFrag); 36 | ctx.bindProgram(this.program); 37 | 38 | this.offsets = []; 39 | this.scales = []; 40 | 41 | for(var i=0; i<10000; i++) { 42 | this.offsets.push([ 43 | Math.random() * 2 - 1, 44 | Math.random() * 2 - 1, 45 | Math.random() * 2 - 1 46 | ]) 47 | this.scales.push(0.1) 48 | } 49 | 50 | var sphere = createSphere(0.5, { segments: 2 }); 51 | var sphereAttributes = [ 52 | { data: sphere.positions, location: ctx.ATTRIB_POSITION }, 53 | { data: sphere.normals, location: ctx.ATTRIB_NORMAL }, 54 | { data: this.offsets, location: ctx.ATTRIB_CUSTOM_0, divisor: 1 }, 55 | { data: this.scales, location: ctx.ATTRIB_CUSTOM_1, divisor: 1} 56 | ]; 57 | var sphereIndices = { data: sphere.cells }; 58 | this.sphereMesh = ctx.createMesh(sphereAttributes, sphereIndices); 59 | }, 60 | draw: function() { 61 | var ctx = this.getContext(); 62 | 63 | this.arcball.apply(); 64 | ctx.setViewMatrix(this.camera.getViewMatrix()); 65 | 66 | ctx.setClearColor(0.2, 0.2, 0.2, 1); 67 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 68 | ctx.setDepthTest(true); 69 | 70 | ctx.bindProgram(this.program); 71 | ctx.bindMesh(this.sphereMesh); 72 | ctx.drawMesh(10000); 73 | } 74 | }) 75 | -------------------------------------------------------------------------------- /context.Texture.flip/README.md: -------------------------------------------------------------------------------- 1 | # Textures in OpenGL/WebGL 2 | 3 | ## Texture2D 4 | 5 | 6 | UV Coordinates: 7 | 8 | ``` 9 | 10 | Most image WebGL 11 | editing software (upside down) 12 | 13 | 0,0------1,0 0,1------0,1 14 | | | | | 15 | | ⇣ | | ⇡ | 16 | | | | | 17 | 0,1------1,1 0,0------1,0 18 | ``` 19 | 20 | Therefore: 21 | - that's how you should assign texture coordinates to your quads 22 | - this is how `gl.viewport` function works i.e. `gl.viewport(0,0,width/2,height/2)` is the bottom left quarter of the screen 23 | - if you upload texture image (png,jpg) to a texture you need to **Y flip** the image on disk, during load or use `pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)` in `WebGL` 24 | - if you render to texture using `FBO` you don't need to to anything but remember the image is *upside down* aka the `OpenGL/WebGL` way 25 | - if you upload compressed data to the texture you need to **Y flip** the image before compression or in the shader e.g. 26 | 27 | ```glsl 28 | vec2 uv = vec2(vTexCoord0.x, 1.0 - vTexCoord0.y); 29 | ``` 30 | 31 | ## Cubemaps 32 | 33 | Coordinate space: 34 | 35 | ``` 36 | 37 | RenderMan / Direct X WebGL 38 | Left-Handed Right-Handed 39 | 40 | 41 | Y Z Y 42 | | / | 43 | |/ | 44 | o------X o------X 45 | / 46 | / 47 | Z 48 | ``` 49 | 50 | Therefore: 51 | - when using cubemaps not prepared for OpenGL (most of what you find on the web) you need to **negate X component** of the `R` vector that you use sample the cubemap e.g. 52 | - when rendering to Cubemap using FBO you need to mirror your scene -1 * X and change cull face to the opposite winding order 53 | 54 | ```glsl 55 | vec3 N = normalize(vNormal); 56 | N.x *= -1.0; 57 | vec4 color = textureCube(envMap, N); 58 | ``` 59 | 60 | ## EnvMaps (LatLong Panoramas, Equirectangular panoramas) 61 | 62 | Same issue with coordinate system like in Cubemaps 63 | 64 | Therefore: 65 | - you need to **negate X component** of your `R` vector 66 | - you need to **negate Y component** of your `R` vector too if you upload 2D image flipped to match the WebGL texture coordinates (default behavior) 67 | 68 | ```glsl 69 | vec4 texture2DEnvLatLong(sampler2D envMap, vec3 wcNormal, float flipEnvMap) { 70 | float phi = acos(-wcNormal.y); 71 | float theta = atan(flipEnvMap * wcNormal.x, wcNormal.z) + PI; 72 | vec2 texCoord = vec2(theta / TwoPI, phi / PI); 73 | return texture2D(envMap, texCoord); 74 | } 75 | ``` 76 | 77 | Rules of thumb: 78 | - 2d envmap : FLIP 79 | - 3d cubemap from 6 files: FLIP 80 | - 3d cubemap from 1 dds file: FLIP 81 | - 3d cubemap from 2d envmap: FLIP 82 | - 3d cubemap from 3d cubemap (e.g. downsampling) : NO FLIP 83 | - 3d cubemap from live gl scene (render target): NO FLIP //i was flipping here before causing problems in GUI and reflections 84 | 85 | ## Notes 86 | 87 | ThreeJS negates normal.X unless cubemap is a RenderTarget 88 | https://github.com/mrdoob/three.js/blob/9ba60dacbde92500bea0e7a68fe5e24f3c323c1e/src/renderers/WebGLRenderer.js#L1864 89 | 90 | PlayCanvas flips Y always for 2d textures and never for cubemaps 91 | https://github.com/playcanvas/engine/blob/31343de447af50983921b600552df21271c48865/src/graphics/graphics_device.js#L788 92 | 93 | PlayCanvas always negates normal.X for cubemap textures 94 | https://github.com/guycalledfrank/engine/commit/55582908f8538c561b436874e0560e4e7aaa9d63 95 | 96 | There is option to unflip the cubemap while convoluting 97 | https://github.com/playcanvas/engine/blob/f7dfa19fb0f5a7966712f4f2e88cde566c5953d8/src/graphics/graphics_prefiltercubemap.js#L327 98 | 99 | Rendering to Cubemap in PlayCanvas flips Y using camera up = -1 but doesn't flip X yet (as of 2015-10) 100 | https://github.com/mrdoob/three.js/blob/17df4c44c2365ad7649f53e99734ae48848ab646/src/cameras/CubeCamera.js#L17 101 | -------------------------------------------------------------------------------- /context.Texture.flip/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Mat4 = require('pex-math/Mat4'); 3 | var Vec3 = require('pex-math/Vec3'); 4 | var isBrowser = require('is-browser'); 5 | var PerspCamera = require('pex-cam/PerspCamera'); 6 | var Arcball = require('pex-cam/Arcball'); 7 | var glslify = require('glslify-promise'); 8 | var createSphere = require('primitive-sphere'); 9 | var Draw = require('pex-draw'); 10 | var GUI = require('pex-gui'); 11 | 12 | var ASSETS_DIR = isBrowser ? '../assets' : __dirname + '/../assets'; 13 | 14 | 15 | //Flipping up by -1 inspired by http://www.mbroecker.com/project_dynamic_cubemaps.html 16 | var sides = [ 17 | { eye: [0, 0, 0], target: [ 1, 0, 0], up: [0, -1, 0], color: [0, 0, 0, 1] }, 18 | { eye: [0, 0, 0], target: [-1, 0, 0], up: [0, -1, 0], color: [0, 0, 0, 1] }, 19 | { eye: [0, 0, 0], target: [0, 1, 0], up: [0, 0, 1], color: [0, 0, 0, 1] }, 20 | { eye: [0, 0, 0], target: [0, -1, 0], up: [0, 0, -1], color: [0, 0, 0, 1] }, 21 | { eye: [0, 0, 0], target: [0, 0, 1], up: [0, -1, 0], color: [0, 0, 0, 1] }, 22 | { eye: [0, 0, 0], target: [0, 0, -1], up: [0, -1, 0], color: [0, 0, 0, 1] }, 23 | ]; 24 | 25 | var fbo = null; 26 | var projectionMatrix = null; 27 | var viewMatrix = null; 28 | 29 | function renderToCubemap(ctx, cubemap, drawScene, level) { 30 | level = level || 0; 31 | if (!fbo) { 32 | fbo = ctx.createFramebuffer(); 33 | projectionMatrix = Mat4.perspective(Mat4.create(), 90, 1, 0.001, 500.0); 34 | viewMatrix = Mat4.create(); 35 | } 36 | 37 | ctx.pushState(ctx.VIEWPORT_BIT | ctx.FRAMEBUFFER_BIT | ctx.MATRIX_PROJECTION_BIT | ctx.MATRIX_VIEW_BIT | ctx.MATRIX_MODEL_BIT | ctx.COLOR_BIT); 38 | ctx.setViewport(0, 0, cubemap.getWidth(), cubemap.getHeight()); 39 | ctx.bindFramebuffer(fbo); 40 | ctx.setProjectionMatrix(projectionMatrix); 41 | sides.forEach(function(side, sideIndex) { 42 | fbo.setColorAttachment(0, ctx.TEXTURE_CUBE_MAP_POSITIVE_X + sideIndex, cubemap.getHandle(), level); 43 | ctx.setClearColor(side.color[0], side.color[1], side.color[2], 1); 44 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 45 | Mat4.lookAt(viewMatrix, side.eye, side.target, side.up); 46 | ctx.setViewMatrix(viewMatrix); 47 | drawScene(); 48 | }) 49 | ctx.popState(ctx.VIEWPORT_BIT | ctx.FRAMEBUFFER_BIT | ctx.MATRIX_PROJECTION_BIT | ctx.MATRIX_VIEW_BIT | ctx.MATRIX_MODEL_BIT | ctx.COLOR_BIT); 50 | } 51 | 52 | Window.create({ 53 | settings: { 54 | width: 1200, 55 | height: 900 56 | }, 57 | resources: { 58 | reflectionCubemapVert: { glsl: glslify(__dirname + '/../assets/glsl/ReflectionCubemap.vert') }, 59 | reflectionCubemapFrag: { glsl: glslify(__dirname + '/../assets/glsl/ReflectionCubemap.frag') }, 60 | reflectionEquirectVert: { glsl: glslify(__dirname + '/../assets/glsl/ReflectionEquirect.vert') }, 61 | reflectionEquirectFrag: { glsl: glslify(__dirname + '/../assets/glsl/ReflectionEquirect.frag') }, 62 | texturedVert: { glsl: glslify(__dirname + '/../assets/glsl/Textured.vert')}, 63 | texturedFrag: { glsl: glslify(__dirname + '/../assets/glsl/Textured.frag')}, 64 | showTexCoordsVert: { glsl: glslify(__dirname + '/../assets/glsl/ShowTexCoords.vert')}, 65 | showTexCoordsFrag: { glsl: glslify(__dirname + '/../assets/glsl/ShowTexCoords.frag')}, 66 | showColorsVert: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.vert')}, 67 | showColorsFrag: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.frag')}, 68 | envMap_px: { image: ASSETS_DIR + '/cubemaps/pisa_posx.jpg' }, 69 | envMap_nx: { image: ASSETS_DIR + '/cubemaps/pisa_negx.jpg' }, 70 | envMap_py: { image: ASSETS_DIR + '/cubemaps/pisa_posy.jpg' }, 71 | envMap_ny: { image: ASSETS_DIR + '/cubemaps/pisa_negy.jpg' }, 72 | envMap_pz: { image: ASSETS_DIR + '/cubemaps/pisa_posz.jpg' }, 73 | envMap_nz: { image: ASSETS_DIR + '/cubemaps/pisa_negz.jpg' }, 74 | pisaPreview: { image: ASSETS_DIR + '/cubemaps/pisa_preview.jpg' }, 75 | var: { image: ASSETS_DIR + '/textures/var.png' }, 76 | skyboxCubemapVert: { glsl: glslify(__dirname + '/../assets/glsl/SkyboxCubemap.vert')}, 77 | skyboxCubemapFrag: { glsl: glslify(__dirname + '/../assets/glsl/SkyboxCubemap.frag')}, 78 | skyboxEnvMapVert: { glsl: glslify(__dirname + '/../assets/glsl/SkyboxEnvMap.vert')}, 79 | skyboxEnvMapFrag: { glsl: glslify(__dirname + '/../assets/glsl/SkyboxEnvMap.frag')}, 80 | }, 81 | init: function() { 82 | var ctx = this.getContext(); 83 | this.gui = new GUI(ctx, this.getWidth(), this.getHeight()); 84 | 85 | var positions = [[-1, -1], [1,-1], [ 1, 1], [-1,1]]; 86 | var texCoords = [[0, 0], [1, 0], [1, 1], [0, 1]]; 87 | var faces = [[0, 1, 2], [0, 2, 3]]; 88 | this.plane = ctx.createMesh([ 89 | { location: ctx.ATTRIB_POSITION, data: positions }, 90 | { location: ctx.ATTRIB_TEX_COORD_0, data: texCoords} 91 | ], { data: faces }); 92 | 93 | var sphere = createSphere(0.5); 94 | var sphereAttributes = [ 95 | { data: sphere.positions, location: ctx.ATTRIB_POSITION }, 96 | { data: sphere.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 97 | { data: sphere.normals, location: ctx.ATTRIB_NORMAL } 98 | ]; 99 | var sphereIndices = { data: sphere.cells }; 100 | this.sphereMesh = ctx.createMesh(sphereAttributes, sphereIndices); 101 | 102 | var res = this.getResources(); 103 | this.pisaTex = ctx.createTexture2D(res.envMap_pz) 104 | this.pisaPreviewTex = ctx.createTexture2D(res.pisaPreview) 105 | this.varTex = ctx.createTexture2D(res.var); 106 | this.envMap = ctx.createTextureCube([ 107 | { face: 0, data: res.envMap_px }, 108 | { face: 1, data: res.envMap_nx }, 109 | { face: 2, data: res.envMap_py }, 110 | { face: 3, data: res.envMap_ny }, 111 | { face: 4, data: res.envMap_pz }, 112 | { face: 5, data: res.envMap_nz } 113 | ]) 114 | 115 | this.liveEnvMap = ctx.createTextureCube(null, 512, 512, { flipEnvMap: 1 }); 116 | 117 | this.texturedProgram = ctx.createProgram(res.texturedVert, res.texturedFrag); 118 | this.showTexCoordsProgram = ctx.createProgram(res.showTexCoordsVert, res.showTexCoordsFrag); 119 | this.showColorsProgram = ctx.createProgram(res.showColorsVert, res.showColorsFrag); 120 | this.skyboxCubemapProgram = ctx.createProgram(res.skyboxCubemapVert, res.skyboxCubemapFrag); 121 | this.skyboxEnvMapProgram = ctx.createProgram(res.skyboxEnvMapVert, res.skyboxEnvMapFrag); 122 | this.reflectionCubemap = ctx.createProgram(res.reflectionCubemapVert, res.reflectionCubemapFrag); 123 | this.reflectionEquirect = ctx.createProgram(res.reflectionEquirectVert, res.reflectionEquirectFrag); 124 | 125 | this.camera = new PerspCamera(45, 1, 0.1, 100); 126 | this.camera.setPosition([0, 0, -5]) 127 | this.arcball = new Arcball(this.camera, this.getWidth(), this.getHeight()); 128 | this.addEventListener(this.arcball); 129 | 130 | this.frontCamera = new PerspCamera(45, 1, 0.1, 100); 131 | 132 | this.debugDraw = new Draw(ctx); 133 | 134 | ctx.setViewMatrix(this.camera.getViewMatrix()); 135 | ctx.setProjectionMatrix(this.camera.getProjectionMatrix()); 136 | 137 | this.fboTex = ctx.createTexture2D(null, 512, 512); 138 | this.fboDepthTex = ctx.createTexture2D(null, 512, 512, { magFilter: ctx.NEAREST, minFilter: ctx.NEAREST, format: ctx.DEPTH_COMPONENT, type: ctx.UNSIGNED_SHORT }); 139 | this.fbo = ctx.createFramebuffer([{ texture: this.fboTex }], { texture: this.fboDepthTex }); 140 | 141 | var w = this.getWidth(); 142 | var h = this.getHeight(); 143 | 144 | this.gui.addTexture2D('Pisa', this.pisaTex); 145 | this.gui.addTexture2D('Var', this.varTex); 146 | this.gui.addTexture2D('FBO', this.fboTex); 147 | this.gui.addTexture2DList('Textures', { textureIndex: 0}, 'textureIndex', [ { texture: this.pisaTex }, { texture: this.varTex }, { texture: this.fboTex }], 3); 148 | this.gui.addTexture2D('envMap panorama', this.pisaPreviewTex).setPosition(180, 10); 149 | this.gui.addTextureCube('envMap', this.envMap); 150 | this.gui.addTextureCube('live envMap', this.liveEnvMap) 151 | 152 | this.gui.addLabel('TexCoords').setPosition(w*1.2/4, 10); 153 | this.gui.addLabel('Image tex').setPosition(w*2.2/4, 10); 154 | this.gui.addLabel('Cubemap tex').setPosition(w*2.2/4, 10 + h*1/3); 155 | this.gui.addLabel('FBO tex').setPosition(w*2.2/4, 10 + h*2/3); 156 | this.gui.addLabel('Skybox env map').setPosition(w*3.2/4, 10 + h*0/3); 157 | this.gui.addLabel('Skybox cubemap').setPosition(w*3.2/4, 10 + h*1/3); 158 | this.gui.addLabel('Skybox cubemap live').setPosition(w*3.2/4, 10 + h*2/3); 159 | }, 160 | drawScene: function() { 161 | var ctx = this.getContext(); 162 | ctx.setClearColor(0.8,0.8,0.8,1); 163 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 164 | ctx.setLineWidth(5); 165 | 166 | ctx.bindProgram(this.showColorsProgram); 167 | 168 | this.debugDraw.setColor([1,1,1,1]); 169 | this.debugDraw.drawCube(); 170 | this.debugDraw.drawPivotAxes(1); 171 | 172 | ctx.pushModelMatrix(); 173 | this.debugDraw.setColor([1,0,0,1]); 174 | ctx.translate([2, 0, 0]); 175 | this.debugDraw.drawCube(0.75); 176 | ctx.popModelMatrix(); 177 | 178 | ctx.pushModelMatrix(); 179 | this.debugDraw.setColor([0,1,0,1]); 180 | ctx.translate([0, 2, 0]); 181 | this.debugDraw.drawCube(0.75); 182 | ctx.popModelMatrix(); 183 | 184 | ctx.pushModelMatrix(); 185 | this.debugDraw.setColor([0,0,1,1]); 186 | ctx.translate([0, 0, 2]); 187 | this.debugDraw.drawCube(0.75); 188 | ctx.popModelMatrix(); 189 | }, 190 | drawSceneWithSkybox: function() { 191 | var ctx = this.getContext(); 192 | ctx.setClearColor(0.8,0.8,0.8,1); 193 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 194 | ctx.bindTexture(this.varTex); 195 | ctx.setLineWidth(5); 196 | 197 | ctx.bindProgram(this.skyboxCubemapProgram); 198 | this.skyboxCubemapProgram.setUniform('uReflectionMap', 0); 199 | this.skyboxCubemapProgram.setUniform('uReflectionMapFlipEnvMap', -1); 200 | ctx.bindTexture(this.envMap, 0); 201 | ctx.pushModelMatrix(); 202 | this.debugDraw.setColor([1,1,1,1]); 203 | this.debugDraw.drawCube(100); 204 | 205 | ctx.bindProgram(this.showColorsProgram); 206 | this.debugDraw.drawPivotAxes(1); 207 | ctx.popModelMatrix(); 208 | 209 | 210 | ctx.pushModelMatrix(); 211 | this.debugDraw.setColor([0.8,0,0,1]); 212 | ctx.translate([2, 0, 0]); 213 | this.debugDraw.drawCube(0.75); 214 | ctx.popModelMatrix(); 215 | 216 | ctx.pushModelMatrix(); 217 | this.debugDraw.setColor([0,0.8,0,1]); 218 | ctx.translate([0, 2, 0]); 219 | this.debugDraw.drawCube(0.75); 220 | ctx.popModelMatrix(); 221 | 222 | ctx.pushModelMatrix(); 223 | this.debugDraw.setColor([0,0,0.8,1]); 224 | ctx.translate([0, 0, 2]); 225 | this.debugDraw.drawCube(0.75); 226 | ctx.popModelMatrix(); 227 | }, 228 | draw: function() { 229 | var ctx = this.getContext(); 230 | ctx.setClearColor(0.2,0.2,0.2,1); 231 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 232 | ctx.setDepthTest(true); 233 | 234 | this.arcball.apply(); 235 | ctx.setViewMatrix(this.camera.getViewMatrix()); 236 | 237 | var w = this.getWidth(); 238 | var h = this.getHeight(); 239 | 240 | ctx.bindProgram(this.showTexCoordsProgram); 241 | ctx.setViewport(w*1/4, h*2/3, w/4, h/3); 242 | ctx.bindMesh(this.plane); 243 | ctx.pushViewMatrix(); 244 | ctx.setViewMatrix(this.frontCamera.getViewMatrix()) 245 | ctx.drawMesh(); 246 | ctx.popViewMatrix(); 247 | 248 | ctx.bindProgram(this.texturedProgram); 249 | this.texturedProgram.setUniform('uTexture', 0); 250 | 251 | ctx.setViewport(w*2/4, h*2/3, w/4, h/3); 252 | ctx.bindTexture(this.varTex); 253 | ctx.bindMesh(this.plane); 254 | ctx.pushViewMatrix(); 255 | ctx.setViewMatrix(this.frontCamera.getViewMatrix()) 256 | ctx.drawMesh(); 257 | ctx.popViewMatrix(); 258 | 259 | ctx.setViewport(w*2/4, h*1/3, w/4, h/3); 260 | ctx.bindTexture(this.pisaTex); 261 | ctx.bindMesh(this.plane); 262 | ctx.pushViewMatrix(); 263 | ctx.setViewMatrix(this.frontCamera.getViewMatrix()) 264 | ctx.drawMesh(); 265 | ctx.popViewMatrix(); 266 | 267 | ctx.bindFramebuffer(this.fbo); 268 | ctx.setViewport(0, 0, this.fboTex.getWidth(), this.fboTex.getHeight()); 269 | ctx.bindProgram(this.showColorsProgram); 270 | this.drawScene(); 271 | ctx.bindFramebuffer(null); 272 | 273 | ctx.setViewport(w*2/4, h*0/3, w/4, h/3); 274 | ctx.bindProgram(this.texturedProgram); 275 | this.texturedProgram.setUniform('uTexture', 0); 276 | ctx.bindTexture(this.fboTex); 277 | ctx.bindMesh(this.plane); 278 | ctx.pushViewMatrix(); 279 | ctx.setViewMatrix(this.frontCamera.getViewMatrix()) 280 | ctx.drawMesh(); 281 | ctx.popViewMatrix(); 282 | 283 | ctx.setViewport(w*3/4, h*2/3, w/4, h/3); 284 | ctx.bindProgram(this.skyboxEnvMapProgram); 285 | this.skyboxEnvMapProgram.setUniform('uReflectionEnvMap', 0); 286 | ctx.bindTexture(this.pisaPreviewTex); 287 | this.debugDraw.drawCube(100); 288 | ctx.bindProgram(this.showColorsProgram); 289 | this.debugDraw.drawPivotAxes(); 290 | ctx.bindProgram(this.reflectionEquirect); 291 | this.reflectionEquirect.setUniform('uReflectionMap', 0); 292 | ctx.bindMesh(this.sphereMesh); 293 | ctx.drawMesh(); 294 | 295 | ctx.setViewport(w*3/4, h/3, w/4, h/3); 296 | ctx.bindProgram(this.skyboxCubemapProgram); 297 | this.skyboxCubemapProgram.setUniform('uReflectionMap', 0); 298 | this.skyboxCubemapProgram.setUniform('uReflectionMapFlipEnvMap', -1); 299 | ctx.bindTexture(this.envMap); 300 | this.debugDraw.drawCube(100); 301 | ctx.bindProgram(this.showColorsProgram); 302 | this.debugDraw.drawPivotAxes(); 303 | ctx.bindProgram(this.reflectionCubemap); 304 | this.reflectionCubemap.setUniform('uReflectionMap', 0); 305 | this.reflectionCubemap.setUniform('uReflectionMapFlipEnvMap', -1); 306 | ctx.bindMesh(this.sphereMesh); 307 | ctx.drawMesh(); 308 | 309 | renderToCubemap(ctx, this.liveEnvMap, this.drawSceneWithSkybox.bind(this), 0); 310 | 311 | ctx.setViewport(w*3/4, 0, w/4, h/3); 312 | ctx.setScissor(w*3/4, 0, w/4, h/3) 313 | ctx.setScissorTest(true) 314 | var renderRealScene = true; 315 | if (renderRealScene) { 316 | this.drawSceneWithSkybox() 317 | } 318 | else { 319 | ctx.bindTexture(this.liveEnvMap, 0); 320 | ctx.bindProgram(this.skyboxCubemapProgram); 321 | this.skyboxCubemapProgram.setUniform('uReflectionMap', 0); 322 | this.skyboxCubemapProgram.setUniform('uReflectionMapFlipEnvMap', 1); 323 | this.debugDraw.drawCube(100); 324 | ctx.bindProgram(this.showColorsProgram); 325 | this.debugDraw.drawPivotAxes(); 326 | } 327 | 328 | ctx.bindTexture(this.liveEnvMap, 0); 329 | ctx.bindProgram(this.reflectionCubemap); 330 | this.reflectionCubemap.setUniform('uReflectionMap', 0); 331 | this.reflectionCubemap.setUniform('uReflectionMapFlipEnvMap', 1); 332 | ctx.bindMesh(this.sphereMesh); 333 | ctx.drawMesh(); 334 | ctx.setScissorTest(false) 335 | 336 | ctx.setViewport(0, 0, this.getWidth(), this.getHeight()); 337 | this.gui.draw(); 338 | } 339 | }) 340 | -------------------------------------------------------------------------------- /context.Texture.mipmap/main.js: -------------------------------------------------------------------------------- 1 | //Ported from https://github.com/glo-js/glo-demo-primitive 2 | 3 | var Window = require('pex-sys/Window'); 4 | var Mat4 = require('pex-math/Mat4'); 5 | var Vec3 = require('pex-math/Vec3'); 6 | var createCube = require('primitive-cube'); 7 | var glslify = require('glslify-promise'); 8 | var isBrowser = require('is-browser'); 9 | var PerspCamera = require('pex-cam/PerspCamera'); 10 | var Arcball = require('pex-cam/Arcball'); 11 | 12 | 13 | Window.create({ 14 | settings: { 15 | width: 1200, 16 | height: 400, 17 | fullScreen: isBrowser 18 | }, 19 | resources: { 20 | vert: { glsl: glslify(__dirname + '/../assets/glsl/RepeatedTexture.vert') }, 21 | frag: { glsl: glslify(__dirname + '/../assets/glsl/RepeatedTexture.frag') }, 22 | testcard: { image: __dirname + '/../assets/textures/testcard.jpg'} 23 | }, 24 | init: function() { 25 | var ctx = this.getContext(); 26 | 27 | if (isBrowser) { 28 | //normally you would do it with CSS 29 | document.body.style.margin = '0'; 30 | } 31 | 32 | this.camera = new PerspCamera(45,this.getAspectRatio()/3,0.001,20.0); 33 | this.camera.lookAt([2, 2, 2],[0,0,0]); 34 | 35 | this.arcball = new Arcball(this.camera, this.getWidth(), this.getHeight()); 36 | this.addEventListener(this.arcball); 37 | 38 | ctx.setProjectionMatrix(this.camera.getProjectionMatrix()); 39 | ctx.setViewMatrix(this.camera.getViewMatrix()) 40 | 41 | var res = this.getResources(); 42 | 43 | this.program = ctx.createProgram(res.vert, res.frag); 44 | ctx.bindProgram(this.program); 45 | this.program.setUniform('uRepeat', [ 1, 1 ]); 46 | this.program.setUniform('uTexture', 0); 47 | 48 | var torus = createCube(); 49 | 50 | var attributes = [ 51 | { data: torus.positions, location: ctx.ATTRIB_POSITION }, 52 | { data: torus.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 53 | { data: torus.normals, location: ctx.ATTRIB_NORMAL } 54 | ]; 55 | var indices = { data: torus.cells, usage: ctx.STATIC_DRAW }; 56 | this.mesh = ctx.createMesh(attributes, indices); 57 | 58 | this.texNearest = ctx.createTexture2D(res.testcard, 2, 2, { 59 | repeat: true, 60 | minFilter: ctx.NEAREST, 61 | magFilter: ctx.NEAREST 62 | }) 63 | 64 | this.texLinear = ctx.createTexture2D(res.testcard, 2, 2, { 65 | repeat: true, 66 | minFilter: ctx.LINEAR, 67 | magFilter: ctx.LINEAR 68 | }) 69 | 70 | this.texMipmap = ctx.createTexture2D(res.testcard, 2, 2, { 71 | repeat: true, 72 | minFilter: ctx.NEAREST, 73 | magFilter: ctx.NEAREST, 74 | mipmap: true 75 | }) 76 | }, 77 | seconds: 0, 78 | prevTime: Date.now(), 79 | draw: function() { 80 | if (!this.mesh) return; 81 | var now = Date.now(); 82 | this.seconds += (now - this.prevTime)/1000; 83 | this.prevTime = now; 84 | 85 | var ctx = this.getContext(); 86 | ctx.setClearColor(0.2, 0.2, 0.2, 1); 87 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 88 | ctx.setDepthTest(true); 89 | 90 | var time = Date.now()/1000; 91 | 92 | ctx.bindProgram(this.program); 93 | 94 | this.arcball.apply(); 95 | ctx.setViewMatrix(this.camera.getViewMatrix()); 96 | 97 | ctx.bindMesh(this.mesh); 98 | 99 | ctx.bindTexture(this.texNearest); 100 | ctx.setViewport(0, 0, this.getWidth()/3, this.getHeight()) 101 | ctx.drawMesh(); 102 | 103 | ctx.bindTexture(this.texLinear); 104 | ctx.setViewport(this.getWidth()/3, 0, this.getWidth()/3, this.getHeight()) 105 | ctx.drawMesh(); 106 | 107 | ctx.bindTexture(this.texMipmap); 108 | ctx.setViewport(2*this.getWidth()/3, 0, this.getWidth()/3, this.getHeight()) 109 | ctx.drawMesh(); 110 | } 111 | }) 112 | -------------------------------------------------------------------------------- /context.TextureCube.dynamic/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Mat4 = require('pex-math/Mat4'); 3 | var Vec3 = require('pex-math/Vec3'); 4 | var createTorus = require('primitive-torus'); 5 | var createCube = require('primitive-cube'); 6 | var createSphere = require('primitive-sphere'); 7 | var glslify = require('glslify-promise'); 8 | var loadBinary = require('pex-io/loadBinary'); 9 | var PerspCamera = require('pex-cam/PerspCamera'); 10 | var Arcball = require('pex-cam/Arcball'); 11 | var Draw = require('pex-draw'); 12 | var GUI = require('pex-gui'); 13 | var isBrowser = require('is-browser'); 14 | 15 | var CUBEMAP_SIZE = 128; //->128 -> 64 -> 32 -> 16 16 | 17 | Window.create({ 18 | settings: { 19 | width: 1280, 20 | height: 720, 21 | type: '3d', 22 | fullscreen: isBrowser 23 | }, 24 | resources: { 25 | reflectionVert: { glsl: glslify(__dirname + '/../assets/glsl/ReflectionCubemap.vert') }, 26 | reflectionFrag: { glsl: glslify(__dirname + '/../assets/glsl/ReflectionCubemap.frag') }, 27 | solidColorVert: { glsl: glslify(__dirname + '/../assets/glsl/SolidColor.vert') }, 28 | solidColorFrag: { glsl: glslify(__dirname + '/../assets/glsl/SolidColor.frag') }, 29 | showColorsVert: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.vert') }, 30 | showColorsFrag: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.frag') }, 31 | }, 32 | init: function() { 33 | var ctx = this.getContext(); 34 | 35 | this.gui = new GUI(ctx, this.getWidth(), this.getHeight()); 36 | this.addEventListener(this.gui); 37 | this.gui.addHeader('Preview'); 38 | 39 | this.camera = new PerspCamera(45,this.getAspectRatio(),0.001,20.0); 40 | this.camera.lookAt([2,4,-7],[0,0,0]); 41 | 42 | this.arcball = new Arcball(this.camera,this.getWidth(),this.getHeight()); 43 | this.addEventListener(this.arcball); 44 | 45 | ctx.setProjectionMatrix(this.camera.getProjectionMatrix()); 46 | 47 | this.debugDraw = new Draw(ctx); 48 | 49 | var res = this.getResources(); 50 | 51 | this.reflectionProgram = ctx.createProgram(res.reflectionVert, res.reflectionFrag); 52 | ctx.bindProgram(this.reflectionProgram); 53 | this.reflectionProgram.setUniform('uReflectionMap', 0); 54 | this.reflectionProgram.setUniform('uReflectionMapFlipEnvMap', 1); 55 | 56 | this.solidColorProgram = ctx.createProgram(res.solidColorVert, res.solidColorFrag); 57 | this.showColorsProgram = ctx.createProgram(res.showColorsVert, res.showColorsFrag); 58 | 59 | var torus = createTorus({ majorRadius: 1, minorRadius: 0.5 }); 60 | torus = createSphere(); 61 | var torusAttributes = [ 62 | { data: torus.positions, location: ctx.ATTRIB_POSITION }, 63 | { data: torus.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 64 | { data: torus.normals, location: ctx.ATTRIB_NORMAL } 65 | ]; 66 | var torusIndices = { data: torus.cells }; 67 | this.torusMesh = ctx.createMesh(torusAttributes, torusIndices); 68 | 69 | var cube = createCube(); 70 | var cubeAttributes = [ 71 | { data: cube.positions, location: ctx.ATTRIB_POSITION }, 72 | { data: cube.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 73 | { data: cube.normals, location: ctx.ATTRIB_NORMAL } 74 | ]; 75 | var cubeIndices = { data: cube.cells }; 76 | this.cubeMesh = ctx.createMesh(cubeAttributes, cubeIndices); 77 | 78 | this.cubeInstances = [ 79 | { position: [ 3, 0, 0], scale: 1.0, color: [1.0, 0.0, 0.0, 1.0]}, 80 | { position: [-3, 0, 0], scale: 1.0, color: [1.0, 0.5, 0.0, 1.0]}, 81 | { position: [ 0, 3, 0], scale: 1.0, color: [0.0, 0.8, 0.0, 1.0]}, 82 | { position: [ 0,-3, 0], scale: 0.5, color: [0.0, 0.8, 0.8, 1.0]}, 83 | { position: [ 0, 0, 3], scale: 0.5, color: [0.0, 0.0, 1.0, 1.0]}, 84 | { position: [ 0, 0,-3], scale: 0.5, color: [0.5, 0.0, 1.0, 1.0]} 85 | ]; 86 | 87 | this.reflectionMap = ctx.createTextureCube(null, CUBEMAP_SIZE, CUBEMAP_SIZE, { flipEnvMap: 1 }); 88 | 89 | this.fbo = ctx.createFramebuffer(); 90 | 91 | this.gui.addTextureCube('Reflection', this.reflectionMap); 92 | 93 | this.cubeMapProjection = Mat4.perspective(Mat4.create(), 45, 1, 0.001, 50.0); 94 | this.cubeMapView = Mat4.lookAt([], [0, 0, 0], [1, 0, 0], [0, 1, 0]); 95 | }, 96 | seconds: 0, 97 | prevTime: Date.now(), 98 | updateCubemap: function() { 99 | var ctx = this.getContext(); 100 | 101 | var sides = [ 102 | { bg: [1.0, 0.0, 0.0, 1.0], bg: [1.0/10, 0.0/10, 0.0/10, 1.0], eye: [0, 0, 0], target: [ 1, 0, 0], up: [0, 1, 0] }, 103 | { bg: [1.0, 0.5, 0.0, 1.0], bg: [1.0/10, 0.5/10, 0.0/10, 1.0], eye: [0, 0, 0], target: [-1, 0, 0], up: [0, 1, 0] }, 104 | { bg: [0.0, 0.8, 0.0, 1.0], bg: [0.0/10, 0.8/10, 0.0/10, 1.0], eye: [0, 0, 0], target: [0, 1, 0], up: [0, 0, 1] }, 105 | { bg: [0.0, 0.8, 0.8, 1.0], bg: [0.0/10, 0.8/10, 0.8/10, 1.0], eye: [0, 0, 0], target: [0, -1, 0], up: [0, 0, 1] }, 106 | { bg: [0.0, 0.0, 1.0, 1.0], bg: [0.0/10, 0.0/10, 1.0/10, 1.0], eye: [0, 0, 0], target: [0, 0, 1], up: [0, 1, 0] }, 107 | { bg: [0.5, 0.0, 1.0, 1.0], bg: [0.5/10, 0.0/10, 1.0/10, 1.0], eye: [0, 0, 0], target: [0, 0, -1], up: [0, 1, 0] }, 108 | ] 109 | 110 | var gl = ctx.getGL(); 111 | 112 | ctx.pushState(ctx.VIEWPORT_BIT | ctx.FRAMEBUFFER_BIT | ctx.MATRIX_PROJECTION_BIT | ctx.MATRIX_VIEW_BIT | ctx.MATRIX_MODEL_BIT); 113 | ctx.setViewport(0, 0, CUBEMAP_SIZE, CUBEMAP_SIZE); 114 | ctx.bindFramebuffer(this.fbo); 115 | ctx.setProjectionMatrix(this.cubeMapProjection); 116 | //We need to mirror the scene to match Left-Handed coordinate system of the cubemap 117 | sides.forEach(function(side, sideIndex) { 118 | this.fbo.setColorAttachment(0, ctx.TEXTURE_CUBE_MAP_POSITIVE_X + sideIndex, this.reflectionMap.getHandle(), 0); 119 | ctx.setClearColor(side.bg[0], side.bg[1], side.bg[2], side.bg[3]); 120 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 121 | Mat4.lookAt(this.cubeMapView, side.eye, side.target, side.up); 122 | ctx.setViewMatrix(this.cubeMapView); 123 | this.drawScene(); 124 | }.bind(this)) 125 | ctx.popState(ctx.VIEWPORT_BIT | ctx.FRAMEBUFFER_BIT | ctx.MATRIX_PROJECTION_BIT | ctx.MATRIX_VIEW_BIT | ctx.MATRIX_MODEL_BIT); 126 | }, 127 | drawScene: function() { 128 | var ctx = this.getContext(); 129 | ctx.bindProgram(this.solidColorProgram); 130 | var solidColorProgram = this.solidColorProgram; 131 | ctx.bindMesh(this.cubeMesh); 132 | 133 | var tmp = this.tmp = this.tmp || [0, 0, 0]; 134 | var t = this.getTime().getElapsedSeconds(); 135 | this.cubeInstances.forEach(function(instance, i) { 136 | solidColorProgram.setUniform('uColor', instance.color); 137 | ctx.pushModelMatrix(); 138 | ctx.translate(instance.position); 139 | var s = instance.scale + 0.5 * Math.sin(t*2 + i); 140 | Vec3.set3(tmp, s, s, s); 141 | ctx.scale(tmp); 142 | ctx.drawMesh(); 143 | ctx.popModelMatrix(); 144 | }) 145 | }, 146 | draw: function() { 147 | var now = Date.now(); 148 | this.seconds += (now - this.prevTime)/1000; 149 | this.prevTime = now; 150 | 151 | var ctx = this.getContext(); 152 | ctx.setClearColor(0.2, 0.2, 0.2, 1); 153 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 154 | ctx.setDepthTest(true); 155 | 156 | this.updateCubemap(); 157 | 158 | this.arcball.apply(); 159 | ctx.setViewMatrix(this.camera.getViewMatrix()); 160 | 161 | ctx.bindTexture(this.reflectionMap, 0); 162 | 163 | ctx.bindProgram(this.reflectionProgram); 164 | ctx.bindMesh(this.torusMesh); 165 | ctx.drawMesh(); 166 | 167 | this.drawScene(); 168 | 169 | ctx.bindProgram(this.showColorsProgram); 170 | this.debugDraw.drawPivotAxes(2); 171 | 172 | this.gui.draw(); 173 | } 174 | }) 175 | -------------------------------------------------------------------------------- /context.createMesh/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Mat4 = require('pex-math/Mat4'); 3 | var Vec3 = require('pex-math/Vec3'); 4 | var createTorus = require('primitive-torus'); 5 | var glslify = require('glslify-promise'); 6 | var isBrowser = require('is-browser'); 7 | 8 | var ASSETS_DIR = isBrowser ? '../assets' : __dirname + '/../assets'; 9 | 10 | Window.create({ 11 | settings: { 12 | width: 800, 13 | height: 600, 14 | fullScreen: isBrowser 15 | }, 16 | resources: { 17 | vert: { text: (ASSETS_DIR + '/glsl/RepeatedTexture.vert') }, 18 | frag: { text: (ASSETS_DIR + '/glsl/RepeatedTexture.frag') } 19 | }, 20 | init: function() { 21 | var ctx = this.getContext(); 22 | 23 | if (isBrowser) { 24 | //normally you would do it with CSS 25 | document.body.style.margin = '0'; 26 | } 27 | 28 | this.model = Mat4.create(); 29 | this.projection = Mat4.perspective(Mat4.create(), 45, this.getAspectRatio(), 0.001, 10.0); 30 | this.view = Mat4.lookAt([], [3, 2, 2], [0, 0, 0], [0, 1, 0]); 31 | 32 | ctx.setProjectionMatrix(this.projection); 33 | ctx.setViewMatrix(this.view); 34 | ctx.setModelMatrix(this.model); 35 | 36 | var res = this.getResources(); 37 | 38 | this.program = ctx.createProgram(res.vert, res.frag); 39 | ctx.bindProgram(this.program); 40 | this.program.setUniform('uRepeat', [ 8, 8 ]); 41 | this.program.setUniform('uTexture', 0); 42 | 43 | var torus = createTorus(); 44 | 45 | var attributes = [ 46 | { data: torus.positions, location: ctx.ATTRIB_POSITION }, 47 | { data: torus.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 48 | { data: torus.normals, location: ctx.ATTRIB_NORMAL } 49 | ]; 50 | var indices = { data: torus.cells, usage: ctx.STATIC_DRAW }; 51 | this.mesh = ctx.createMesh(attributes, indices); 52 | 53 | var img = new Uint8Array([ 54 | 0xff, 0xff, 0xff, 0xff, 0xcc, 0xcc, 0xcc, 0xff, 55 | 0xcc, 0xcc, 0xcc, 0xff, 0xff, 0xff, 0xff, 0xff 56 | ]); 57 | 58 | this.tex = ctx.createTexture2D(img, 2, 2, { 59 | repeat: true, 60 | minFilter: ctx.NEAREST, 61 | magFilter: ctx.NEAREST 62 | }) 63 | }, 64 | seconds: 0, 65 | prevTime: Date.now(), 66 | draw: function() { 67 | if (!this.mesh) return; 68 | var now = Date.now(); 69 | this.seconds += (now - this.prevTime)/1000; 70 | this.prevTime = now; 71 | 72 | var ctx = this.getContext(); 73 | ctx.setClearColor(0.2, 0.2, 0.2, 1); 74 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 75 | ctx.setDepthTest(true); 76 | 77 | var time = Date.now()/1000; 78 | 79 | ctx.setViewMatrix(Mat4.lookAt9(this.view, 80 | Math.cos(time * Math.PI) * 5, 81 | Math.sin(time * 0.5) * 0, 82 | Math.sin(time * Math.PI) * 5, 83 | 0,0,0,0,1,0 84 | ) 85 | ); 86 | 87 | ctx.bindTexture(this.tex, 0); 88 | ctx.bindProgram(this.program); 89 | 90 | ctx.setViewMatrix(this.view) 91 | 92 | ctx.bindMesh(this.mesh); 93 | ctx.drawMesh(); 94 | } 95 | }) 96 | -------------------------------------------------------------------------------- /context.createTextureCube/main.js: -------------------------------------------------------------------------------- 1 | //Ported from https://github.com/glo-js/glo-demo-primitive 2 | 3 | var Window = require('pex-sys/Window'); 4 | var Mat4 = require('pex-math/Mat4'); 5 | var Vec3 = require('pex-math/Vec3'); 6 | var createTorus = require('primitive-torus'); 7 | var createCube = require('primitive-cube'); 8 | var glslify = require('glslify-promise'); 9 | var parseDDS = require('./parse-dds'); 10 | var loadBinary = require('pex-io/loadBinary'); 11 | var GUI = require('pex-gui'); 12 | 13 | var isBrowser = require('is-browser'); 14 | var ASSET_PATH = isBrowser ? '../assets' : __dirname + '/../assets'; 15 | 16 | Window.create({ 17 | settings: { 18 | width: 1280, 19 | height: 720, 20 | type: '3d' 21 | }, 22 | resources: { 23 | skyboxVert: { glsl: glslify(__dirname + '/../assets/glsl/Skybox.vert') }, 24 | skyboxFrag: { glsl: glslify(__dirname + '/../assets/glsl/Skybox.frag') }, 25 | reflectionVert: { glsl: glslify(__dirname + '/../assets/glsl/CubemapReflection.vert') }, 26 | reflectionFrag: { glsl: glslify(__dirname + '/../assets/glsl/CubemapReflection.frag') }, 27 | //ddsCubemap: { binary: __dirname + '/../assets/cubemaps/ForestReflection.dds' } 28 | ddsCubemap: { binary: ASSET_PATH + '/cubemaps/hamarikyu_bridge_cube_pmrem32f.dds' } 29 | }, 30 | init: function() { 31 | var ctx = this.getContext(); 32 | 33 | this.gui = new GUI(ctx, this.getWidth(), this.getHeight()); 34 | 35 | this.model = Mat4.create(); 36 | this.projection = Mat4.perspective(Mat4.create(), 60, this.getAspectRatio(), 0.001, 50.0); 37 | this.view = Mat4.lookAt([], [3, 2, 2], [0, 0, 0], [0, 1, 0]); 38 | this.invView = Mat4.create(); 39 | 40 | ctx.setProjectionMatrix(this.projection); 41 | ctx.setViewMatrix(this.view); 42 | ctx.setModelMatrix(this.model); 43 | 44 | var res = this.getResources(); 45 | 46 | this.skyboxProgram = ctx.createProgram(res.skyboxVert, res.skyboxFrag); 47 | ctx.bindProgram(this.skyboxProgram); 48 | this.skyboxProgram.setUniform('uReflectionMap', 0); 49 | 50 | this.reflectionProgram = ctx.createProgram(res.reflectionVert, res.reflectionFrag); 51 | ctx.bindProgram(this.reflectionProgram); 52 | this.reflectionProgram.setUniform('uReflectionMap', 0); 53 | 54 | var torus = createTorus({ majorRadius: 1, minorRadius: 0.5 }); 55 | var torusAttributes = [ 56 | { data: torus.positions, location: ctx.ATTRIB_POSITION }, 57 | { data: torus.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 58 | { data: torus.normals, location: ctx.ATTRIB_NORMAL } 59 | ]; 60 | var torusIndices = { data: torus.cells }; 61 | this.torusMesh = ctx.createMesh(torusAttributes, torusIndices); 62 | 63 | var skybox = createCube(30); 64 | var skyboxAttributes = [ 65 | { data: skybox.positions, location: ctx.ATTRIB_POSITION }, 66 | { data: skybox.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 67 | { data: skybox.normals, location: ctx.ATTRIB_NORMAL } 68 | ]; 69 | var skyboxIndices = { data: skybox.cells }; 70 | this.skyboxMesh = ctx.createMesh(skyboxAttributes, skyboxIndices); 71 | 72 | var buf = res.ddsCubemap; 73 | var result = parseDDS(buf); 74 | if (result.format !== 'rgba32f') { 75 | throw new Error('Unsupported cubemap data format ' + result.format); 76 | } 77 | 78 | //dds images are orgianized by faces by mipmaps 79 | //so +x0 +x1 +x2 ... -x0 -x1 -x2 ... +y0.. 80 | var levels = result.images.length / 6; 81 | var faces = result.images.map(function(img, imgIndex) { 82 | var faceData = new Float32Array(buf.slice(img.offset, img.offset + img.length)) 83 | return { 84 | face: Math.floor(imgIndex / levels), 85 | lod: imgIndex % levels, 86 | width: img.shape[0], 87 | height: img.shape[1], 88 | data: faceData 89 | } 90 | }) 91 | this.tex = ctx.createTextureCube(faces, faces[0].width, faces[0].height, { type: ctx.FLOAT }); 92 | this.gui.addTextureCube('EnvMap', this.tex); 93 | }, 94 | seconds: 0, 95 | prevTime: Date.now(), 96 | draw: function() { 97 | var now = Date.now(); 98 | this.seconds += (now - this.prevTime)/1000; 99 | this.prevTime = now; 100 | 101 | var ctx = this.getContext(); 102 | ctx.setClearColor(0.2, 0.2, 0.2, 1); 103 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 104 | ctx.setDepthTest(true); 105 | 106 | var speed = 0.1; 107 | var time = speed * Date.now()/1000; 108 | 109 | Mat4.lookAt9(this.view, 110 | Math.cos(time * Math.PI) * 5, 111 | 1 + Math.sin(time * 0.5) * 0, 112 | Math.sin(time * Math.PI) * 5, 113 | 0,0,0,0,1,0 114 | ); 115 | ctx.setViewMatrix(this.view); 116 | 117 | ctx.bindTexture(this.tex, 0); 118 | 119 | ctx.bindProgram(this.reflectionProgram); 120 | ctx.bindMesh(this.torusMesh); 121 | ctx.drawMesh(); 122 | 123 | ctx.bindProgram(this.skyboxProgram); 124 | ctx.bindMesh(this.skyboxMesh); 125 | ctx.drawMesh(); 126 | 127 | this.gui.draw(); 128 | } 129 | }) 130 | -------------------------------------------------------------------------------- /context.transform/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var PerspCamera = require('pex-cam/PerspCamera'); 3 | var Draw = require('pex-draw'); 4 | var Vec3 = require('pex-math/Vec3'); 5 | var Mat4 = require('pex-math/Mat4'); 6 | var Quat = require('pex-math/Quat'); 7 | 8 | var CUBE_SCALE = [0.5,0.5,0.5]; 9 | var OFFSET_X = [1,0,0]; 10 | var OFFSET_Z = [0,0,1]; 11 | var OFFSET_Y = [0,0.25,0]; 12 | var OFFSET = [-1.5,0,-1.5]; 13 | 14 | Window.create({ 15 | settings : { 16 | width : 800, 17 | height : 600 18 | }, 19 | resources : { 20 | vert : {text : __dirname + '/../assets/glsl/ShowColors.vert'}, 21 | frag : {text : __dirname + '/../assets/glsl/ShowColors.frag' } 22 | }, 23 | init : function(){ 24 | var ctx = this.getContext(); 25 | var resources = this.getResources(); 26 | 27 | this._program = ctx.createProgram(resources.vert,resources.frag); 28 | this._draw = new Draw(this.getContext()); 29 | 30 | this._camera = new PerspCamera(45,this.getAspectRatio(),0.001,20.0); 31 | 32 | ctx.bindProgram(this._program); 33 | ctx.setDepthTest(true); 34 | ctx.setClearColor(0.125,0.125,0.125,1); 35 | ctx.setProjectionMatrix(this._camera.getProjectionMatrix()); 36 | 37 | this._t = 0; 38 | }, 39 | draw : function(){ 40 | var ctx = this.getContext(); 41 | var draw = this._draw; 42 | var time = this._t; 43 | var camera = this._camera; 44 | 45 | camera.lookAt( 46 | [Math.cos(time * 0.05 * Math.PI) * 5, 5, Math.sin(time * 0.05 * Math.PI) * 5], 47 | [0,0,0], 48 | [0,1,0] 49 | ); 50 | 51 | ctx.setViewMatrix(camera.getViewMatrix()); 52 | 53 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 54 | 55 | function drawCube(){ 56 | ctx.pushModelMatrix(); 57 | ctx.scale(CUBE_SCALE); 58 | draw.drawPivotAxes(); 59 | draw.drawCubeColored(); 60 | ctx.popModelMatrix(); 61 | } 62 | 63 | function drawPosition(position){ 64 | ctx.pushModelMatrix(); 65 | ctx.translate(position); 66 | draw.drawCube(0.025); 67 | ctx.popModelMatrix(); 68 | } 69 | 70 | function drawPivotSmall(){ 71 | ctx.pushModelMatrix(); 72 | ctx.scale([0.5,0.5,0.5]); 73 | draw.drawPivotAxes(); 74 | ctx.popModelMatrix(); 75 | } 76 | 77 | //draw grid 78 | draw.setLineWidth(1.5); 79 | draw.setColor4(0.15,0.15,0.15,1.0); 80 | draw.drawGrid([20,20],40); 81 | draw.setLineWidth(1); 82 | draw.setColor4(0.145,0.145,0.145,1.0); 83 | draw.drawGrid([20,20],80); 84 | 85 | //draw pivot 86 | ctx.pushModelMatrix(); 87 | ctx.translate([0,0.125,0]); 88 | draw.drawPivotAxes(); 89 | ctx.popModelMatrix(); 90 | 91 | //transform model with matrix stack 92 | ctx.pushModelMatrix(); 93 | ctx.translate(OFFSET_Y); 94 | ctx.pushModelMatrix(); 95 | ctx.translate(OFFSET); 96 | 97 | //rotation 98 | ctx.pushModelMatrix(); 99 | //rotate by axis angle 100 | ctx.pushModelMatrix(); 101 | var rotationAngle = -time * Math.PI; 102 | var rotationAxis = [0,1,0]; 103 | drawPivotSmall(); 104 | ctx.rotate(rotationAngle,rotationAxis); 105 | drawCube(); 106 | ctx.popModelMatrix(); 107 | 108 | //rotate by angle per axis 109 | ctx.translate(OFFSET_X); 110 | ctx.pushModelMatrix(); 111 | var rotationPerAxis = [0,rotationAngle,0]; 112 | drawPivotSmall(); 113 | ctx.rotateXYZ(rotationPerAxis); 114 | drawCube(); 115 | ctx.popModelMatrix(); 116 | 117 | //rotate by quaternion - z is forward 118 | ctx.translate(OFFSET_X); 119 | ctx.pushModelMatrix(); 120 | var target = [Math.cos(-rotationAngle),0,Math.sin(-rotationAngle)]; 121 | var origin = [0,0,0]; 122 | var orientation = Quat.fromTo(Quat.create(),origin,target,Vec3.yAxis()); 123 | 124 | drawPivotSmall(); 125 | draw.setColor4(1,1,1,1); 126 | drawPosition(Vec3.scale(Vec3.copy(target),0.55)); 127 | ctx.rotateQuat(orientation); 128 | drawCube(); 129 | ctx.popModelMatrix(); 130 | ctx.popModelMatrix(); 131 | 132 | //translation 133 | ctx.translate(OFFSET_Z); 134 | ctx.pushModelMatrix(); 135 | //translate by vector 136 | ctx.pushModelMatrix(); 137 | var translationXYZ = [0,Math.sin(time * Math.PI) * 0.5,0]; 138 | ctx.translate(translationXYZ); 139 | drawCube(); 140 | ctx.popModelMatrix(); 141 | 142 | //translate manual by translation matrix 143 | ctx.translate(OFFSET_X); 144 | ctx.pushModelMatrix(); 145 | var translation = Mat4.translate(Mat4.create(),translationXYZ); 146 | ctx.multMatrix(translation); 147 | drawCube(); 148 | ctx.popModelMatrix(); 149 | ctx.popModelMatrix(); 150 | 151 | //scale 152 | ctx.translate(OFFSET_Z); 153 | ctx.pushModelMatrix(); 154 | ctx.translate(OFFSET_X); 155 | ctx.translate(OFFSET_X); 156 | //scale xyz 157 | ctx.pushModelMatrix(); 158 | var scaleXYZ = Vec3.create(); 159 | scaleXYZ[0] = scaleXYZ[1] = scaleXYZ[2] = 0.5 + (0.5 + Math.sin(-time * Math.PI) * 0.5) * 0.5; 160 | ctx.scale(scaleXYZ); 161 | drawCube(); 162 | ctx.popModelMatrix(); 163 | 164 | //scale manual by scale matrix 165 | ctx.translate(OFFSET_X); 166 | ctx.pushModelMatrix(); 167 | var scale = Mat4.scale(Mat4.create(),scaleXYZ); 168 | ctx.multMatrix(scale); 169 | drawCube(); 170 | ctx.popModelMatrix(); 171 | ctx.popModelMatrix(); 172 | 173 | //translate + scale + rotate 174 | ctx.translate(OFFSET_Z); 175 | ctx.pushModelMatrix(); 176 | //translate by position + scale xyz + rotate by axis angle 177 | ctx.pushModelMatrix(); 178 | ctx.translate(translationXYZ); 179 | ctx.scale(scaleXYZ); 180 | ctx.rotate(time * Math.PI,[0,1,0]); 181 | drawCube(); 182 | ctx.popModelMatrix(); 183 | ctx.popModelMatrix(); 184 | 185 | ctx.translate(OFFSET_X); 186 | ctx.pushModelMatrix(); 187 | //translate by position + scale xyz + rotate by rotation per axis 188 | ctx.pushModelMatrix(); 189 | ctx.translate(translationXYZ); 190 | ctx.scale(scaleXYZ); 191 | ctx.rotateXYZ(rotationPerAxis); 192 | drawCube(); 193 | ctx.popModelMatrix(); 194 | ctx.popModelMatrix(); 195 | 196 | ctx.translate(OFFSET_X); 197 | ctx.pushModelMatrix(); 198 | //manual translate by translation matrix + manual scale by scale matrix + rotation by quaternion 199 | ctx.pushModelMatrix(); 200 | ctx.multMatrix(translation); 201 | ctx.multMatrix(scale); 202 | ctx.rotateQuat(orientation); 203 | drawCube(); 204 | ctx.popModelMatrix(); 205 | ctx.popModelMatrix(); 206 | 207 | ctx.popModelMatrix(); 208 | ctx.popModelMatrix(); 209 | 210 | this._t += 1.0 / 60.0; 211 | } 212 | }); 213 | -------------------------------------------------------------------------------- /draw.drawRect.textured/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Screen = require('pex-sys/Screen'); 3 | var Draw = require('pex-draw/Draw'); 4 | var OrthoCamera = require('pex-cam/OrthoCamera'); 5 | var glslify = require('glslify-promise'); 6 | var random = require('pex-random'); 7 | 8 | var frame = 0; 9 | 10 | Window.create({ 11 | settings: { 12 | width: Screen.getWidth()/2, 13 | height: Screen.getHeight()/2 14 | }, 15 | resources: { 16 | showColorsVert: { glsl: glslify(__dirname + '/../assets/glsl/Textured.vert') }, 17 | showColorsFrag: { glsl: glslify(__dirname + '/../assets/glsl/Textured.frag') }, 18 | plaskImage: { image: __dirname + '/../assets/textures/plask.png'} 19 | }, 20 | mousePos: [0, 0], 21 | mouseColor: [1, 0, 0, 1], 22 | mouseDownColor: [1, 1, 0, 1], 23 | mouseDown: false, 24 | mouseSize: 80, 25 | mouseDownSize: 120, 26 | init: function() { 27 | var ctx = this.getContext(); 28 | var res = this.getResources(); 29 | 30 | this.camera = new OrthoCamera(this.getWidth(), this.getHeight()) 31 | this.camera.setOrtho(0, this.getWidth(), this.getHeight(), 0, -10, 10); 32 | 33 | this._draw = new Draw(ctx); 34 | this.program = ctx.createProgram(res.showColorsVert, res.showColorsFrag); 35 | this.texture = ctx.createTexture2D(res.plaskImage); 36 | 37 | var w = this.getWidth(); 38 | var h = this.getHeight(); 39 | 40 | this.rectangles = []; 41 | for(var i=0; i<10; i++) { 42 | var x = random.int(0, w); 43 | var y = random.int(0, h); 44 | var rectSize = random.int(20, 100); 45 | this.rectangles.push([[x, y], [x + rectSize, y + rectSize]]); 46 | } 47 | }, 48 | draw: function() { 49 | var ctx = this.getContext(); 50 | 51 | ctx.setProjectionMatrix(this.camera.getProjectionMatrix()); 52 | ctx.setViewMatrix(this.camera.getViewMatrix()); 53 | 54 | ctx.setClearColor(0.2, 0.2, 0.2, 1.0); 55 | 56 | ctx.clear(ctx.COLOR_BIT); 57 | 58 | var size = this.mouseDown ? this.mouseDownSize : this.mouseSize; 59 | 60 | ctx.bindTexture(this.texture); 61 | ctx.bindProgram(this.program); 62 | ctx.pushModelMatrix(); 63 | this._draw.setColor([1, 1, 1, 1]); 64 | this.rectangles.forEach(function(rect) { 65 | ctx.pushModelMatrix(); 66 | ctx.translate([rect[0][0], rect[0][1], 0]); 67 | this._draw.drawRect(rect[1][0] - rect[0][0], rect[1][1] - rect[0][1]); 68 | ctx.popModelMatrix(); 69 | }.bind(this)) 70 | 71 | ctx.popModelMatrix(); 72 | } 73 | }) 74 | -------------------------------------------------------------------------------- /draw/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Mat4 = require('pex-math/Mat4'); 3 | var Draw = require('pex-draw'); 4 | var glslify = require('glslify-promise'); 5 | 6 | var PerspCamera = require('pex-cam/PerspCamera'); 7 | 8 | var COLOR_WHITE = [1,1,1,1]; 9 | var COLOR_BLACK = [0,0,0,1]; 10 | var COLOR_RED = [1,0,0,1]; 11 | var COLOR_GREEN = [0,1,0,1]; 12 | var COLOR_BLUE = [0,0,1,1]; 13 | var COLOR_PURPLE = [1,0,1,1]; 14 | 15 | Window.create({ 16 | settings: { 17 | width: 800, 18 | height: 600, 19 | type: '3d' 20 | }, 21 | resources: { 22 | showColorsVert: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.vert') }, 23 | showColorsFrag: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.frag') }, 24 | }, 25 | init: function() { 26 | var ctx = this.getContext(); 27 | var res = this.getResources(); 28 | var program = ctx.createProgram(res.showColorsVert, res.showColorsFrag); 29 | ctx.bindProgram(program); 30 | this.t = 0; 31 | 32 | ctx.setClearColor(0.2,0.2,0.2,1.0); 33 | ctx.setDepthTest(true); 34 | 35 | this.camera = new PerspCamera(45.0,this.getAspectRatio(),0.01,40.0); 36 | ctx.setProjectionMatrix(this.camera.getProjectionMatrix()); 37 | 38 | this._draw = new Draw(ctx); 39 | 40 | this._randomPositionsFlat = new Array(128 * 3); 41 | this._randomPositions = new Array(128); 42 | for(var i = 0, j = 0, l = this._randomPositionsFlat.length, x, y, z; i < l; i+=3, j+=1){ 43 | x = this._randomPositionsFlat[i ] = -0.5 + Math.random(); 44 | y = this._randomPositionsFlat[i+1] = -0.5 + Math.random(); 45 | z = this._randomPositionsFlat[i+2] = -0.5 + Math.random(); 46 | this._randomPositions[j] = [x,y,z]; 47 | } 48 | }, 49 | draw: function() { 50 | var ctx = this.getContext(); 51 | var draw = this._draw; 52 | var time = this.t; 53 | 54 | var offset = [2.5,0,0]; 55 | 56 | 57 | this.camera.lookAt([Math.cos(time * 0.125 * Math.PI) * 10,10,Math.sin(time * 0.125 * Math.PI) * 10],[0,0,0]); 58 | 59 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 60 | 61 | ctx.setDepthTest(false); 62 | draw.setColor4(0,0.125,0.125,1); 63 | draw.drawFullscreenWindowRect(this.getWidth(),this.getHeight(),true); 64 | ctx.setDepthTest(true); 65 | 66 | ctx.setViewMatrix(this.camera.getViewMatrix()); 67 | 68 | draw.setLineWidth(1); 69 | draw.setColor4(0.0,0.125,0.25,1); 70 | draw.drawGrid([30,30],30); 71 | 72 | ctx.pushModelMatrix(); 73 | ctx.translate([0,0.0125,0]); 74 | draw.drawPivotAxes(2); 75 | draw.drawPivotRotation(1.5); 76 | ctx.popModelMatrix(); 77 | 78 | 79 | draw.setColor4(1,0,1,1); 80 | draw.setLineWidth(1); 81 | 82 | ctx.pushModelMatrix(); 83 | ctx.translate([0,0.5125,0]); 84 | draw.setColor4(0,0,1,1); 85 | //draw.drawLineStrip([[0,0,0],[2,0,0],[2,2,0]]); 86 | ctx.pushModelMatrix(); 87 | ctx.translate([-2.5,0,-5]); 88 | draw.setLineWidth(5); 89 | draw.setColor(COLOR_WHITE); 90 | draw.drawLineStripFlat(this._randomPositionsFlat); 91 | ctx.translate(offset); 92 | draw.setLineWidth(1); 93 | draw.setColor(COLOR_PURPLE); 94 | draw.drawLineStrip(this._randomPositions); 95 | ctx.translate(offset); 96 | draw.setLineWidth(1); 97 | draw.setColor(COLOR_BLUE); 98 | draw.drawPoints(this._randomPositions); 99 | ctx.translate(offset); 100 | draw.setPointSize(3); 101 | draw.setColor(COLOR_BLACK); 102 | draw.drawPoints(this._randomPositions); 103 | ctx.popModelMatrix(); 104 | 105 | ctx.pushModelMatrix(); 106 | ctx.translate([-2.5,0,-2.5]); 107 | draw.setColor(COLOR_BLACK); 108 | draw.drawCubeStroked(); 109 | ctx.translate(offset); 110 | draw.setColor(COLOR_PURPLE); 111 | draw.drawCubePoints(); 112 | ctx.translate(offset); 113 | draw.drawCubeColored(); 114 | ctx.translate(offset); 115 | draw.setColor4(0.5 + Math.sin(time * 10.0) * 0.5,0,0,1); 116 | draw.drawCube(); 117 | ctx.popModelMatrix(); 118 | 119 | ctx.pushModelMatrix(); 120 | ctx.translate([-2.5,0,0]); 121 | draw.drawRect(); 122 | ctx.translate(offset); 123 | draw.setColor(COLOR_GREEN); 124 | draw.drawRectPoints(); 125 | ctx.translate(offset); 126 | draw.setColor(COLOR_GREEN); 127 | draw.drawRectStroked(); 128 | ctx.translate(offset); 129 | draw.setLineWidth(4); 130 | draw.setColor(COLOR_WHITE); 131 | draw.drawLines([ 132 | [[1,0,0],[0,1,0]], 133 | [[0,0,0],[1,1,1]] 134 | ]); 135 | draw.setColor(COLOR_RED); 136 | draw.drawLinesFlat([ 137 | 0,0,1,1,0,1 138 | ]); 139 | ctx.popModelMatrix(); 140 | 141 | ctx.pushModelMatrix(); 142 | ctx.translate([-2.5,0,2.5]); 143 | draw.setColor(COLOR_GREEN); 144 | draw.setCircleNumSegments(16); 145 | draw.drawCircle(1); 146 | ctx.translate(offset); 147 | draw.setColor(COLOR_WHITE); 148 | draw.setLineWidth(1); 149 | draw.setCircleNumSegments(5); 150 | draw.drawCircleStroked(1); 151 | ctx.popModelMatrix(); 152 | ctx.popModelMatrix(); 153 | 154 | this.t += 1 / 60; 155 | } 156 | }); 157 | -------------------------------------------------------------------------------- /geom.Plane/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var PerspCamera = require('pex-cam/PerspCamera'); 3 | var Draw = require('pex-draw'); 4 | var Vec3 = require('pex-math/Vec3'); 5 | var Plane = require('pex-geom/Plane'); 6 | var glslify = require('glslify-promise'); 7 | 8 | Window.create({ 9 | settings : { 10 | width : 800, 11 | height : 600 12 | }, 13 | resources : { 14 | vert : {glsl : glslify(__dirname + '/../assets/glsl/ShowColors.vert') }, 15 | frag : {glsl : glslify(__dirname + '/../assets/glsl/ShowColors.frag') } 16 | }, 17 | init : function(){ 18 | var ctx = this.getContext(); 19 | var resources = this.getResources(); 20 | 21 | this._program = ctx.createProgram(resources.vert,resources.frag); 22 | ctx.bindProgram(this._program); 23 | 24 | this._camera = new PerspCamera(45,this.getAspectRatio(),0.001,20.0); 25 | this._camera.lookAt([0,0,0],[3,3,3]); 26 | 27 | this._draw = new Draw(ctx); 28 | 29 | ctx.setClearColor(0.125,0.125,0.125,1); 30 | ctx.setDepthTest(true); 31 | ctx.setProjectionMatrix(this._camera.getProjectionMatrix()); 32 | 33 | this._planes = new Array(8); 34 | for(var i = 0, l = this._planes.length; i < l; ++i){ 35 | this._planes[i] = Plane.create(); 36 | } 37 | }, 38 | draw : function(){ 39 | var ctx = this.getContext(); 40 | var draw = this._draw; 41 | 42 | var time = this.getTime().getElapsedSeconds(); 43 | var frame = this.getTime().getElapsedFrames(); 44 | var angle = time * Math.PI * 0.125 - Math.PI * 0.5; 45 | var distance = 5; 46 | 47 | this._camera.lookAt([Math.cos(angle) * distance,distance,Math.sin(angle) * distance],[0,0,0],[0,1,0]); 48 | 49 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 50 | 51 | ctx.setViewMatrix(this._camera.getViewMatrix()); 52 | draw.drawGrid([5,5],20); 53 | 54 | if(frame == 0 || frame % 20 === 0){ 55 | for(var i = 0, l = this._planes.length; i < l; ++i){ 56 | Vec3.set3(this._planes[i][0], 57 | (-0.5 + Math.random()) * 5, 58 | (-0.5 + Math.random()) * 5, 59 | (-0.5 + Math.random()) * 5 60 | ); 61 | Vec3.set3(this._planes[i][1], 62 | (-0.5 + Math.random()) * 2, 63 | (-0.5 + Math.random()) * 2, 64 | (-0.5 + Math.random()) * 2 65 | ); 66 | } 67 | } 68 | 69 | for(var i = 0, l = this._planes.length; i < l; ++i){ 70 | draw.debugPlane(this._planes[i]); 71 | } 72 | } 73 | }); 74 | -------------------------------------------------------------------------------- /geom.Ray/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var PerspCamera = require('pex-cam/PerspCamera'); 3 | var Draw = require('pex-draw'); 4 | var Vec3 = require('pex-math/Vec3'); 5 | var Plane = require('pex-geom/Plane'); 6 | var Ray = require('pex-geom/Ray'); 7 | var glslify = require('glslify-promise'); 8 | 9 | Window.create({ 10 | settings : { 11 | width : 800, 12 | height : 600 13 | }, 14 | resources : { 15 | vert : { glsl : glslify(__dirname + '/../assets/glsl/ShowColors.vert') }, 16 | frag : { glsl : glslify(__dirname + '/../assets/glsl/ShowColors.frag') } 17 | }, 18 | init : function(){ 19 | var ctx = this.getContext(); 20 | var resources = this.getResources(); 21 | 22 | this._program = ctx.createProgram(resources.vert,resources.frag); 23 | ctx.bindProgram(this._program); 24 | 25 | this._camera = new PerspCamera(45,this.getAspectRatio(),0.0001,20.0); 26 | this._camera.lookAt([0,0,0],[3,3,3]); 27 | 28 | this._draw = new Draw(ctx); 29 | 30 | ctx.setClearColor(0.125,0.125,0.125,1); 31 | ctx.setDepthTest(true); 32 | ctx.setProjectionMatrix(this._camera.getProjectionMatrix()); 33 | 34 | this._planes = new Array(3); 35 | for(var i = 0, l = this._planes.length; i < l; ++i){ 36 | this._planes[i] = Plane.create(); 37 | } 38 | 39 | this._ray = Ray.create(); 40 | this._ray[1] = [0.0001,1,0]; 41 | }, 42 | draw : function(){ 43 | var ctx = this.getContext(); 44 | var draw = this._draw; 45 | 46 | var time = this.getTime().getElapsedSeconds(); 47 | var frame = this.getTime().getElapsedFrames(); 48 | var angle = time * Math.PI * 0.125 - Math.PI * 0.5; 49 | var distance = 5; 50 | 51 | this._camera.lookAt([Math.cos(angle) * distance,distance,Math.sin(angle) * distance],[0,0,0],[0,1,0]); 52 | 53 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 54 | 55 | ctx.setViewMatrix(this._camera.getViewMatrix()); 56 | draw.setColor4(0.0625,0.0625,0.0625,1); 57 | draw.drawGrid([5,5],20); 58 | 59 | if(frame == 0 || frame % 120 === 0){ 60 | for(var i = 0, l = this._planes.length; i < l; ++i){ 61 | var angle = Math.random() * Math.PI * 2; 62 | Vec3.set3(this._planes[i][0], 63 | Math.cos(angle), 64 | 0, 65 | Math.sin(angle) 66 | ); 67 | Vec3.set3(this._planes[i][1], 68 | Math.cos(angle), 69 | 0, 70 | Math.sin(angle) 71 | ); 72 | } 73 | } 74 | 75 | for(var i = 0, l = this._planes.length; i < l; ++i){ 76 | draw.debugPlane(this._planes[i]); 77 | } 78 | 79 | angle = time * Math.PI * 0.25; 80 | 81 | Vec3.normalize(Vec3.set3(this._ray[1], 82 | Math.cos(angle) * 0.45, 83 | Math.sin(time) * 0.125, 84 | Math.sin(angle) * 0.45) 85 | ); 86 | 87 | draw.debugRay(this._ray,true); 88 | 89 | for(var i = 0, l = this._planes.length, plane, planePoint, point; i < l; ++i){ 90 | plane = this._planes[i]; 91 | planePoint = plane[0]; 92 | point = Plane.getRayIntersection(plane,this._ray); 93 | 94 | if(point === null){ 95 | continue; 96 | } 97 | 98 | draw.setColor4(1,0,0,1); 99 | draw.drawLine(planePoint,point,1); 100 | 101 | ctx.pushModelMatrix(); 102 | ctx.translate(point); 103 | draw.setColor4(1,1,1,1); 104 | draw.drawCube(0.05); 105 | ctx.popModelMatrix(); 106 | } 107 | } 108 | }); 109 | -------------------------------------------------------------------------------- /geom.Rect/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Draw = require('pex-draw'); 3 | var Rect = require('pex-geom/Rect'); 4 | var Vec3 = require('pex-math/Vec3'); 5 | var Mat4 = require('pex-math/Mat4'); 6 | 7 | Window.create({ 8 | settings : { 9 | width : 800, 10 | height : 600 11 | }, 12 | resources : { 13 | vert : {text : __dirname + '/../assets/glsl/ShowColors.vert'}, 14 | frag : {text : __dirname + '/../assets/glsl/ShowColors.frag'} 15 | }, 16 | init : function(){ 17 | var ctx = this.getContext(); 18 | var resources = this.getResources(); 19 | 20 | this._program = ctx.createProgram(resources.vert, resources.frag); 21 | ctx.bindProgram(this._program); 22 | 23 | this._draw = new Draw(ctx); 24 | 25 | ctx.setClearColor(0.125,0.125,0.125, 1); 26 | ctx.setProjectionMatrix(Mat4.ortho(Mat4.create(),0,this.getWidth(),this.getHeight(),0,-1,1)); 27 | 28 | this._points = [[],[],[],[]]; 29 | this._rects = [Rect.create(),Rect.create(),Rect.create(),Rect.create()]; 30 | }, 31 | draw : function(){ 32 | var ctx = this.getContext(); 33 | var draw = this._draw; 34 | var windowWidth = this.getWidth(); 35 | var windowHeight = this.getHeight(); 36 | var points = this._points; 37 | var rects = this._rects; 38 | 39 | var elapsedFrames = this.getTime().getElapsedFrames(); 40 | 41 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 42 | 43 | function createRandomPoints(scale,out){ 44 | out.length = Math.floor(Math.random() * 1000) * 2; 45 | var center = [(-0.5 + Math.random()) * windowWidth * 0.5,(-0.5 + Math.random()) * windowHeight * 0.5]; 46 | 47 | for(var i = 0, l = out.length; i < l; i+=2){ 48 | out[i ] = center[0] + (-0.5 + Math.random()) * scale; 49 | out[i+1] = center[1] + (-0.5 + Math.random()) * scale; 50 | } 51 | 52 | return out; 53 | } 54 | 55 | function updatePoints(){ 56 | createRandomPoints(100,points[0]); 57 | createRandomPoints( 75,points[1]); 58 | createRandomPoints( 50,points[2]); 59 | createRandomPoints( 25,points[3]); 60 | for(var i = 0, l = points.length; i < l; ++i){ 61 | Rect.includePointsFlat(Rect.setEmpty(rects[i]),points[i]); 62 | } 63 | } 64 | 65 | function drawPoints2d(points){ 66 | var temp = Vec3.create(); 67 | for(var i = 0, l = points.length; i < l; i+=2){ 68 | temp[0] = points[i ]; 69 | temp[1] = points[i+1]; 70 | ctx.pushModelMatrix(); 71 | ctx.translate(temp); 72 | draw.drawCircle(2); 73 | ctx.popModelMatrix(); 74 | } 75 | } 76 | 77 | function drawBoundingRect(rect){ 78 | if(Rect.isEmpty(rect)){ 79 | return; 80 | } 81 | ctx.pushModelMatrix(); 82 | ctx.translate([rect[0][0], rect[0][1], 0]); 83 | draw.drawRectStroked(Rect.getWidth(rect), Rect.getHeight(rect)); 84 | var center = Rect.getCenter(rect); 85 | center = [center[0], center[1], 0]; 86 | ctx.translate(center); 87 | draw.setColor4(1, 0, 0, 1); 88 | draw.drawCircle(4); 89 | ctx.popModelMatrix(); 90 | } 91 | 92 | ctx.loadIdentity(); 93 | ctx.translate([windowWidth * 0.5, windowHeight * 0.5, 0]); 94 | 95 | ctx.pushModelMatrix(); 96 | ctx.rotateXYZ([Math.PI * 0.5,0,0]); 97 | draw.setColor4(0.075,0.075,0.075,1); 98 | draw.drawGrid([windowWidth,windowWidth],40); 99 | ctx.popModelMatrix(); 100 | 101 | if(elapsedFrames == 0 || (elapsedFrames % 30 == 0)){ 102 | updatePoints(); 103 | } 104 | 105 | draw.setColor4(1, 1, 1, 1); 106 | drawPoints2d(points[0]); 107 | draw.setColor4(0, 0, 1, 1); 108 | drawBoundingRect(rects[0]); 109 | 110 | draw.setColor4(1, 0, 1, 1); 111 | drawPoints2d(points[1]); 112 | draw.setColor4(0, 1, 1, 1); 113 | drawBoundingRect(rects[1]); 114 | 115 | draw.setColor4(1,0,0,1); 116 | drawPoints2d(points[2]); 117 | draw.setColor4(1,1,0,1); 118 | drawBoundingRect(rects[2]); 119 | 120 | draw.setColor4(0,1,1,1); 121 | drawPoints2d(points[3]); 122 | draw.setColor4(1,0,1,1); 123 | drawBoundingRect(rects[3]); 124 | 125 | var rectAll = Rect.createFromRects(rects); 126 | draw.setColor4(1, 1, 1, 1); 127 | drawBoundingRect(rectAll); 128 | 129 | 130 | var mousePosition = this.getMouse().getPos(); 131 | mousePosition[0] -= windowWidth * 0.5; 132 | mousePosition[1] -= windowHeight * 0.5; 133 | 134 | var mouseIsInside = Rect.containsPoint(rectAll,mousePosition); 135 | 136 | draw.setColor4(1,0,0,1); 137 | ctx.pushModelMatrix(); 138 | ctx.translate([mousePosition[0],mousePosition[1],0]); 139 | draw.drawCircle(5); 140 | ctx.popModelMatrix(); 141 | 142 | ctx.pushModelMatrix(); 143 | draw.setColor(mouseIsInside ? [1,1,1,1] : [1,0,0,1]); 144 | var clamped = Rect.clampPoint(rectAll,[mousePosition[0],mousePosition[1]]); 145 | ctx.translate([clamped[0],clamped[1],0]); 146 | draw.drawCircleStroked(10); 147 | ctx.popModelMatrix(); 148 | } 149 | }); 150 | -------------------------------------------------------------------------------- /gui/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Mat4 = require('pex-math/Mat4'); 3 | var Vec3 = require('pex-math/Vec3'); 4 | var createTorus = require('primitive-torus'); 5 | var glslify = require('glslify-promise'); 6 | var GUI = require('pex-gui'); 7 | 8 | var State = { 9 | scale: 1, 10 | rotate: false, 11 | size: [1, 0.2], 12 | rotation: [0,0,0], 13 | bgColor: [0.92, 0.2, 0.2, 1.0], 14 | textures: [], 15 | currentTexture: 0, 16 | text: 'test message' 17 | }; 18 | 19 | Window.create({ 20 | settings: { 21 | type: '3d', 22 | width: 1280, 23 | height: 720 24 | }, 25 | resources: { 26 | vert: { glsl: glslify(__dirname + '/../assets/glsl/RepeatedTexture.vert') }, 27 | frag: { glsl: glslify(__dirname + '/../assets/glsl/RepeatedTexture.frag') }, 28 | palette: { image: __dirname + '/../assets/palettes/rainbow.jpg'}, 29 | plask: { image: __dirname + '/../assets/textures/plask.png'}, 30 | opengl: { image: __dirname + '/../assets/textures/opengl.png'}, 31 | test: { image: __dirname + '/../assets/textures/test.png'}, 32 | }, 33 | init: function() { 34 | var ctx = this.getContext(); 35 | var res = this.getResources(); 36 | 37 | this.gui = new GUI(ctx, this.getWidth(), this.getHeight()); 38 | this.gui.addHeader('Settings'); 39 | this.gui.addParam('Scale', State, 'scale', { min: 0.1, max: 2}); 40 | this.gui.addParam('Rotate camera', State, 'rotate'); 41 | this.gui.addParam('Size', State, 'size', { min: 0.1, max: 2 }, this.onTorusSizeChange.bind(this)); 42 | this.gui.addParam('Rotation', State, 'rotation', { min: -Math.PI/2, max: Math.PI/2 }); 43 | this.gui.addSeparator(); 44 | this.gui.addHeader('Color'); 45 | this.gui.addParam('BG Color [RGBA]', State, 'bgColor'); 46 | this.gui.addParam('BG Color [HSB]', State, 'bgColor', { type: 'color', palette: res.palette }); 47 | this.gui.addSeparator(); 48 | this.gui.addParam('Test message', State, 'text', {}, function(e) { 49 | console.log('New text: ', e); 50 | }).setPosition(180, 10) 51 | 52 | this.addEventListener(this.gui); 53 | 54 | this.model = Mat4.create(); 55 | this.projection = Mat4.perspective(Mat4.create(), 45, this.getAspectRatio(), 0.001, 10.0); 56 | this.view = Mat4.lookAt([], [3, 2, 2], [0, 0, 0], [0, 1, 0]); 57 | 58 | ctx.setProjectionMatrix(this.projection); 59 | ctx.setViewMatrix(this.view); 60 | ctx.setModelMatrix(this.model); 61 | 62 | 63 | 64 | this.program = ctx.createProgram(res.vert, res.frag); 65 | ctx.bindProgram(this.program); 66 | this.program.setUniform('uRepeat', [ 8, 8 ]); 67 | this.program.setUniform('uTexture', 0); 68 | 69 | var torus = createTorus(); 70 | 71 | var attributes = [ 72 | { data: torus.positions, location: ctx.ATTRIB_POSITION }, 73 | { data: torus.uvs, location: ctx.ATTRIB_TEX_COORD_0 }, 74 | { data: torus.normals, location: ctx.ATTRIB_NORMAL } 75 | ]; 76 | var indices = { data: torus.cells, usage: ctx.STATIC_DRAW }; 77 | this.mesh = ctx.createMesh(attributes, indices); 78 | 79 | var img = new Uint8Array([ 80 | 0xff, 0xff, 0xff, 0xff, 0xcc, 0xcc, 0xcc, 0xff, 81 | 0xcc, 0xcc, 0xcc, 0xff, 0xff, 0xff, 0xff, 0xff 82 | ]); 83 | 84 | State.textures.push(ctx.createTexture2D(img, 2, 2, { 85 | repeat: true, 86 | minFilter: ctx.NEAREST, 87 | magFilter: ctx.NEAREST 88 | })) 89 | 90 | State.textures.push(ctx.createTexture2D(res.plask, res.plask.width, res.plask.height, { repeat: true })); 91 | State.textures.push(ctx.createTexture2D(res.opengl, res.opengl.width, res.opengl.height, { repeat: true })); 92 | State.textures.push(ctx.createTexture2D(res.test, res.test.width, res.test.height, { repeat: true })); 93 | 94 | this.gui.addSeparator(); 95 | this.gui.addHeader('Texture'); 96 | this.gui.addTexture2D('Default', State.textures[0]); 97 | this.gui.addTexture2DList('Default', State, 'currentTexture', State.textures.map(function(tex, index) { 98 | return { texture: tex, value: index } 99 | })); 100 | }, 101 | onTorusSizeChange: function() { 102 | var ctx = this.getContext(); 103 | var torus = createTorus({ majorRadius: State.size[0], minorRadius: State.size[1] }); 104 | this.mesh.updateAttribute(ctx.ATTRIB_POSITION, torus.positions); 105 | }, 106 | seconds: 0, 107 | prevTime: Date.now(), 108 | draw: function() { 109 | //if (!this.mesh) return; 110 | var now = Date.now(); 111 | this.seconds += (now - this.prevTime)/1000; 112 | this.prevTime = now; 113 | 114 | var ctx = this.getContext(); 115 | ctx.setClearColor(State.bgColor[0], State.bgColor[1], State.bgColor[2], State.bgColor[3]); 116 | ctx.clear(ctx.COLOR_BIT | ctx.DEPTH_BIT); 117 | ctx.setDepthTest(true); 118 | 119 | var time = Date.now()/1000; 120 | 121 | if (!State.rotate) time = 0; 122 | 123 | ctx.setViewMatrix(Mat4.lookAt9(this.view, 124 | Math.cos(time * Math.PI) * 5, 125 | Math.sin(time * 0.5) * 0, 126 | Math.sin(time * Math.PI) * 5, 127 | 0,0,0,0,1,0 128 | ) 129 | ); 130 | 131 | ctx.bindTexture(State.textures[State.currentTexture], 0); 132 | ctx.bindProgram(this.program); 133 | 134 | ctx.setViewMatrix(this.view) 135 | 136 | ctx.bindMesh(this.mesh); 137 | ctx.pushModelMatrix(); 138 | //Torus is by default at YZ axis so let's rotate it to YX 139 | ctx.rotateXYZ([0, Math.PI/2, 0]); 140 | ctx.rotateXYZ(State.rotation); 141 | ctx.scale([ State.scale, State.scale, State.scale ]); 142 | ctx.drawMesh(); 143 | ctx.popModelMatrix(); 144 | 145 | this.gui.draw(); 146 | } 147 | }) 148 | -------------------------------------------------------------------------------- /io.loadBinary/main.js: -------------------------------------------------------------------------------- 1 | var loadBinary = require('pex-io/loadBinary'); 2 | var isBrowser = require('is-browser'); 3 | var ASSET_PATH = isBrowser ? '../assets' : __dirname + '/../assets'; 4 | 5 | function ab2str(buf) { 6 | return String.fromCharCode.apply(null, new Uint8Array(buf)); 7 | } 8 | 9 | loadBinary(ASSET_PATH + '/textures/plask.png', function(err, arraybuffer) { 10 | //should print PNG 11 | console.log(ab2str(arraybuffer.slice(0, 4))); 12 | }) 13 | -------------------------------------------------------------------------------- /io.loadImage/main.js: -------------------------------------------------------------------------------- 1 | var loadImage = require('pex-io/loadImage'); 2 | var isBrowser = require('is-browser'); 3 | var ASSET_PATH = isBrowser ? '../assets' : __dirname + '/../assets'; 4 | 5 | loadImage(ASSET_PATH + '/textures/plask.png', function(err, img) { 6 | if (err) { 7 | console.log(err); 8 | } 9 | else { 10 | console.log(img.width, img.height); 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /io.loadJSON/main.js: -------------------------------------------------------------------------------- 1 | var loadJSON = require('pex-io/loadJSON'); 2 | var isBrowser = require('is-browser'); 3 | var ASSET_PATH = isBrowser ? '../assets' : __dirname + '/../assets'; 4 | 5 | loadJSON(ASSET_PATH + '/text/loremipsum.json', function(err, lines) { 6 | console.log(lines); 7 | }) 8 | -------------------------------------------------------------------------------- /io.loadText/main.js: -------------------------------------------------------------------------------- 1 | var loadText = require('pex-io/loadText'); 2 | var isBrowser = require('is-browser'); 3 | var ASSET_PATH = isBrowser ? '../assets' : __dirname + '/../assets'; 4 | 5 | loadText(ASSET_PATH + '/text/loremipsum.txt', function(err, str) { 6 | console.log(str); 7 | }) 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pex-examples", 3 | "version": "1.0.0-alpha.1", 4 | "description": "Examples for the pex library", 5 | "homepage": "https://github.com/pex-gl/pex-examples", 6 | "keywords": [ 7 | "pex", 8 | "geometry", 9 | "3d", 10 | "graphics" 11 | ], 12 | "author": { 13 | "name": "variable.io", 14 | "email": "contact@variable.io", 15 | "url": "http://variable.io" 16 | }, 17 | "contributors": [ 18 | { 19 | "name": "Marcin Ignac", 20 | "email": "marcin.ignac@gmail.com", 21 | "url": "http://marcinignac.com" 22 | }, 23 | { 24 | "name": "Henryk Wollik", 25 | "email": "hwollik@hotmail.com", 26 | "url": "http://henrykwollik.com" 27 | } 28 | ], 29 | "main": "index.js", 30 | "repository": { 31 | "type": "git", 32 | "url": "https://github.com/pex-gl/pex-examples.git" 33 | }, 34 | "bugs": "https://github.com/pex-gl/pex-examples/issues", 35 | "license": "MIT", 36 | "dependencies": { 37 | "browserify": "^10.2.6", 38 | "electron-prebuilt": "^0.36.7", 39 | "glsl-gamma": "^2.0.0", 40 | "glslify-promise": "^1.0.2", 41 | "glslify-sync": "^1.1.1", 42 | "is-browser": "^2.0.1", 43 | "is-electron-renderer": "^2.0.0", 44 | "is-node": "0.0.0", 45 | "is-plask": "^1.0.0", 46 | "pex-cam": "*", 47 | "pex-context": "*", 48 | "pex-draw": "*", 49 | "pex-fx": "^1.4.0", 50 | "pex-geom": "^1.0.0-beta.2", 51 | "pex-gui": "*", 52 | "pex-io": "*", 53 | "pex-math": "*", 54 | "pex-random": "^1.0.0", 55 | "pex-sys": "^1.0.0-beta.4", 56 | "primitive-cube": "^2.0.0", 57 | "primitive-plane": "^1.0.1", 58 | "primitive-sphere": "^2.0.0", 59 | "primitive-torus": "^1.0.4", 60 | "watchify": "^3.7.0" 61 | }, 62 | "devDependencies": { 63 | "beefy": "^2.1.5", 64 | "browserify": "^10.2.4" 65 | }, 66 | "scripts": { 67 | "example": "beefy context.createMesh/main.js --open -- -i plask -t glslify-promise/transform" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /random/main.js: -------------------------------------------------------------------------------- 1 | var random = require('pex-random'); 2 | 3 | console.log(random.int(0, 5)); 4 | console.log(random.float()); 5 | console.log(random.vec2()); 6 | console.log(random.vec3()); 7 | console.log(random.vec2InRect([[-1,-1], [1,1]])); 8 | console.log(random.vec3InAABB([[-1,-1,-1], [1,1,1]])); 9 | console.log(random.element(['a', 'b', 'c'])); 10 | console.log(random.noise2(1, 2)) 11 | console.log(random.noise3(1, 2, 3)) 12 | console.log(random.noise4(1, 2, 3, 4)) 13 | -------------------------------------------------------------------------------- /sys.Keyboard/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Screen = require('pex-sys/Screen'); 3 | var Draw = require('pex-draw/Draw'); 4 | var OrthoCamera = require('pex-cam/OrthoCamera'); 5 | var glslify = require('glslify-promise'); 6 | var KeyboardEvent = require('pex-sys/KeyboardEvent'); 7 | 8 | var frame = 0; 9 | 10 | Window.create({ 11 | settings: { 12 | width: Screen.getWidth()/2, 13 | height: Screen.getHeight()/2 14 | }, 15 | init: function() { 16 | }, 17 | onKeyDown: function(e) { 18 | console.log('onKeyDown', e.str, e.keyCode, e.altKey, e.shiftKey, e.ctrlKey, e.metaKey); 19 | 20 | switch(e.keyCode) { 21 | case KeyboardEvent.VK_BACKSPACE: console.log('backspace'); break; 22 | case KeyboardEvent.VK_ENTER: console.log('enter'); break; 23 | case KeyboardEvent.VK_SPACE: console.log('space'); break; 24 | case KeyboardEvent.VK_DELETE: console.log('delete'); break; 25 | case KeyboardEvent.VK_TAB: console.log('tab'); break; 26 | case KeyboardEvent.VK_ESC: console.log('esc'); break; 27 | case KeyboardEvent.VK_UP: console.log('up'); break; 28 | case KeyboardEvent.VK_DOWN: console.log('down'); break; 29 | case KeyboardEvent.VK_LEFT: console.log('left'); break; 30 | case KeyboardEvent.VK_RIGHT: console.log('right'); break; 31 | } 32 | }, 33 | onKeyPress: function(e) { 34 | console.log('onKeyPress', e.str, e.keyCode, e.altKey, e.shiftKey, e.ctrlKey, e.metaKey); 35 | }, 36 | onKeyUp: function(e) { 37 | console.log('onKeyUp', e.str, e.keyCode, e.altKey, e.shiftKey, e.ctrlKey, e.metaKey); 38 | }, 39 | draw: function() { 40 | var ctx = this.getContext(); 41 | ctx.setClearColor(0.2, 0.2, 0.2, 1.0); 42 | ctx.clear(ctx.COLOR_BIT); 43 | } 44 | }) 45 | -------------------------------------------------------------------------------- /sys.Mouse/main.js: -------------------------------------------------------------------------------- 1 | var Window = require('pex-sys/Window'); 2 | var Screen = require('pex-sys/Screen'); 3 | var Draw = require('pex-draw/Draw'); 4 | var OrthoCamera = require('pex-cam/OrthoCamera'); 5 | var glslify = require('glslify-promise'); 6 | 7 | var frame = 0; 8 | 9 | Window.create({ 10 | settings: { 11 | width: Screen.getWidth()/2, 12 | height: Screen.getHeight()/2 13 | }, 14 | resources: { 15 | showColorsVert: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.vert') }, 16 | showColorsFrag: { glsl: glslify(__dirname + '/../assets/glsl/ShowColors.frag') }, 17 | }, 18 | mousePos: [0, 0], 19 | mouseColor: [1, 0, 0, 1], 20 | mouseDownColor: [1, 1, 0, 1], 21 | mouseDown: false, 22 | mouseSize: 80, 23 | mouseDownSize: 120, 24 | init: function() { 25 | var ctx = this.getContext(); 26 | var res = this.getResources(); 27 | 28 | this.camera = new OrthoCamera(this.getWidth(), this.getHeight()) 29 | this.camera.setOrtho(0, this.getWidth(), this.getHeight(), 0, -10, 10); 30 | 31 | this._draw = new Draw(ctx); 32 | this.program = ctx.createProgram(res.showColorsVert, res.showColorsFrag); 33 | }, 34 | onMouseDown: function(e) { 35 | console.log('onMouseDown', e.x, e.y, e.altKey, e.shiftKey, e.ctrlKey, e.metaKey); 36 | this.mouseDown = true; 37 | }, 38 | onMouseUp: function(e) { 39 | this.mouseDown = false; 40 | }, 41 | onMouseMove: function(e) { 42 | this.mousePos[0] = e.x; 43 | this.mousePos[1] = e.y; 44 | }, 45 | onMouseDrag: function(e) { 46 | this.mousePos[0] = e.x; 47 | this.mousePos[1] = e.y; 48 | }, 49 | onMouseScroll: function(e) { 50 | console.log(e.dx, e.dy) 51 | }, 52 | draw: function() { 53 | var ctx = this.getContext(); 54 | 55 | ctx.setProjectionMatrix(this.camera.getProjectionMatrix()); 56 | ctx.setViewMatrix(this.camera.getViewMatrix()); 57 | 58 | ctx.setClearColor(0.2, 0.2, 0.2, 1.0); 59 | 60 | ctx.clear(ctx.COLOR_BIT); 61 | 62 | var size = this.mouseDown ? this.mouseDownSize : this.mouseSize; 63 | 64 | ctx.bindProgram(this.program); 65 | ctx.pushModelMatrix(); 66 | ctx.translate([this.mousePos[0] - size/2, this.mousePos[1] - size/2, 0]); 67 | this._draw.setColor(this.mouseDown ? this.mouseDownColor : this.mouseColor) 68 | this._draw.drawRect(size, size); 69 | ctx.popModelMatrix(); 70 | } 71 | }) 72 | -------------------------------------------------------------------------------- /sys.ResourceLoader/main.js: -------------------------------------------------------------------------------- 1 | var ResourceLoader = require('pex-sys/ResourceLoader'); 2 | var isBrowser = require('is-browser'); 3 | 4 | var ASSET_PATH = isBrowser ? '../assets' : __dirname + '/../assets'; 5 | 6 | var validResources = { 7 | icon : { image: ASSET_PATH + '/textures/plask.png' }, 8 | data : { json: ASSET_PATH + '/text/loremipsum.json' } 9 | }; 10 | 11 | var invalidResources = { 12 | icon : { image: 'invalidpath/9383734.png' }, 13 | data : { json: 'invalidpath/blabla.json' } 14 | }; 15 | 16 | ResourceLoader.load(validResources, function(err, res) { 17 | console.log('icon', res.icon.width, res.icon.height); 18 | console.log('data lines', res.data.length); 19 | }) 20 | 21 | ResourceLoader.load(invalidResources, function(err, res) { 22 | console.log(err); 23 | }) 24 | -------------------------------------------------------------------------------- /sys.Screen/main.js: -------------------------------------------------------------------------------- 1 | var sys = require('pex-sys'); 2 | var Window = sys.Window; 3 | var Screen = sys.Screen; 4 | 5 | var frame = 0; 6 | 7 | Window.create({ 8 | settings: { 9 | width: Screen.getWidth() - 50, 10 | height: Screen.getHeight() - 50 11 | }, 12 | init: function() { 13 | var numScreens = Screen.getNumScreens(); 14 | for(var i=0; i