├── .gitignore ├── LICENSE ├── README.md ├── _config.yml ├── lib_webgl ├── img │ ├── NormalMap.png │ ├── cube_texture │ │ ├── nx.png │ │ ├── ny.png │ │ ├── nz.png │ │ ├── px.png │ │ ├── py.png │ │ └── pz.png │ ├── encognita.ico │ ├── normal_info.png │ ├── tex0.png │ ├── tex1.png │ ├── tex2.png │ ├── tex3.png │ ├── tex4.png │ ├── tex5.png │ └── toon.png ├── index.html ├── scripts │ └── main.js ├── start-server.bat └── ts_scripts │ ├── build │ ├── build-webgl.bat │ ├── compile-list.txt │ ├── compile-shaders.py │ └── compile-ts.md │ ├── demo │ ├── demo.ts │ ├── demo1.ts │ ├── demo10.ts │ ├── demo11.ts │ ├── demo12.ts │ ├── demo13.ts │ ├── demo14.ts │ ├── demo15.ts │ ├── demo16.ts │ ├── demo17.ts │ ├── demo18.ts │ ├── demo19.ts │ ├── demo2.ts │ ├── demo20.ts │ ├── demo21.ts │ ├── demo22.ts │ ├── demo23.ts │ ├── demo24.ts │ ├── demo25.ts │ ├── demo26.ts │ ├── demo27.ts │ ├── demo28.ts │ ├── demo29.ts │ ├── demo3.ts │ ├── demo30.ts │ ├── demo31.ts │ ├── demo32.ts │ ├── demo33.ts │ ├── demo34.ts │ ├── demo4.ts │ ├── demo5.ts │ ├── demo6.ts │ ├── demo7.ts │ ├── demo8.ts │ └── demo9.ts │ ├── lib │ ├── cv_colorSpace.ts │ ├── cv_imread.ts │ ├── extra_utils.ts │ ├── webgl_matrix.ts │ ├── webgl_model.ts │ ├── webgl_quaternion.ts │ ├── webgl_shaders.ts │ └── webgl_utils.ts │ ├── package │ ├── build-webgl.bat │ ├── compile-list.txt │ ├── compile-shaders.py │ ├── pkg │ │ └── bumpMapping.ts │ └── pkgBumpMapping.ts │ └── shaders │ ├── AKF-frag.glsl │ ├── AKF-vert.glsl │ ├── Abstraction-frag.glsl │ ├── Abstraction-vert.glsl │ ├── Anisotropic-frag.glsl │ ├── Anisotropic-vert.glsl │ ├── DoG-frag.glsl │ ├── DoG-vert.glsl │ ├── ETF-frag.glsl │ ├── ETF-vert.glsl │ ├── FDoG-frag.glsl │ ├── FDoG-vert.glsl │ ├── FXDoG-frag.glsl │ ├── FXDoG-vert.glsl │ ├── Gaussian_K-frag.glsl │ ├── Gaussian_K-vert.glsl │ ├── LIC-frag.glsl │ ├── LIC-vert.glsl │ ├── P_FDoG-frag.glsl │ ├── P_FDoG-vert.glsl │ ├── P_FXDoG-frag.glsl │ ├── P_FXDoG-vert.glsl │ ├── SST-frag.glsl │ ├── SST-vert.glsl │ ├── TF-frag.glsl │ ├── TF-vert.glsl │ ├── TFM-frag.glsl │ ├── TFM-vert.glsl │ ├── XDoG-frag.glsl │ ├── XDoG-vert.glsl │ ├── blurEffect-frag.glsl │ ├── blurEffect-vert.glsl │ ├── bumpMapping-frag.glsl │ ├── bumpMapping-vert.glsl │ ├── cubeTexBumpMapping-frag.glsl │ ├── cubeTexBumpMapping-vert.glsl │ ├── cubeTexMapping-frag.glsl │ ├── cubeTexMapping-vert.glsl │ ├── demo-frag.glsl │ ├── demo-vert.glsl │ ├── demo1-frag.glsl │ ├── demo1-vert.glsl │ ├── dir_ambient-frag.glsl │ ├── dir_ambient-vert.glsl │ ├── directionLighting-frag.glsl │ ├── directionLighting-vert.glsl │ ├── filterScene-frag.glsl │ ├── filterScene-vert.glsl │ ├── frameBuffer-frag.glsl │ ├── frameBuffer-vert.glsl │ ├── gaussianFilter-frag.glsl │ ├── gaussianFilter-vert.glsl │ ├── gkuwaharaFilter-frag.glsl │ ├── gkuwaharaFilter-vert.glsl │ ├── grayScaleFilter-frag.glsl │ ├── grayScaleFilter-vert.glsl │ ├── kuwaharaFilter-frag.glsl │ ├── kuwaharaFilter-vert.glsl │ ├── laplacianFilter-frag.glsl │ ├── laplacianFilter-vert.glsl │ ├── luminance-frag.glsl │ ├── luminance-vert.glsl │ ├── phong-frag.glsl │ ├── phong-vert.glsl │ ├── point-frag.glsl │ ├── point-vert.glsl │ ├── pointLighting-frag.glsl │ ├── pointLighting-vert.glsl │ ├── pointSprite-frag.glsl │ ├── pointSprite-vert.glsl │ ├── projTexture-frag.glsl │ ├── projTexture-vert.glsl │ ├── refractionMapping-frag.glsl │ ├── refractionMapping-vert.glsl │ ├── sepiaFilter-frag.glsl │ ├── sepiaFilter-vert.glsl │ ├── shadowDepthBuffer-frag.glsl │ ├── shadowDepthBuffer-vert.glsl │ ├── shadowScreen-frag.glsl │ ├── shadowScreen-vert.glsl │ ├── sobelFilter-frag.glsl │ ├── sobelFilter-vert.glsl │ ├── specCpt-frag.glsl │ ├── specCpt-vert.glsl │ ├── specular-frag.glsl │ ├── specular-vert.glsl │ ├── stencilBufferOutline-frag.glsl │ ├── stencilBufferOutline-vert.glsl │ ├── synth-frag.glsl │ ├── synth-vert.glsl │ ├── texture-frag.glsl │ ├── texture-vert.glsl │ ├── toonShading-frag.glsl │ └── toonShading-vert.glsl └── tools_webgl ├── FilterViewer ├── config │ ├── button.json │ ├── shader.json │ ├── ui.json │ └── user_config.json ├── css │ ├── bootstrap.min.css │ ├── image-picker.css │ └── main.css ├── image │ ├── AKF.png │ ├── FXDoG&AKF.png │ ├── FXDoG.png │ ├── LIC.png │ ├── anim.png │ ├── back.png │ ├── cat.jpg │ ├── encognita.ico │ ├── k0.png │ ├── lion.png │ ├── noise.png │ ├── visual_rgb.png │ └── woman.png ├── index.html ├── scripts │ ├── FilterViewer.min.js │ ├── extlib │ │ ├── bootstrap.min.js │ │ ├── dat.gui.min.js │ │ ├── hammer.min.js │ │ ├── image-picker.min.js │ │ ├── jquery-3.3.1.min.js │ │ ├── popper.min.js │ │ └── stats.min.js │ └── main.js ├── start-server.bat ├── tools │ └── py_kuwahara │ │ ├── AnisotropicVisual.py │ │ ├── GKuwahara_shader.py │ │ ├── Gaussian.py │ │ ├── Gkuwahara.py │ │ ├── LIC.py │ │ ├── Noise.py │ │ ├── SST.py │ │ ├── Vector.py │ │ ├── VectorField.py │ │ ├── __pycache__ │ │ ├── Gaussian.cpython-35.pyc │ │ ├── Gaussian.cpython-36.pyc │ │ ├── SST.cpython-35.pyc │ │ ├── SST.cpython-36.pyc │ │ ├── Vector.cpython-36.pyc │ │ └── VectorField.cpython-36.pyc │ │ └── img │ │ ├── anim.png │ │ ├── anisotropic_image.png │ │ ├── building.png │ │ ├── k0.png │ │ ├── lic_image.png │ │ ├── noise.png │ │ ├── smooth_structure_tensor.png │ │ ├── tensor_image.png │ │ └── visual_rgb.png └── ts_scripts │ ├── FilterViewer.ts │ ├── build │ ├── build-tools.bat │ ├── readme-mac.md │ └── tools │ │ ├── build-tsc.bat │ │ ├── build-yui.bat │ │ ├── compile-list.txt │ │ └── yuicompressor-2.4.8.jar │ ├── lib │ ├── EgnFilterViewerUI.ts │ ├── EgnType.ts │ ├── EgnWebGL.ts │ └── HashSet.ts │ └── package │ └── pkg_FilterViewHub.ts └── NormalMapGenerator ├── img ├── test1.png ├── test2.jpg └── texture_info.png ├── index.html ├── scripts ├── extlib_np_demo.js └── main.js └── ts_scripts ├── NormalMapGenerator.ts ├── build ├── build-tools.bat ├── compile-list.txt └── readme-mac.md ├── demo ├── compile-list.txt ├── demo.ts └── readme-mac.md ├── extlib ├── math_utils.ts └── vector.ts └── lib └── image_utils.ts /.gitignore: -------------------------------------------------------------------------------- 1 | /lib_webgl/ts_scripts/error/.../scripts 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 RaymondMcGuire 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GPU Based Image Processing Tools 2 | 3 | A tool for viewing image filters online. 4 | 5 | This project has implemented some NPR algorithms you can use it directly and don't need additional packages. 6 | 7 | ## Getting Started 8 | 9 | ### Prerequisites 10 | 11 | This project is developed by Typescript, so you should construct the Node.js environment. 12 | 13 | And then install the Typescript by using this command 14 | 15 | ``` 16 | npm install -g typescript 17 | ``` 18 | 19 | ### Compile 20 | 21 | After editing the source code,you should compile this project through 22 | 23 | .\tools_webgl\FilterViewer\ts_scripts\build\build-tools.bat (For Windows) 24 | 25 | .\tools_webgl\FilterViewer\ts_scripts\build\readme-mac.md (For Mac) 26 | 27 | 28 | ### Usage 29 | 30 | Enter the path ".\tools_webgl\FilterViewer\" 31 | 32 | I'd like to use "http-server" to view this project. 33 | 34 | You also can use anyway you like to run this project in the local environment. 35 | 36 | ### Online Demo 37 | 38 | You also can view this project's online demo in [URL](https://raymondmcguire.github.io/FilterViewer/). 39 | 40 | ### Preview 41 | 42 | * Image 43 | 44 | ![Input Image](./tools_webgl/FilterViewer/image/anim.png?raw=true "Input Image") 45 | 46 | * Line Integral Convolution 47 | 48 | ![LIC](./tools_webgl/FilterViewer/image/LIC.png?raw=true "LIC") 49 | 50 | * Flow eXtend Difference of Gaussian 51 | 52 | ![FXDoG](./tools_webgl/FilterViewer/image/FXDoG.png?raw=true "FXDoG") 53 | 54 | * Anisotropic KUWAHARA Filter 55 | 56 | ![AKF](./tools_webgl/FilterViewer/image/AKF.png?raw=true "AKF") 57 | 58 | * Mix Anisotropic KUWAHARA Filter and Flow eXtend Difference of Gaussian 59 | 60 | ![FXDoG&AKF](./tools_webgl/FilterViewer/image/FXDoG&AKF.png?raw=true "FXDoG&AKF") 61 | 62 | ## Papers implemented 63 | 64 | * Imaging Vector Fields Using Line Integral Convolution 65 | * Image and video abstraction by anisotropic Kuwahara filtering 66 | * XDoG: an extended difference-of-Gaussians compendium including advanced image stylization 67 | 68 | ## License 69 | 70 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details 71 | 72 | ## Acknowledgments 73 | 74 | * Some shaders' source code from Kyprianidis, Jan Eric. You can find it in [http://www.kyprianidis.com](http://www.kyprianidis.com) 75 | 76 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /lib_webgl/img/NormalMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/NormalMap.png -------------------------------------------------------------------------------- /lib_webgl/img/cube_texture/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/cube_texture/nx.png -------------------------------------------------------------------------------- /lib_webgl/img/cube_texture/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/cube_texture/ny.png -------------------------------------------------------------------------------- /lib_webgl/img/cube_texture/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/cube_texture/nz.png -------------------------------------------------------------------------------- /lib_webgl/img/cube_texture/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/cube_texture/px.png -------------------------------------------------------------------------------- /lib_webgl/img/cube_texture/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/cube_texture/py.png -------------------------------------------------------------------------------- /lib_webgl/img/cube_texture/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/cube_texture/pz.png -------------------------------------------------------------------------------- /lib_webgl/img/encognita.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/encognita.ico -------------------------------------------------------------------------------- /lib_webgl/img/normal_info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/normal_info.png -------------------------------------------------------------------------------- /lib_webgl/img/tex0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/tex0.png -------------------------------------------------------------------------------- /lib_webgl/img/tex1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/tex1.png -------------------------------------------------------------------------------- /lib_webgl/img/tex2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/tex2.png -------------------------------------------------------------------------------- /lib_webgl/img/tex3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/tex3.png -------------------------------------------------------------------------------- /lib_webgl/img/tex4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/tex4.png -------------------------------------------------------------------------------- /lib_webgl/img/tex5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/tex5.png -------------------------------------------------------------------------------- /lib_webgl/img/toon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/lib_webgl/img/toon.png -------------------------------------------------------------------------------- /lib_webgl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lib_webgl/start-server.bat: -------------------------------------------------------------------------------- 1 | http-server -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/build/build-webgl.bat: -------------------------------------------------------------------------------- 1 | TITLE Environment Setting 2 | @echo off 3 | echo complie shader 4 | python compile-shaders.py 5 | 6 | echo. 7 | echo compile typescript 8 | tsc --out ../../scripts/main.js @compile-list.txt 9 | 10 | echo. 11 | echo Finished Environment Setting -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/build/compile-list.txt: -------------------------------------------------------------------------------- 1 | ../demo/demo34.ts 2 | ../lib/cv_imread.ts 3 | ../lib/cv_colorSpace.ts 4 | ../lib/extra_utils.ts 5 | ../lib/webgl_matrix.ts 6 | ../lib/webgl_quaternion.ts 7 | ../lib/webgl_shaders.ts 8 | ../lib/webgl_model.ts 9 | ../lib/webgl_utils.ts -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/build/compile-shaders.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | 3 | import os 4 | 5 | ShaderDir = "../shaders" 6 | MaxLen = 80; 7 | 8 | entries = [] 9 | for file in os.listdir(ShaderDir): 10 | if file.find(".glsl") == -1: 11 | continue; 12 | 13 | lines = open(os.path.join(ShaderDir, file)).read().strip().split('\n') 14 | 15 | splitLines = [] 16 | for line in lines: 17 | if not line.strip(): 18 | splitLines[-1] = splitLines[-1][:-1] + "\\n'" 19 | splitLines.append('') 20 | else: 21 | justLen = min(len(line), MaxLen) 22 | parts = [line[i:i + MaxLen] for i in range(0, len(line), MaxLen)] 23 | for i in parts[:-1]: 24 | splitLines.append(("'" + i + "'").rjust(justLen)) 25 | splitLines.append(("'" + parts[-1] + "\\n'").rjust(justLen)) 26 | 27 | lineLen = len(max(splitLines, key=len)) 28 | 29 | source = "" 30 | for i, line in enumerate(splitLines): 31 | if line: 32 | source += " " 33 | if i < len(splitLines) - 1: 34 | source += line.ljust(lineLen) + " +" 35 | else: 36 | source += line 37 | if i < len(splitLines) - 1: 38 | source += '\n' 39 | 40 | entries.append(" '{}':\n{}".format(file.replace('.glsl', ''), source)) 41 | 42 | open("../lib/webgl_shaders.ts", 'w').write("var Shaders = {\n" + ",\n\n".join(entries) + "\n}") 43 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/build/compile-ts.md: -------------------------------------------------------------------------------- 1 | For Mac 2 | 3 | python compile-shaders.py 4 | tsc --out ../../scripts/main.js @compile-list.txt -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | 11 | var canvas = document.getElementById('canvas'); 12 | canvas.width = 300; 13 | canvas.height = 300; 14 | try { 15 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 16 | } catch (e) {} 17 | if (!gl) 18 | throw new Error("Could not initialise WebGL"); 19 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 20 | gl.clearDepth(1.0); 21 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "demo-vert", "demo-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | 27 | vbo.addAttribute("position", 3, gl.FLOAT, false); 28 | vbo.init(3); 29 | vbo.copy([0.0, 1.0, 0.0,1.0, 0.0, 0.0,-1.0, 0.0, 0.0]); 30 | vbo.bind(shader); 31 | 32 | var m = new EcognitaMathLib.WebGLMatrix(); 33 | 34 | var mMatrix = m.identity(m.create()); 35 | var vMatrix = m.viewMatrix([0.0, 1.0, 3.0], [0, 0, 0], [0, 1, 0]); 36 | var pMatrix = m.perspectiveMatrix(90, canvas.width / canvas.height, 0.1, 100); 37 | var mvpMatrix = m.multiply(pMatrix, vMatrix); 38 | mvpMatrix =m.multiply(mvpMatrix, mMatrix); 39 | 40 | shader.bind(); 41 | var uniLocation = new Array(); 42 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 43 | 44 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 45 | vbo.draw(gl.TRIANGLES); 46 | vbo.release(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo1.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo1.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | 11 | var canvas = document.getElementById('canvas'); 12 | canvas.width = 300; 13 | canvas.height = 300; 14 | try { 15 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 16 | } catch (e) {} 17 | if (!gl) 18 | throw new Error("Could not initialise WebGL"); 19 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 20 | gl.clearDepth(1.0); 21 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "demo1-vert", "demo1-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | 27 | vbo.addAttribute("position", 3, gl.FLOAT, false); 28 | vbo.addAttribute("color", 4, gl.FLOAT, false); 29 | vbo.init(3); 30 | 31 | vbo.copy([0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 32 | 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 33 | -1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0]); 34 | 35 | vbo.bind(shader); 36 | var m = new EcognitaMathLib.WebGLMatrix(); 37 | 38 | var mMatrix = m.identity(m.create()); 39 | var vMatrix = m.viewMatrix([0.0, 1.0, 3.0], [0, 0, 0], [0, 1, 0]); 40 | var pMatrix = m.perspectiveMatrix(90, canvas.width / canvas.height, 0.1, 100); 41 | var mvpMatrix = m.multiply(pMatrix, vMatrix); 42 | mvpMatrix =m.multiply(mvpMatrix, mMatrix); 43 | 44 | shader.bind(); 45 | var uniLocation = new Array(); 46 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 47 | 48 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 49 | vbo.draw(gl.TRIANGLES); 50 | vbo.release(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo10.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo10.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | 12 | var canvas = document.getElementById('canvas'); 13 | canvas.width = 500; 14 | canvas.height = 300; 15 | try { 16 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 17 | } catch (e) {} 18 | if (!gl) 19 | throw new Error("Could not initialise WebGL"); 20 | 21 | var cnt =0; 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "pointLighting-vert", "pointLighting-frag"); 24 | 25 | var vbo_torus = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | var ibo_torus = new EcognitaMathLib.WebGL_IndexBuffer(); 27 | var torusData = new EcognitaMathLib.TorusModel(64,64,0.5,1.5,undefined,true); 28 | vbo_torus.addAttribute("position", 3, gl.FLOAT, false); 29 | vbo_torus.addAttribute("normal", 3, gl.FLOAT, false); 30 | vbo_torus.addAttribute("color", 4, gl.FLOAT, false); 31 | vbo_torus.init(torusData.data.length/10); 32 | vbo_torus.copy(torusData.data); 33 | //vbo_torus.bind(shader); 34 | 35 | ibo_torus.init(torusData.index); 36 | ibo_torus.bind(); 37 | 38 | var vbo_sphere = new EcognitaMathLib.WebGL_VertexBuffer(); 39 | var ibo_sphere = new EcognitaMathLib.WebGL_IndexBuffer(); 40 | var sphereData= new EcognitaMathLib.ShpereModel(64,64,2.0,undefined,true); 41 | vbo_sphere.addAttribute("position", 3, gl.FLOAT, false); 42 | vbo_sphere.addAttribute("normal", 3, gl.FLOAT, false); 43 | vbo_sphere.addAttribute("color", 4, gl.FLOAT, false); 44 | vbo_sphere.init(sphereData.data.length/10); 45 | vbo_sphere.copy(sphereData.data); 46 | //vbo_sphere.bind(shader); 47 | 48 | ibo_sphere.init(sphereData.index); 49 | ibo_sphere.bind(); 50 | 51 | 52 | var m = new EcognitaMathLib.WebGLMatrix(); 53 | var lightPosition = [0.0, 0.0, 0.0]; 54 | var ambientColor = [0.1, 0.1, 0.1, 1.0]; 55 | var eyeDirection = [0.0, 0.0, 20.0]; 56 | 57 | var mMatrix = m.identity(m.create()); 58 | var vMatrix = m.viewMatrix(eyeDirection, [0, 0, 0], [0, 1, 0]); 59 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 60 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 61 | var mvpMatrix =m.identity(m.create()); 62 | var invMatrix = m.identity(m.create()); 63 | 64 | shader.bind(); 65 | var uniLocation = new Array(); 66 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 67 | uniLocation.push(shader.uniformIndex('mMatrix')); 68 | uniLocation.push(shader.uniformIndex('invMatrix')); 69 | uniLocation.push(shader.uniformIndex('lightPosition')); 70 | uniLocation.push(shader.uniformIndex('ambientColor')); 71 | uniLocation.push(shader.uniformIndex('eyeDirection')); 72 | 73 | //depth test and cull face 74 | gl.enable(gl.DEPTH_TEST); 75 | gl.depthFunc(gl.LEQUAL); 76 | gl.enable(gl.CULL_FACE); 77 | (function(){ 78 | 79 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 80 | gl.clearDepth(1.0); 81 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 82 | 83 | cnt++; 84 | var rad = (cnt%360) * Math.PI/180; 85 | var tx = Math.cos(rad) * 3.5; 86 | var ty = Math.sin(rad) * 3.5; 87 | var tz = Math.sin(rad) * 3.5; 88 | 89 | //torus 90 | mMatrix =m.identity(mMatrix); 91 | mMatrix = m.translate(mMatrix, [tx, -ty, -tz]); 92 | mMatrix =m.rotate(mMatrix,-rad,[0,1,1]); 93 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 94 | invMatrix = m.inverse(mMatrix); 95 | 96 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 97 | gl.uniformMatrix4fv(uniLocation[1], false, mMatrix); 98 | gl.uniformMatrix4fv(uniLocation[2], false, invMatrix); 99 | gl.uniform3fv(uniLocation[3], lightPosition); 100 | gl.uniform4fv(uniLocation[4], ambientColor); 101 | gl.uniform3fv(uniLocation[5], eyeDirection); 102 | 103 | vbo_torus.bind(shader); 104 | ibo_torus.bind(); 105 | ibo_torus.draw(gl.TRIANGLES); 106 | 107 | //sphere 108 | mMatrix =m.identity(mMatrix); 109 | mMatrix = m.translate(mMatrix, [-tx, ty, tz]); 110 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 111 | invMatrix = m.inverse(mMatrix); 112 | 113 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 114 | gl.uniformMatrix4fv(uniLocation[1], false, mMatrix); 115 | gl.uniformMatrix4fv(uniLocation[2], false, invMatrix); 116 | 117 | vbo_sphere.bind(shader); 118 | ibo_sphere.bind(); 119 | ibo_sphere.draw(gl.TRIANGLES); 120 | 121 | gl.flush(); 122 | setTimeout(arguments.callee, 1000 / 30); 123 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo11.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo11.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | 13 | var canvas = document.getElementById('canvas'); 14 | canvas.width = 500; 15 | canvas.height = 300; 16 | try { 17 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 18 | } catch (e) {} 19 | if (!gl) 20 | throw new Error("Could not initialise WebGL"); 21 | 22 | var cnt =0; 23 | 24 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "texture-vert", "texture-frag"); 25 | 26 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 27 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 28 | var tex = null; 29 | 30 | vbo.addAttribute("position", 3, gl.FLOAT, false); 31 | vbo.addAttribute("color", 4, gl.FLOAT, false); 32 | vbo.addAttribute("textureCoord", 2, gl.FLOAT, false); 33 | 34 | var data = [ 35 | -1.0, 1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 36 | 1.0, 1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0, 0.0, 37 | -1.0, -1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 1.0, 38 | 1.0, -1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0 39 | ]; 40 | 41 | var index = [ 42 | 0, 1, 2, 43 | 3, 2, 1 44 | ]; 45 | 46 | vbo.init(4); 47 | vbo.copy(data); 48 | vbo.bind(shader); 49 | 50 | ibo.init(index); 51 | ibo.bind(); 52 | 53 | var m = new EcognitaMathLib.WebGLMatrix(); 54 | var eyeDirection = [0.0, 2.0, 5.0]; 55 | 56 | var mMatrix = m.identity(m.create()); 57 | var vMatrix = m.viewMatrix(eyeDirection, [0, 0, 0], [0, 1, 0]); 58 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 59 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 60 | var mvpMatrix =m.identity(m.create()); 61 | 62 | 63 | shader.bind(); 64 | var uniLocation = new Array(); 65 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 66 | uniLocation.push(shader.uniformIndex('texture')); 67 | 68 | //depth test and cull face 69 | gl.enable(gl.DEPTH_TEST); 70 | gl.depthFunc(gl.LEQUAL); 71 | 72 | gl.activeTexture(gl.TEXTURE0); 73 | var texture = null; 74 | 75 | var img = EcognitaMathLib.imread("./img/encognita.ico"); 76 | img.onload = function(){ 77 | tex = new EcognitaMathLib.WebGL_Texture(4,false,img); 78 | }; 79 | 80 | (function(){ 81 | 82 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 83 | gl.clearDepth(1.0); 84 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 85 | 86 | cnt++; 87 | var rad = (cnt%360) * Math.PI/180; 88 | 89 | if(tex!=null){ 90 | tex.bind(tex.texture); 91 | gl.uniform1i(uniLocation[1], 0); 92 | } 93 | 94 | mMatrix =m.identity(mMatrix); 95 | mMatrix =m.rotate(mMatrix,rad,[0,1,0]); 96 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 97 | 98 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 99 | ibo.draw(gl.TRIANGLES); 100 | 101 | gl.flush(); 102 | setTimeout(arguments.callee, 1000 / 30); 103 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo12.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo12.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | 13 | var canvas = document.getElementById('canvas'); 14 | canvas.width = 500; 15 | canvas.height = 300; 16 | try { 17 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 18 | } catch (e) {} 19 | if (!gl) 20 | throw new Error("Could not initialise WebGL"); 21 | 22 | var cnt =0; 23 | 24 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "pointLighting-vert", "pointLighting-frag"); 25 | 26 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 27 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 28 | var torusData = new EcognitaMathLib.TorusModel(64,64,0.5,1.5,undefined,true); 29 | 30 | vbo.addAttribute("position", 3, gl.FLOAT, false); 31 | vbo.addAttribute("normal", 3, gl.FLOAT, false); 32 | vbo.addAttribute("color", 4, gl.FLOAT, false); 33 | vbo.init(torusData.data.length/10); 34 | vbo.copy(torusData.data); 35 | vbo.bind(shader); 36 | 37 | ibo.init(torusData.index); 38 | ibo.bind(); 39 | 40 | var m = new EcognitaMathLib.WebGLMatrix(); 41 | var q = new EcognitaMathLib.WebGLQuaternion(); 42 | 43 | var mMatrix = m.identity(m.create()); 44 | var vMatrix = m.identity(m.create()); 45 | var pMatrix = m.identity(m.create()); 46 | var tmpMatrix = m.identity(m.create()); 47 | var mvpMatrix =m.identity(m.create()); 48 | var invMatrix = m.identity(m.create()); 49 | 50 | shader.bind(); 51 | var uniLocation = new Array(); 52 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 53 | uniLocation.push(shader.uniformIndex('mMatrix')); 54 | uniLocation.push(shader.uniformIndex('invMatrix')); 55 | uniLocation.push(shader.uniformIndex('lightPosition')); 56 | uniLocation.push(shader.uniformIndex('eyeDirection')); 57 | uniLocation.push(shader.uniformIndex('ambientColor')); 58 | 59 | 60 | var lightPosition = [15.0, 10.0, 15.0]; 61 | var ambientColor = [0.1, 0.1, 0.1, 1.0]; 62 | 63 | var xQuaternion = q.identity(q.create()); 64 | var camPosition = [0.0,0.0,10.0]; 65 | var camUpDirection = [0.0,1.0,0.0]; 66 | 67 | //depth test and cull face 68 | gl.enable(gl.DEPTH_TEST); 69 | gl.depthFunc(gl.LEQUAL); 70 | gl.enable(gl.CULL_FACE); 71 | (function(){ 72 | 73 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 74 | gl.clearDepth(1.0); 75 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 76 | 77 | cnt++; 78 | var rad = (cnt%180) * Math.PI/90; 79 | var rad2 = (cnt%720) * Math.PI/360; 80 | 81 | xQuaternion = q.rotate(rad2,[1,0,0]); 82 | camPosition = q.ToV3([0.0, 0.0, 10.0],xQuaternion); 83 | camUpDirection = q.ToV3([0.0, 1.0, 0.0],xQuaternion); 84 | 85 | vMatrix = m.viewMatrix(camPosition, [0, 0, 0], camUpDirection); 86 | pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 87 | tmpMatrix =m.multiply(pMatrix, vMatrix); 88 | 89 | mMatrix =m.identity(mMatrix); 90 | mMatrix =m.rotate(mMatrix,rad,[0,1,0]); 91 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 92 | invMatrix = m.inverse(mMatrix); 93 | 94 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 95 | gl.uniformMatrix4fv(uniLocation[1], false, mMatrix); 96 | gl.uniformMatrix4fv(uniLocation[2], false, invMatrix); 97 | gl.uniform3fv(uniLocation[3], lightPosition); 98 | gl.uniform3fv(uniLocation[4], camPosition); 99 | gl.uniform4fv(uniLocation[5], ambientColor); 100 | 101 | ibo.draw(gl.TRIANGLES); 102 | gl.flush(); 103 | setTimeout(arguments.callee, 1000 / 30); 104 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo13.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo13.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | 14 | var canvas = document.getElementById('canvas'); 15 | canvas.width = 500; 16 | canvas.height = 300; 17 | try { 18 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 19 | } catch (e) {} 20 | if (!gl) 21 | throw new Error("Could not initialise WebGL"); 22 | 23 | var cnt =0; 24 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "pointLighting-vert", "pointLighting-frag"); 25 | 26 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 27 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 28 | var torusData = new EcognitaMathLib.TorusModel(64,64,0.5,1.5,undefined,true); 29 | 30 | vbo.addAttribute("position", 3, gl.FLOAT, false); 31 | vbo.addAttribute("normal", 3, gl.FLOAT, false); 32 | vbo.addAttribute("color", 4, gl.FLOAT, false); 33 | vbo.init(torusData.data.length/10); 34 | vbo.copy(torusData.data); 35 | vbo.bind(shader); 36 | 37 | ibo.init(torusData.index); 38 | ibo.bind(); 39 | 40 | var m = new EcognitaMathLib.WebGLMatrix(); 41 | var q = new EcognitaMathLib.WebGLQuaternion(); 42 | 43 | var mMatrix = m.identity(m.create()); 44 | var vMatrix = m.identity(m.create()); 45 | var pMatrix = m.identity(m.create()); 46 | var tmpMatrix = m.identity(m.create()); 47 | var mvpMatrix =m.identity(m.create()); 48 | var invMatrix = m.identity(m.create()); 49 | 50 | shader.bind(); 51 | var uniLocation = new Array(); 52 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 53 | uniLocation.push(shader.uniformIndex('mMatrix')); 54 | uniLocation.push(shader.uniformIndex('invMatrix')); 55 | uniLocation.push(shader.uniformIndex('lightPosition')); 56 | uniLocation.push(shader.uniformIndex('eyeDirection')); 57 | uniLocation.push(shader.uniformIndex('ambientColor')); 58 | 59 | 60 | var lightPosition = [15.0, 10.0, 15.0]; 61 | var ambientColor = [0.1, 0.1, 0.1, 1.0]; 62 | 63 | var xQuaternion = q.identity(q.create()); 64 | 65 | var camPosition = [0.0,0.0,10.0]; 66 | var camUpDirection = [0.0,1.0,0.0]; 67 | 68 | vMatrix = m.viewMatrix(camPosition, [0, 0, 0], camUpDirection); 69 | pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 70 | tmpMatrix =m.multiply(pMatrix, vMatrix); 71 | 72 | var lastPosX = 0; 73 | var lastPosY = 0; 74 | var isDragging = false; 75 | 76 | var hammer = new EcognitaMathLib.Hammer_Utils(canvas); 77 | hammer.on_pan =function(ev){ 78 | var elem = ev.target; 79 | if (!isDragging ) { 80 | isDragging = true; 81 | lastPosX = elem.offsetLeft; 82 | lastPosY = elem.offsetTop; 83 | } 84 | 85 | var posX = ev.center.x -lastPosX; 86 | var posY = ev.center.y -lastPosY; 87 | 88 | var cw = canvas.width; 89 | var ch = canvas.height; 90 | var wh = 1 / Math.sqrt(cw * cw + ch * ch); 91 | var x = posX - cw * 0.5; 92 | var y = posY - ch * 0.5; 93 | var sq = Math.sqrt(x * x + y * y); 94 | var r = sq * 2.0 * Math.PI * wh; 95 | if(sq != 1){ 96 | sq = 1 / sq; 97 | x *= sq; 98 | y *= sq; 99 | } 100 | xQuaternion = q.rotate(r, [y, x, 0.0]); 101 | 102 | if (ev.isFinal) { 103 | isDragging = false; 104 | } 105 | } 106 | hammer.enablePan(); 107 | 108 | //depth test and cull face 109 | gl.enable(gl.DEPTH_TEST); 110 | gl.depthFunc(gl.LEQUAL); 111 | gl.enable(gl.CULL_FACE); 112 | (function(){ 113 | 114 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 115 | gl.clearDepth(1.0); 116 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 117 | 118 | cnt++; 119 | var rad = (cnt%180) * Math.PI/90; 120 | 121 | var qMatrix = m.identity(m.create()); 122 | qMatrix = q.ToMat4x4(xQuaternion); 123 | 124 | mMatrix =m.identity(mMatrix); 125 | mMatrix = m.multiply(qMatrix,mMatrix); 126 | mMatrix =m.rotate(mMatrix,rad,[0,1,0]); 127 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 128 | invMatrix = m.inverse(mMatrix); 129 | 130 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 131 | gl.uniformMatrix4fv(uniLocation[1], false, mMatrix); 132 | gl.uniformMatrix4fv(uniLocation[2], false, invMatrix); 133 | gl.uniform3fv(uniLocation[3], lightPosition); 134 | gl.uniform3fv(uniLocation[4], camPosition); 135 | gl.uniform4fv(uniLocation[5], ambientColor); 136 | 137 | ibo.draw(gl.TRIANGLES); 138 | gl.flush(); 139 | setTimeout(arguments.callee, 1000 / 30); 140 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo14.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo14.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | 13 | var canvas = document.getElementById('canvas'); 14 | canvas.width = 500; 15 | canvas.height = 300; 16 | try { 17 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 18 | } catch (e) {} 19 | if (!gl) 20 | throw new Error("Could not initialise WebGL"); 21 | 22 | var cnt =0; 23 | 24 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "pointLighting-vert", "pointLighting-frag"); 25 | 26 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 27 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 28 | var torusData = new EcognitaMathLib.TorusModel(64,64,0.5,1.5,undefined,true); 29 | 30 | vbo.addAttribute("position", 3, gl.FLOAT, false); 31 | vbo.addAttribute("normal", 3, gl.FLOAT, false); 32 | vbo.addAttribute("color", 4, gl.FLOAT, false); 33 | vbo.init(torusData.data.length/10); 34 | vbo.copy(torusData.data); 35 | vbo.bind(shader); 36 | 37 | ibo.init(torusData.index); 38 | ibo.bind(); 39 | 40 | var m = new EcognitaMathLib.WebGLMatrix(); 41 | var q = new EcognitaMathLib.WebGLQuaternion(); 42 | 43 | var mMatrix = m.identity(m.create()); 44 | var vMatrix = m.identity(m.create()); 45 | var pMatrix = m.identity(m.create()); 46 | var tmpMatrix = m.identity(m.create()); 47 | var mvpMatrix =m.identity(m.create()); 48 | var invMatrix = m.identity(m.create()); 49 | var qMatrix = m.identity(m.create()); 50 | 51 | shader.bind(); 52 | var uniLocation = new Array(); 53 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 54 | uniLocation.push(shader.uniformIndex('mMatrix')); 55 | uniLocation.push(shader.uniformIndex('invMatrix')); 56 | uniLocation.push(shader.uniformIndex('lightPosition')); 57 | uniLocation.push(shader.uniformIndex('eyeDirection')); 58 | uniLocation.push(shader.uniformIndex('ambientColor')); 59 | 60 | 61 | var lightPosition = [15.0, 10.0, 15.0]; 62 | var ambientColor = [0.1, 0.1, 0.1, 1.0]; 63 | 64 | var startQuaternion = q.identity(q.create()); 65 | var endQuaternion = q.identity(q.create()); 66 | var slerpQuaternion = q.identity(q.create()); 67 | 68 | 69 | var camPosition = [0.0,0.0,20.0]; 70 | var camUpDirection = [0.0,1.0,0.0]; 71 | vMatrix = m.viewMatrix(camPosition, [0, 0, 0], camUpDirection); 72 | pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 73 | tmpMatrix =m.multiply(pMatrix, vMatrix); 74 | 75 | //depth test and cull face 76 | gl.enable(gl.DEPTH_TEST); 77 | gl.depthFunc(gl.LEQUAL); 78 | gl.enable(gl.CULL_FACE); 79 | (function(){ 80 | 81 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 82 | gl.clearDepth(1.0); 83 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 84 | 85 | cnt++; 86 | var rad = (cnt%360) * Math.PI/180; 87 | var time = Math.abs(Math.sin(cnt/50)); 88 | startQuaternion = q.rotate(rad,[1,0,0]); 89 | endQuaternion = q.rotate(rad,[0,1,0]); 90 | slerpQuaternion = q.slerp(startQuaternion,endQuaternion,time); 91 | 92 | ambientColor = [0.5, 0.0, 0.0, 1.0]; 93 | draw(startQuaternion); 94 | ambientColor = [0.0, 0.5, 0.0, 1.0]; 95 | draw(endQuaternion); 96 | ambientColor = [0.0, 0.0, 0.5, 1.0]; 97 | draw(slerpQuaternion); 98 | 99 | function draw(qta:any){ 100 | qMatrix = q.ToMat4x4(qta); 101 | mMatrix =m.identity(mMatrix); 102 | mMatrix =m.multiply(mMatrix,qMatrix); 103 | mMatrix =m.translate(mMatrix,[0,0,-5]); 104 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 105 | invMatrix = m.inverse(mMatrix); 106 | 107 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 108 | gl.uniformMatrix4fv(uniLocation[1], false, mMatrix); 109 | gl.uniformMatrix4fv(uniLocation[2], false, invMatrix); 110 | gl.uniform3fv(uniLocation[3], lightPosition); 111 | gl.uniform3fv(uniLocation[4], camPosition); 112 | gl.uniform4fv(uniLocation[5], ambientColor); 113 | ibo.draw(gl.TRIANGLES); 114 | } 115 | 116 | 117 | gl.flush(); 118 | setTimeout(arguments.callee, 1000 / 30); 119 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo15.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo15.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | /// 14 | 15 | var canvas = document.getElementById('canvas'); 16 | canvas.width = 500; 17 | canvas.height = 300; 18 | try { 19 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 20 | } catch (e) {} 21 | if (!gl) 22 | throw new Error("Could not initialise WebGL"); 23 | 24 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "texture-vert", "texture-frag"); 25 | 26 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 27 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 28 | var tex0 = null; 29 | var tex1 = null; 30 | 31 | var img1 = EcognitaMathLib.imread("./img/tex0.png"); 32 | img1.onload = function(){ 33 | tex0 = new EcognitaMathLib.WebGL_Texture(4,false,img1); 34 | }; 35 | var img2 = EcognitaMathLib.imread("./img/tex1.png"); 36 | img2.onload = function(){ 37 | tex1 = new EcognitaMathLib.WebGL_Texture(4,false,img2); 38 | }; 39 | 40 | vbo.addAttribute("position", 3, gl.FLOAT, false); 41 | vbo.addAttribute("color", 4, gl.FLOAT, false); 42 | vbo.addAttribute("textureCoord", 2, gl.FLOAT, false); 43 | 44 | var data = [ 45 | -1.0, 1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 46 | 1.0, 1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0, 0.0, 47 | -1.0, -1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 1.0, 48 | 1.0, -1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0 49 | ]; 50 | 51 | var index = [ 52 | 0, 1, 2, 53 | 3, 2, 1 54 | ]; 55 | 56 | vbo.init(4); 57 | vbo.copy(data); 58 | vbo.bind(shader); 59 | 60 | ibo.init(index); 61 | ibo.bind(); 62 | 63 | var m = new EcognitaMathLib.WebGLMatrix(); 64 | var q = new EcognitaMathLib.WebGLQuaternion(); 65 | 66 | var mMatrix = m.identity(m.create()); 67 | var vMatrix = m.identity(m.create()); 68 | var pMatrix = m.identity(m.create()); 69 | var tmpMatrix = m.identity(m.create()); 70 | var mvpMatrix =m.identity(m.create()); 71 | var invMatrix = m.identity(m.create()); 72 | var qMatrix = m.identity(m.create()); 73 | 74 | var xQuaternion = q.identity(q.create()); 75 | 76 | shader.bind(); 77 | var uniLocation = new Array(); 78 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 79 | uniLocation.push(shader.uniformIndex('texture')); 80 | 81 | 82 | var lastPosX = 0; 83 | var lastPosY = 0; 84 | var isDragging = false; 85 | //event listener 86 | var hammer = new EcognitaMathLib.Hammer_Utils(canvas); 87 | hammer.on_pan = function(ev){ 88 | var elem = ev.target; 89 | if (!isDragging ) { 90 | isDragging = true; 91 | lastPosX = elem.offsetLeft; 92 | lastPosY = elem.offsetTop; 93 | } 94 | 95 | var posX = ev.center.x -lastPosX; 96 | var posY = ev.center.y -lastPosY; 97 | 98 | var cw = canvas.width; 99 | var ch = canvas.height; 100 | var wh = 1 / Math.sqrt(cw * cw + ch * ch); 101 | var x = posX - cw * 0.5; 102 | var y = posY - ch * 0.5; 103 | var sq = Math.sqrt(x * x + y * y); 104 | var r = sq * 2.0 * Math.PI * wh; 105 | if(sq != 1){ 106 | sq = 1 / sq; 107 | x *= sq; 108 | y *= sq; 109 | } 110 | xQuaternion = q.rotate(r, [y, x, 0.0]); 111 | 112 | if (ev.isFinal) { 113 | isDragging = false; 114 | } 115 | } 116 | hammer.enablePan(); 117 | 118 | //depth test and blend 119 | gl.enable(gl.DEPTH_TEST); 120 | gl.depthFunc(gl.LEQUAL); 121 | gl.enable(gl.BLEND); 122 | gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE); 123 | 124 | (function(){ 125 | 126 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 127 | gl.clearDepth(1.0); 128 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 129 | 130 | qMatrix = q.ToMat4x4(xQuaternion); 131 | 132 | var camPosition = [0.0,5.0,10.0]; 133 | var camUpDirection = [0.0,1.0,0.0]; 134 | 135 | //camera view matrix 136 | vMatrix = m.viewMatrix(camPosition, [0, 0, 0], camUpDirection); 137 | //billboard matrix 138 | invMatrix = m.viewMatrix( [0, 0, 0],camPosition, camUpDirection); 139 | 140 | //user input -> cam rotate 141 | vMatrix = m.multiply(vMatrix,qMatrix); 142 | invMatrix = m.multiply(invMatrix,qMatrix); 143 | //get billboard inv matrix 144 | //cam->"a" direction rotate theta == billboard ->"-a" direction rotate theta 145 | invMatrix = m.inverse(invMatrix); 146 | 147 | //calculate vp matrix 148 | pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 149 | tmpMatrix =m.multiply(pMatrix, vMatrix); 150 | 151 | //tex1 active 152 | if(tex1!=null){ 153 | gl.activeTexture(gl.TEXTURE1); 154 | tex1.bind(tex1.texture); 155 | gl.uniform1i(uniLocation[1], 1); 156 | } 157 | 158 | mMatrix = m.identity(mMatrix); 159 | mMatrix = m.rotate(mMatrix,Math.PI / 2, [1, 0, 0]); 160 | mMatrix = m.scale(mMatrix, [3.0, 3.0, 1.0]); 161 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 162 | 163 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 164 | ibo.draw(gl.TRIANGLES); 165 | 166 | //tex0 active 167 | if(tex0!=null){ 168 | gl.activeTexture(gl.TEXTURE0); 169 | tex0.bind(tex0.texture); 170 | gl.uniform1i(uniLocation[1], 0); 171 | } 172 | 173 | mMatrix = m.identity(mMatrix); 174 | mMatrix = m.translate(mMatrix,[0.0, 1.0, 0.0]); 175 | mMatrix = m.multiply(mMatrix, invMatrix); 176 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 177 | 178 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 179 | ibo.draw(gl.TRIANGLES); 180 | 181 | gl.flush(); 182 | setTimeout(arguments.callee, 1000 / 30); 183 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo16.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo16.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | 14 | var canvas = document.getElementById('canvas'); 15 | canvas.width = 500; 16 | canvas.height = 300; 17 | try { 18 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 19 | } catch (e) {} 20 | if (!gl) 21 | throw new Error("Could not initialise WebGL"); 22 | 23 | //debug the info for point size range 24 | var pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE); 25 | console.log('pointSizeRange:' + pointSizeRange[0] + ' to ' + pointSizeRange[1]); 26 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "point-vert", "point-frag"); 27 | var pointSphere = new EcognitaMathLib.ShpereModel(16,16,2,undefined,false); 28 | //point shpere 29 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 30 | 31 | vbo.addAttribute("position", 3, gl.FLOAT, false); 32 | vbo.addAttribute("color", 4, gl.FLOAT, false); 33 | 34 | vbo.init(pointSphere.data.length/7); 35 | vbo.copy(pointSphere.data); 36 | vbo.bind(shader); 37 | 38 | //line 39 | var vbo_line = new EcognitaMathLib.WebGL_VertexBuffer(); 40 | 41 | vbo_line.addAttribute("position", 3, gl.FLOAT, false); 42 | vbo_line.addAttribute("color", 4, gl.FLOAT, false); 43 | 44 | var lineData =[-1.0, -1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 45 | 1.0, -1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 46 | -1.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 47 | 1.0, 1.0, 0.0, 0.0, 0.0, 1.0, 1.0 48 | ]; 49 | vbo_line.init(4); 50 | vbo_line.copy(lineData); 51 | vbo_line.bind(shader); 52 | 53 | var m = new EcognitaMathLib.WebGLMatrix(); 54 | var q = new EcognitaMathLib.WebGLQuaternion(); 55 | 56 | var mMatrix = m.identity(m.create()); 57 | var vMatrix = m.identity(m.create()); 58 | var pMatrix = m.identity(m.create()); 59 | var tmpMatrix = m.identity(m.create()); 60 | var mvpMatrix =m.identity(m.create()); 61 | var qMatrix = m.identity(m.create()); 62 | 63 | var xQuaternion = q.identity(q.create()); 64 | 65 | shader.bind(); 66 | var uniLocation = new Array(); 67 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 68 | uniLocation.push(shader.uniformIndex('pointSize')); 69 | 70 | 71 | var lastPosX = 0; 72 | var lastPosY = 0; 73 | var isDragging = false; 74 | var hammer = new EcognitaMathLib.Hammer_Utils(canvas); 75 | hammer.on_pan = function(ev){ 76 | var elem = ev.target; 77 | if (!isDragging ) { 78 | isDragging = true; 79 | lastPosX = elem.offsetLeft; 80 | lastPosY = elem.offsetTop; 81 | } 82 | 83 | var posX = ev.center.x -lastPosX; 84 | var posY = ev.center.y -lastPosY; 85 | 86 | var cw = canvas.width; 87 | var ch = canvas.height; 88 | var wh = 1 / Math.sqrt(cw * cw + ch * ch); 89 | var x = posX - cw * 0.5; 90 | var y = posY - ch * 0.5; 91 | var sq = Math.sqrt(x * x + y * y); 92 | var r = sq * 2.0 * Math.PI * wh; 93 | if(sq != 1){ 94 | sq = 1 / sq; 95 | x *= sq; 96 | y *= sq; 97 | } 98 | xQuaternion = q.rotate(r, [y, x, 0.0]); 99 | 100 | if (ev.isFinal) { 101 | isDragging = false; 102 | } 103 | } 104 | hammer.enablePan(); 105 | 106 | //depth test 107 | gl.enable(gl.DEPTH_TEST); 108 | gl.depthFunc(gl.LEQUAL); 109 | 110 | var cnt = 0; 111 | 112 | (function(){ 113 | 114 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 115 | gl.clearDepth(1.0); 116 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 117 | 118 | cnt++; 119 | var rad = (cnt%360)*Math.PI/180; 120 | qMatrix = q.ToMat4x4(xQuaternion); 121 | 122 | var camPosition = [0.0,5.0,10.0]; 123 | var camUpDirection = [0.0,1.0,0.0]; 124 | 125 | vMatrix = m.viewMatrix(camPosition, [0, 0, 0], camUpDirection); 126 | vMatrix = m.multiply(vMatrix,qMatrix); 127 | pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 128 | tmpMatrix =m.multiply(pMatrix, vMatrix); 129 | 130 | var pointSize = 10*Math.sin(cnt/50); 131 | mMatrix = m.identity(mMatrix); 132 | mMatrix = m.rotate(mMatrix,rad, [0, 1, 0]); 133 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 134 | 135 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 136 | gl.uniform1f(uniLocation[1], pointSize); 137 | 138 | vbo.bind(shader); 139 | vbo.draw(gl.POINTS); 140 | 141 | //draw line 142 | mMatrix = m.identity(mMatrix); 143 | mMatrix = m.rotate(mMatrix,Math.PI / 2, [1, 0, 0]); 144 | mMatrix = m.scale(mMatrix, [3.0, 3.0, 1.0]); 145 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 146 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 147 | vbo_line.bind(shader); 148 | vbo_line.draw(gl.LINES); 149 | 150 | 151 | gl.flush(); 152 | setTimeout(arguments.callee, 1000 / 30); 153 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo17.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo17.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | /// 14 | 15 | var canvas = document.getElementById('canvas'); 16 | canvas.width = 500; 17 | canvas.height = 300; 18 | try { 19 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 20 | } catch (e) {} 21 | if (!gl) 22 | throw new Error("Could not initialise WebGL"); 23 | 24 | //debug the info for point size range 25 | var pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE); 26 | console.log('pointSizeRange:' + pointSizeRange[0] + ' to ' + pointSizeRange[1]); 27 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "pointSprite-vert", "pointSprite-frag"); 28 | var pointSphere = new EcognitaMathLib.ShpereModel(16,16,2,undefined,false); 29 | //point shpere 30 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 31 | 32 | vbo.addAttribute("position", 3, gl.FLOAT, false); 33 | vbo.addAttribute("color", 4, gl.FLOAT, false); 34 | 35 | vbo.init(pointSphere.data.length/7); 36 | vbo.copy(pointSphere.data); 37 | vbo.bind(shader); 38 | 39 | //line 40 | var vbo_line = new EcognitaMathLib.WebGL_VertexBuffer(); 41 | 42 | vbo_line.addAttribute("position", 3, gl.FLOAT, false); 43 | vbo_line.addAttribute("color", 4, gl.FLOAT, false); 44 | 45 | var lineData =[-1.0, -1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 46 | 1.0, -1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 47 | -1.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 48 | 1.0, 1.0, 0.0, 0.0, 0.0, 1.0, 1.0 49 | ]; 50 | vbo_line.init(4); 51 | vbo_line.copy(lineData); 52 | vbo_line.bind(shader); 53 | 54 | var m = new EcognitaMathLib.WebGLMatrix(); 55 | var q = new EcognitaMathLib.WebGLQuaternion(); 56 | 57 | var mMatrix = m.identity(m.create()); 58 | var vMatrix = m.identity(m.create()); 59 | var pMatrix = m.identity(m.create()); 60 | var tmpMatrix = m.identity(m.create()); 61 | var mvpMatrix =m.identity(m.create()); 62 | var qMatrix = m.identity(m.create()); 63 | 64 | var xQuaternion = q.identity(q.create()); 65 | 66 | shader.bind(); 67 | var uniLocation = new Array(); 68 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 69 | uniLocation.push(shader.uniformIndex('pointSize')); 70 | uniLocation.push(shader.uniformIndex('texture')); 71 | 72 | var lastPosX = 0; 73 | var lastPosY = 0; 74 | var isDragging = false; 75 | var hammer = new EcognitaMathLib.Hammer_Utils(canvas); 76 | hammer.on_pan = function(ev){ 77 | var elem = ev.target; 78 | if (!isDragging ) { 79 | isDragging = true; 80 | lastPosX = elem.offsetLeft; 81 | lastPosY = elem.offsetTop; 82 | } 83 | 84 | var posX = ev.center.x -lastPosX; 85 | var posY = ev.center.y -lastPosY; 86 | 87 | var cw = canvas.width; 88 | var ch = canvas.height; 89 | var wh = 1 / Math.sqrt(cw * cw + ch * ch); 90 | var x = posX - cw * 0.5; 91 | var y = posY - ch * 0.5; 92 | var sq = Math.sqrt(x * x + y * y); 93 | var r = sq * 2.0 * Math.PI * wh; 94 | if(sq != 1){ 95 | sq = 1 / sq; 96 | x *= sq; 97 | y *= sq; 98 | } 99 | xQuaternion = q.rotate(r, [y, x, 0.0]); 100 | 101 | if (ev.isFinal) { 102 | isDragging = false; 103 | } 104 | } 105 | hammer.enablePan(); 106 | 107 | //depth test 108 | gl.enable(gl.DEPTH_TEST); 109 | gl.depthFunc(gl.LEQUAL); 110 | gl.enable(gl.BLEND); 111 | gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE); 112 | 113 | var cnt = 0; 114 | 115 | var tex =null; 116 | var img = EcognitaMathLib.imread("./img/encognita.ico"); 117 | img.onload = function(){ 118 | tex = new EcognitaMathLib.WebGL_Texture(4,false,img); 119 | }; 120 | 121 | (function(){ 122 | 123 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 124 | gl.clearDepth(1.0); 125 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 126 | 127 | cnt++; 128 | var rad = (cnt%360)*Math.PI/180; 129 | qMatrix = q.ToMat4x4(xQuaternion); 130 | 131 | var camPosition = [0.0,5.0,10.0]; 132 | var camUpDirection = [0.0,1.0,0.0]; 133 | 134 | vMatrix = m.viewMatrix(camPosition, [0, 0, 0], camUpDirection); 135 | vMatrix = m.multiply(vMatrix,qMatrix); 136 | pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 137 | tmpMatrix =m.multiply(pMatrix, vMatrix); 138 | 139 | var pointSize = 32*Math.sin(cnt/50); 140 | 141 | if(tex!=null){ 142 | gl.activeTexture(gl.TEXTURE0); 143 | tex.bind(tex.texture); 144 | } 145 | 146 | mMatrix = m.identity(mMatrix); 147 | mMatrix = m.rotate(mMatrix,rad, [0, 1, 0]); 148 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 149 | 150 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 151 | gl.uniform1f(uniLocation[1], pointSize); 152 | gl.uniform1i(uniLocation[2], 0); 153 | 154 | vbo.bind(shader); 155 | vbo.draw(gl.POINTS); 156 | 157 | //draw line 158 | mMatrix = m.identity(mMatrix); 159 | mMatrix = m.rotate(mMatrix,Math.PI / 2, [1, 0, 0]); 160 | mMatrix = m.scale(mMatrix, [3.0, 3.0, 1.0]); 161 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 162 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 163 | vbo_line.bind(shader); 164 | vbo_line.draw(gl.LINES); 165 | 166 | 167 | gl.flush(); 168 | setTimeout(arguments.callee, 1000 / 30); 169 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo2.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo2.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | 11 | var canvas = document.getElementById('canvas'); 12 | canvas.width = 300; 13 | canvas.height = 300; 14 | try { 15 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 16 | } catch (e) {} 17 | if (!gl) 18 | throw new Error("Could not initialise WebGL"); 19 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 20 | gl.clearDepth(1.0); 21 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "demo1-vert", "demo1-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | 27 | vbo.addAttribute("position", 3, gl.FLOAT, false); 28 | vbo.addAttribute("color", 4, gl.FLOAT, false); 29 | vbo.init(3); 30 | 31 | vbo.copy(([0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 32 | 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 33 | -1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0])); 34 | 35 | vbo.bind(shader); 36 | var m = new EcognitaMathLib.WebGLMatrix(); 37 | 38 | var mMatrix = m.identity(m.create()); 39 | var vMatrix = m.viewMatrix([0.0, 0.0, 3.0], [0, 0, 0], [0, 1, 0]); 40 | var pMatrix = m.perspectiveMatrix(90, canvas.width / canvas.height, 0.1, 100); 41 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 42 | mMatrix =m.translate(mMatrix,[1.5,0.0,0.0]); 43 | var mvpMatrix = m.multiply(tmpMatrix, mMatrix); 44 | 45 | shader.bind(); 46 | var uniLocation = new Array(); 47 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 48 | //draw first triangle 49 | gl.uniformMatrix4fv(uniLocation, false, mvpMatrix); 50 | vbo.draw(gl.TRIANGLES); 51 | 52 | //draw second triangle 53 | mMatrix =m.identity(mMatrix); 54 | mMatrix =m.translate(mMatrix,[-1.5,0.0,0.0]); 55 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 56 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 57 | vbo.draw(gl.TRIANGLES); 58 | vbo.release(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo21.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo21.ts 4 | * test some webgl demo 5 | * need adjust the param's value(coding in normal map tools) 6 | * 7 | * ========================================================================= */ 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | /// 14 | /// 15 | 16 | var canvas = document.getElementById('canvas'); 17 | canvas.width = 500; 18 | canvas.height = 300; 19 | try { 20 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 21 | } catch (e) {} 22 | if (!gl) 23 | throw new Error("Could not initialise WebGL"); 24 | 25 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders,"bumpMapping-vert", "bumpMapping-frag"); 26 | var cubeData = new EcognitaMathLib.CubeModel(2,[6,6,6,255],true,true); 27 | var vbo_cube = new EcognitaMathLib.WebGL_VertexBuffer(); 28 | var ibo_cube = new EcognitaMathLib.WebGL_IndexBuffer(); 29 | 30 | vbo_cube.addAttribute("position", 3, gl.FLOAT, false); 31 | vbo_cube.addAttribute("normal", 3, gl.FLOAT, false); 32 | vbo_cube.addAttribute("color", 4, gl.FLOAT, false); 33 | vbo_cube.addAttribute("textureCoord", 2, gl.FLOAT, false); 34 | 35 | vbo_cube.init(cubeData.data.length/12); 36 | vbo_cube.copy(cubeData.data); 37 | vbo_cube.bind(shader); 38 | 39 | ibo_cube.init(cubeData.index); 40 | ibo_cube.bind(); 41 | 42 | shader.bind(); 43 | var uniLocation = new Array(); 44 | uniLocation.push(shader.uniformIndex('mMatrix')); 45 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 46 | uniLocation.push(shader.uniformIndex('invMatrix')); 47 | uniLocation.push(shader.uniformIndex('lightPosition')); 48 | uniLocation.push(shader.uniformIndex('eyePosition')); 49 | uniLocation.push(shader.uniformIndex('texture')); 50 | 51 | 52 | var m = new EcognitaMathLib.WebGLMatrix(); 53 | var q = new EcognitaMathLib.WebGLQuaternion(); 54 | 55 | var mMatrix = m.identity(m.create()); 56 | var vMatrix = m.identity(m.create()); 57 | var pMatrix = m.identity(m.create()); 58 | var tmpMatrix = m.identity(m.create()); 59 | var mvpMatrix =m.identity(m.create()); 60 | var invMatrix =m.identity(m.create()); 61 | 62 | var xQuaternion = q.identity(q.create()); 63 | 64 | var lastPosX = 0; 65 | var lastPosY = 0; 66 | var isDragging = false; 67 | var hammer = new EcognitaMathLib.Hammer_Utils(canvas); 68 | hammer.on_pan = function(ev){ 69 | var elem = ev.target; 70 | if (!isDragging ) { 71 | isDragging = true; 72 | lastPosX = elem.offsetLeft; 73 | lastPosY = elem.offsetTop; 74 | } 75 | 76 | var posX = ev.center.x -lastPosX; 77 | var posY = ev.center.y -lastPosY; 78 | 79 | var cw = canvas.width; 80 | var ch = canvas.height; 81 | var wh = 1 / Math.sqrt(cw * cw + ch * ch); 82 | var x = posX - cw * 0.5; 83 | var y = posY - ch * 0.5; 84 | var sq = Math.sqrt(x * x + y * y); 85 | var r = sq * 2.0 * Math.PI * wh; 86 | if(sq != 1){ 87 | sq = 1 / sq; 88 | x *= sq; 89 | y *= sq; 90 | } 91 | xQuaternion = q.rotate(r, [y, x, 0.0]); 92 | 93 | if (ev.isFinal) { 94 | isDragging = false; 95 | } 96 | } 97 | hammer.enablePan(); 98 | 99 | //depth test 100 | gl.enable(gl.DEPTH_TEST); 101 | gl.depthFunc(gl.LEQUAL); 102 | 103 | var cnt = 0; 104 | 105 | var tex_normalMap =null; 106 | var img_normalMap = EcognitaMathLib.imread("./img/tex5.png"); 107 | img_normalMap.onload = function(){ 108 | tex_normalMap = new EcognitaMathLib.WebGL_Texture(4,false,img_normalMap); 109 | }; 110 | gl.activeTexture(gl.TEXTURE0); 111 | 112 | var lightPosition = [-10.0, 10.0, 10.0]; 113 | var eyePosition = [0.0, 0.0, 5.0]; 114 | 115 | (function(){ 116 | 117 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 118 | gl.clearDepth(1.0); 119 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 120 | 121 | cnt++; 122 | var rad = (cnt % 360) * Math.PI / 180; 123 | 124 | var camUpDirection =new Array(); 125 | camUpDirection = q.ToV3([0.0,1.0,0.0],xQuaternion); 126 | eyePosition = q.ToV3([0.0, 0.0, 5.0],xQuaternion); 127 | 128 | //camera setting 129 | vMatrix = m.viewMatrix(eyePosition, [0, 0, 0], camUpDirection); 130 | pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 131 | tmpMatrix =m.multiply(pMatrix, vMatrix); 132 | 133 | if(tex_normalMap!=null){ 134 | tex_normalMap.bind(tex_normalMap.texture); 135 | } 136 | 137 | mMatrix = m.identity(mMatrix); 138 | mMatrix = m.rotate(mMatrix, -rad,[0,1,0]); 139 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 140 | invMatrix = m.inverse(mMatrix); 141 | gl.uniformMatrix4fv(uniLocation[0], false, mMatrix); 142 | gl.uniformMatrix4fv(uniLocation[1], false, mvpMatrix); 143 | gl.uniformMatrix4fv(uniLocation[2], false, invMatrix); 144 | gl.uniform3fv(uniLocation[3], lightPosition); 145 | gl.uniform3fv(uniLocation[4], eyePosition); 146 | gl.uniform1i(uniLocation[5], 0); 147 | 148 | ibo_cube.draw(gl.TRIANGLES); 149 | 150 | gl.flush(); 151 | setTimeout(arguments.callee, 1000 / 30); 152 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo3.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo3.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | 11 | var canvas = document.getElementById('canvas'); 12 | canvas.width = 300; 13 | canvas.height = 300; 14 | try { 15 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 16 | } catch (e) {} 17 | if (!gl) 18 | throw new Error("Could not initialise WebGL"); 19 | 20 | var cnt =0; 21 | 22 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "demo1-vert", "demo1-frag"); 23 | 24 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 25 | 26 | vbo.addAttribute("position", 3, gl.FLOAT, false); 27 | vbo.addAttribute("color", 4, gl.FLOAT, false); 28 | vbo.init(3); 29 | 30 | vbo.copy([0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 31 | 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 32 | -1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0]); 33 | 34 | vbo.bind(shader); 35 | var m = new EcognitaMathLib.WebGLMatrix(); 36 | 37 | var mMatrix = m.identity(m.create()); 38 | var vMatrix = m.viewMatrix([0.0, 0.0, 3.0], [0, 0, 0], [0, 1, 0]); 39 | var pMatrix = m.perspectiveMatrix(90, canvas.width / canvas.height, 0.1, 100); 40 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 41 | mMatrix =m.translate(mMatrix,[1.5,0.0,0.0]); 42 | var mvpMatrix = m.multiply(tmpMatrix, mMatrix); 43 | 44 | shader.bind(); 45 | var uniLocation = new Array(); 46 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 47 | 48 | (function(){ 49 | 50 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 51 | gl.clearDepth(1.0); 52 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 53 | 54 | cnt++; 55 | var rad = (cnt%360) * Math.PI/180; 56 | var x = Math.cos(rad); 57 | var y = Math.sin(rad); 58 | 59 | //draw first triangle animation 60 | mMatrix =m.identity(mMatrix); 61 | mMatrix =m.translate(mMatrix,[x,y+1.0,0.0]); 62 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 63 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 64 | vbo.draw(gl.TRIANGLES); 65 | 66 | //draw second triangle animation 67 | mMatrix =m.identity(mMatrix); 68 | mMatrix =m.translate(mMatrix,[1.0,-1.0,0.0]); 69 | mMatrix =m.rotate(mMatrix,rad,[0,1,0]); 70 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 71 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 72 | vbo.draw(gl.TRIANGLES); 73 | 74 | //draw third triangle animation 75 | var s = Math.sin(rad)+1.0; 76 | mMatrix =m.identity(mMatrix); 77 | mMatrix =m.translate(mMatrix,[-1.0,-1.0,0.0]); 78 | mMatrix =m.scale(mMatrix,[s,s,0.0]); 79 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 80 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 81 | vbo.draw(gl.TRIANGLES); 82 | gl.flush(); 83 | setTimeout(arguments.callee, 1000 / 30); 84 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo4.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo4.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | 11 | var canvas = document.getElementById('canvas'); 12 | canvas.width = 500; 13 | canvas.height = 300; 14 | try { 15 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 16 | } catch (e) {} 17 | if (!gl) 18 | throw new Error("Could not initialise WebGL"); 19 | 20 | var cnt =0; 21 | 22 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "demo1-vert", "demo1-frag"); 23 | 24 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 25 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 26 | 27 | vbo.addAttribute("position", 3, gl.FLOAT, false); 28 | vbo.addAttribute("color", 4, gl.FLOAT, false); 29 | vbo.init(4); 30 | 31 | vbo.copy([0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 32 | 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 33 | -1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 34 | 0.0,-1.0, 0.0, 1.0, 1.0, 1.0, 1.0]); 35 | vbo.bind(shader); 36 | 37 | ibo.init([0,1,2, 38 | 1,2,3]); 39 | ibo.bind(); 40 | 41 | var m = new EcognitaMathLib.WebGLMatrix(); 42 | 43 | var mMatrix = m.identity(m.create()); 44 | var vMatrix = m.viewMatrix([0.0, 0.0, 5.0], [0, 0, 0], [0, 1, 0]); 45 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 46 | var uniLocation = new Array(); 47 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 48 | (function(){ 49 | 50 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 51 | gl.clearDepth(1.0); 52 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 53 | 54 | cnt++; 55 | var rad = (cnt%360) * Math.PI/180; 56 | 57 | //draw square 58 | mMatrix =m.identity(mMatrix); 59 | mMatrix =m.rotate(mMatrix,rad,[0,1,0]); 60 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 61 | gl.uniformMatrix4fv(uniLocation, false, mvpMatrix); 62 | ibo.draw(gl.TRIANGLES); 63 | gl.flush(); 64 | setTimeout(arguments.callee, 1000 / 30); 65 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo5.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo5.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | 12 | var canvas = document.getElementById('canvas'); 13 | canvas.width = 500; 14 | canvas.height = 300; 15 | try { 16 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 17 | } catch (e) {} 18 | if (!gl) 19 | throw new Error("Could not initialise WebGL"); 20 | 21 | var cnt =0; 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "demo1-vert", "demo1-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 27 | var torusData = new EcognitaMathLib.TorusModel(32,32,1,2,undefined,false); 28 | 29 | vbo.addAttribute("position", 3, gl.FLOAT, false); 30 | vbo.addAttribute("color", 4, gl.FLOAT, false); 31 | vbo.init(torusData.data.length/7); 32 | vbo.copy(torusData.data); 33 | vbo.bind(shader); 34 | 35 | ibo.init(torusData.index); 36 | ibo.bind(); 37 | 38 | var m = new EcognitaMathLib.WebGLMatrix(); 39 | 40 | var mMatrix = m.identity(m.create()); 41 | var vMatrix = m.viewMatrix([0.0, 0.0, 20], [0, 0, 0], [0, 1, 0]); 42 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 43 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 44 | var mvpMatrix =m.identity(m.create()); 45 | 46 | shader.bind(); 47 | var uniLocation = new Array(); 48 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 49 | 50 | //depth test and cull face 51 | gl.enable(gl.DEPTH_TEST); 52 | gl.depthFunc(gl.LEQUAL); 53 | gl.enable(gl.CULL_FACE); 54 | (function(){ 55 | 56 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 57 | gl.clearDepth(1.0); 58 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 59 | 60 | cnt++; 61 | var rad = (cnt%360) * Math.PI/180; 62 | 63 | //draw square 64 | mMatrix =m.identity(mMatrix); 65 | mMatrix =m.rotate(mMatrix,rad,[0,1,1]); 66 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 67 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 68 | ibo.draw(gl.TRIANGLES); 69 | gl.flush(); 70 | setTimeout(arguments.callee, 1000 / 30); 71 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo6.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo6.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | 12 | var canvas = document.getElementById('canvas'); 13 | canvas.width = 500; 14 | canvas.height = 300; 15 | try { 16 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 17 | } catch (e) {} 18 | if (!gl) 19 | throw new Error("Could not initialise WebGL"); 20 | 21 | var cnt =0; 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "directionLighting-vert", "directionLighting-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 27 | var torusData = new EcognitaMathLib.TorusModel(32,32,1,2,undefined,true); 28 | 29 | vbo.addAttribute("position", 3, gl.FLOAT, false); 30 | vbo.addAttribute("normal", 3, gl.FLOAT, false); 31 | vbo.addAttribute("color", 4, gl.FLOAT, false); 32 | vbo.init(torusData.data.length/10); 33 | vbo.copy(torusData.data); 34 | vbo.bind(shader); 35 | 36 | ibo.init(torusData.index); 37 | ibo.bind(); 38 | 39 | var m = new EcognitaMathLib.WebGLMatrix(); 40 | 41 | var mMatrix = m.identity(m.create()); 42 | var vMatrix = m.viewMatrix([0.0, 0.0, 20], [0, 0, 0], [0, 1, 0]); 43 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 44 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 45 | var mvpMatrix =m.identity(m.create()); 46 | var invMatrix = m.identity(m.create()); 47 | 48 | shader.bind(); 49 | var uniLocation = new Array(); 50 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 51 | uniLocation.push(shader.uniformIndex('invMatrix')); 52 | uniLocation.push(shader.uniformIndex('lightDirection')); 53 | 54 | var lightDirection = [-0.5, 0.5, 0.5]; 55 | //depth test and cull face 56 | gl.enable(gl.DEPTH_TEST); 57 | gl.depthFunc(gl.LEQUAL); 58 | gl.enable(gl.CULL_FACE); 59 | (function(){ 60 | 61 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 62 | gl.clearDepth(1.0); 63 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 64 | 65 | cnt++; 66 | var rad = (cnt%360) * Math.PI/180; 67 | 68 | //draw square 69 | mMatrix =m.identity(mMatrix); 70 | mMatrix =m.rotate(mMatrix,rad,[0,1,1]); 71 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 72 | invMatrix = m.inverse(mMatrix); 73 | 74 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 75 | gl.uniformMatrix4fv(uniLocation[1], false, invMatrix); 76 | gl.uniform3fv(uniLocation[2], lightDirection); 77 | 78 | ibo.draw(gl.TRIANGLES); 79 | gl.flush(); 80 | setTimeout(arguments.callee, 1000 / 30); 81 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo7.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo7.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | 12 | var canvas = document.getElementById('canvas'); 13 | canvas.width = 500; 14 | canvas.height = 300; 15 | try { 16 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 17 | } catch (e) {} 18 | if (!gl) 19 | throw new Error("Could not initialise WebGL"); 20 | 21 | var cnt =0; 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "dir_ambient-vert", "dir_ambient-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 27 | var torusData = new EcognitaMathLib.TorusModel(32,32,1,2,undefined,true); 28 | 29 | vbo.addAttribute("position", 3, gl.FLOAT, false); 30 | vbo.addAttribute("normal", 3, gl.FLOAT, false); 31 | vbo.addAttribute("color", 4, gl.FLOAT, false); 32 | vbo.init(torusData.data.length/10); 33 | vbo.copy(torusData.data); 34 | vbo.bind(shader); 35 | 36 | ibo.init(torusData.index); 37 | ibo.bind(); 38 | 39 | var m = new EcognitaMathLib.WebGLMatrix(); 40 | 41 | var mMatrix = m.identity(m.create()); 42 | var vMatrix = m.viewMatrix([0.0, 0.0, 20], [0, 0, 0], [0, 1, 0]); 43 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 44 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 45 | var mvpMatrix =m.identity(m.create()); 46 | var invMatrix = m.identity(m.create()); 47 | 48 | shader.bind(); 49 | var uniLocation = new Array(); 50 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 51 | uniLocation.push(shader.uniformIndex('invMatrix')); 52 | uniLocation.push(shader.uniformIndex('lightDirection')); 53 | uniLocation.push(shader.uniformIndex('ambientColor')); 54 | 55 | var lightDirection = [-0.5, 0.5, 0.5]; 56 | var ambientColor = [0.1, 0.1, 0.1, 1.0]; 57 | //depth test and cull face 58 | gl.enable(gl.DEPTH_TEST); 59 | gl.depthFunc(gl.LEQUAL); 60 | gl.enable(gl.CULL_FACE); 61 | (function(){ 62 | 63 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 64 | gl.clearDepth(1.0); 65 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 66 | 67 | cnt++; 68 | var rad = (cnt%360) * Math.PI/180; 69 | 70 | //draw square 71 | mMatrix =m.identity(mMatrix); 72 | mMatrix =m.rotate(mMatrix,rad,[0,1,1]); 73 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 74 | invMatrix = m.inverse(mMatrix); 75 | 76 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 77 | gl.uniformMatrix4fv(uniLocation[1], false, invMatrix); 78 | gl.uniform3fv(uniLocation[2], lightDirection); 79 | gl.uniform4fv(uniLocation[3], ambientColor); 80 | 81 | ibo.draw(gl.TRIANGLES); 82 | gl.flush(); 83 | setTimeout(arguments.callee, 1000 / 30); 84 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo8.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo8.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | 12 | var canvas = document.getElementById('canvas'); 13 | canvas.width = 500; 14 | canvas.height = 300; 15 | try { 16 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 17 | } catch (e) {} 18 | if (!gl) 19 | throw new Error("Could not initialise WebGL"); 20 | 21 | var cnt =0; 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "specular-vert", "specular-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 27 | var torusData = new EcognitaMathLib.TorusModel(32,32,1,2,undefined,true); 28 | 29 | vbo.addAttribute("position", 3, gl.FLOAT, false); 30 | vbo.addAttribute("normal", 3, gl.FLOAT, false); 31 | vbo.addAttribute("color", 4, gl.FLOAT, false); 32 | vbo.init(torusData.data.length/10); 33 | vbo.copy(torusData.data); 34 | vbo.bind(shader); 35 | 36 | ibo.init(torusData.index); 37 | ibo.bind(); 38 | 39 | var m = new EcognitaMathLib.WebGLMatrix(); 40 | 41 | var mMatrix = m.identity(m.create()); 42 | var vMatrix = m.viewMatrix([0.0, 0.0, 20], [0, 0, 0], [0, 1, 0]); 43 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 44 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 45 | var mvpMatrix =m.identity(m.create()); 46 | var invMatrix = m.identity(m.create()); 47 | 48 | shader.bind(); 49 | var uniLocation = new Array(); 50 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 51 | uniLocation.push(shader.uniformIndex('invMatrix')); 52 | uniLocation.push(shader.uniformIndex('lightDirection')); 53 | uniLocation.push(shader.uniformIndex('ambientColor')); 54 | uniLocation.push(shader.uniformIndex('eyeDirection')); 55 | 56 | var lightDirection = [-0.5, 0.5, 0.5]; 57 | var ambientColor = [0.1, 0.1, 0.1, 1.0]; 58 | var eyeDirection = [0.0, 0.0, 20.0]; 59 | 60 | //depth test and cull face 61 | gl.enable(gl.DEPTH_TEST); 62 | gl.depthFunc(gl.LEQUAL); 63 | gl.enable(gl.CULL_FACE); 64 | (function(){ 65 | 66 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 67 | gl.clearDepth(1.0); 68 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 69 | 70 | cnt++; 71 | var rad = (cnt%360) * Math.PI/180; 72 | 73 | //draw square 74 | mMatrix =m.identity(mMatrix); 75 | mMatrix =m.rotate(mMatrix,rad,[0,1,1]); 76 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 77 | invMatrix = m.inverse(mMatrix); 78 | 79 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 80 | gl.uniformMatrix4fv(uniLocation[1], false, invMatrix); 81 | gl.uniform3fv(uniLocation[2], lightDirection); 82 | gl.uniform4fv(uniLocation[3], ambientColor); 83 | gl.uniform3fv(uniLocation[4], eyeDirection); 84 | 85 | ibo.draw(gl.TRIANGLES); 86 | gl.flush(); 87 | setTimeout(arguments.callee, 1000 / 30); 88 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/demo/demo9.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo9.ts 4 | * test some webgl demo 5 | * 6 | * ========================================================================= */ 7 | /// 8 | /// 9 | /// 10 | /// 11 | 12 | var canvas = document.getElementById('canvas'); 13 | canvas.width = 500; 14 | canvas.height = 300; 15 | try { 16 | var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 17 | } catch (e) {} 18 | if (!gl) 19 | throw new Error("Could not initialise WebGL"); 20 | 21 | var cnt =0; 22 | 23 | var shader = new EcognitaMathLib.WebGL_Shader(Shaders, "phong-vert", "phong-frag"); 24 | 25 | var vbo = new EcognitaMathLib.WebGL_VertexBuffer(); 26 | var ibo = new EcognitaMathLib.WebGL_IndexBuffer(); 27 | var torusData = new EcognitaMathLib.TorusModel(64,64,1.5,3.0,undefined,true); 28 | 29 | vbo.addAttribute("position", 3, gl.FLOAT, false); 30 | vbo.addAttribute("normal", 3, gl.FLOAT, false); 31 | vbo.addAttribute("color", 4, gl.FLOAT, false); 32 | vbo.init(torusData.data.length/10); 33 | vbo.copy(torusData.data); 34 | vbo.bind(shader); 35 | 36 | ibo.init(torusData.index); 37 | ibo.bind(); 38 | 39 | var m = new EcognitaMathLib.WebGLMatrix(); 40 | 41 | var mMatrix = m.identity(m.create()); 42 | var vMatrix = m.viewMatrix([0.0, 0.0, 20], [0, 0, 0], [0, 1, 0]); 43 | var pMatrix = m.perspectiveMatrix(45, canvas.width / canvas.height, 0.1, 100); 44 | var tmpMatrix = m.multiply(pMatrix, vMatrix); 45 | var mvpMatrix =m.identity(m.create()); 46 | var invMatrix = m.identity(m.create()); 47 | 48 | shader.bind(); 49 | var uniLocation = new Array(); 50 | uniLocation.push(shader.uniformIndex('mvpMatrix')); 51 | uniLocation.push(shader.uniformIndex('invMatrix')); 52 | uniLocation.push(shader.uniformIndex('lightDirection')); 53 | uniLocation.push(shader.uniformIndex('ambientColor')); 54 | uniLocation.push(shader.uniformIndex('eyeDirection')); 55 | 56 | var lightDirection = [-0.5, 1.0, 0.5]; 57 | var ambientColor = [0.1, 0.1, 0.1, 1.0]; 58 | var eyeDirection = [0.0, 0.0, 20.0]; 59 | 60 | //depth test and cull face 61 | gl.enable(gl.DEPTH_TEST); 62 | gl.depthFunc(gl.LEQUAL); 63 | gl.enable(gl.CULL_FACE); 64 | (function(){ 65 | 66 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 67 | gl.clearDepth(1.0); 68 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 69 | 70 | cnt++; 71 | var rad = (cnt%360) * Math.PI/180; 72 | 73 | //draw square 74 | mMatrix =m.identity(mMatrix); 75 | mMatrix =m.rotate(mMatrix,rad,[0,1,1]); 76 | mvpMatrix = m.multiply(tmpMatrix, mMatrix); 77 | invMatrix = m.inverse(mMatrix); 78 | 79 | gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix); 80 | gl.uniformMatrix4fv(uniLocation[1], false, invMatrix); 81 | gl.uniform3fv(uniLocation[2], lightDirection); 82 | gl.uniform4fv(uniLocation[3], ambientColor); 83 | gl.uniform3fv(uniLocation[4], eyeDirection); 84 | 85 | ibo.draw(gl.TRIANGLES); 86 | gl.flush(); 87 | setTimeout(arguments.callee, 1000 / 30); 88 | })(); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/lib/cv_colorSpace.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * cv_colorSpace.ts 4 | * color space transformation 5 | * 6 | * ========================================================================= */ 7 | module EcognitaMathLib { 8 | 9 | //hsv space transform to rgb space 10 | //h(0~360) sva(0~1) 11 | export function HSV2RGB(h:number,s:number,v:number,a:number) { 12 | if(s > 1 || v > 1 || a > 1){return;} 13 | var th = h % 360; 14 | var i = Math.floor(th / 60); 15 | var f = th / 60 - i; 16 | var m = v * (1 - s); 17 | var n = v * (1 - s * f); 18 | var k = v * (1 - s * (1 - f)); 19 | var color = new Array(); 20 | if(!(s > 0) && !(s < 0)){ 21 | color.push(v, v, v, a); 22 | } else { 23 | var r = new Array(v, n, m, m, k, v); 24 | var g = new Array(k, v, v, n, m, m); 25 | var b = new Array(m, m, k, v, v, n); 26 | color.push(r[i], g[i], b[i], a); 27 | } 28 | return color; 29 | } 30 | 31 | 32 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/lib/cv_imread.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * cv_imread.ts 4 | * read the image file 5 | * 6 | * ========================================================================= */ 7 | module EcognitaMathLib { 8 | 9 | export function imread(file:any) { 10 | var img = new Image(); 11 | img.src = file; 12 | return img; 13 | } 14 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/lib/extra_utils.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * extra_utils.ts 4 | * simple utils from extra library 5 | * 6 | * ========================================================================= */ 7 | module EcognitaMathLib { 8 | declare var Hammer:any; 9 | export class Hammer_Utils { 10 | hm:any; 11 | on_pan:any; 12 | //event listener dom, 13 | constructor(canvas:any) { 14 | //event listener 15 | //using hammer library 16 | this.hm = new Hammer(canvas); 17 | this.on_pan = undefined; 18 | 19 | } 20 | 21 | enablePan(){ 22 | if(this.on_pan == undefined){ 23 | console.log("please setting the PAN function!"); 24 | return; 25 | } 26 | this.hm.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) ); 27 | this.hm.on("pan", this.on_pan); 28 | } 29 | 30 | } 31 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/package/build-webgl.bat: -------------------------------------------------------------------------------- 1 | TITLE Environment Setting 2 | @echo off 3 | echo complie shader 4 | python compile-shaders.py 5 | 6 | echo. 7 | echo compile typescript 8 | tsc --out ../../scripts/main.js @compile-list.txt 9 | 10 | echo. 11 | echo Finished Environment Setting -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/package/compile-list.txt: -------------------------------------------------------------------------------- 1 | ./pkgBumpMapping.ts 2 | ./pkg/bumpMapping.ts 3 | ../lib/cv_imread.ts 4 | ../lib/cv_colorSpace.ts 5 | ../lib/extra_utils.ts 6 | ../lib/webgl_matrix.ts 7 | ../lib/webgl_quaternion.ts 8 | ../lib/webgl_shaders.ts 9 | ../lib/webgl_model.ts 10 | ../lib/webgl_utils.ts -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/package/compile-shaders.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | 3 | import os 4 | 5 | ShaderDir = "../shaders" 6 | MaxLen = 80; 7 | 8 | entries = [] 9 | for file in os.listdir(ShaderDir): 10 | if file.find(".glsl") == -1: 11 | continue; 12 | 13 | lines = open(os.path.join(ShaderDir, file)).read().strip().split('\n') 14 | 15 | splitLines = [] 16 | for line in lines: 17 | if not line.strip(): 18 | splitLines[-1] = splitLines[-1][:-1] + "\\n'" 19 | splitLines.append('') 20 | else: 21 | justLen = min(len(line), MaxLen) 22 | parts = [line[i:i + MaxLen] for i in range(0, len(line), MaxLen)] 23 | for i in parts[:-1]: 24 | splitLines.append(("'" + i + "'").rjust(justLen)) 25 | splitLines.append(("'" + parts[-1] + "\\n'").rjust(justLen)) 26 | 27 | lineLen = len(max(splitLines, key=len)) 28 | 29 | source = "" 30 | for i, line in enumerate(splitLines): 31 | if line: 32 | source += " " 33 | if i < len(splitLines) - 1: 34 | source += line.ljust(lineLen) + " +" 35 | else: 36 | source += line 37 | if i < len(splitLines) - 1: 38 | source += '\n' 39 | 40 | entries.append(" '{}':\n{}".format(file.replace('.glsl', ''), source)) 41 | 42 | open("../lib/webgl_shaders.ts", 'w').write("var Shaders = {\n" + ",\n\n".join(entries) + "\n}") 43 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/package/pkgBumpMapping.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * pkgBumpMapping.ts 4 | * package for bump mapping 5 | * 6 | * ========================================================================= */ 7 | /// 8 | var canvas = document.getElementById('canvas'); 9 | canvas.width = 500; 10 | canvas.height = 300; 11 | var bumpMapping = new EcognitaWeb3DFunction.BumpMapping(canvas); -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/AKF-frag.glsl: -------------------------------------------------------------------------------- 1 | // by Jan Eric Kyprianidis 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform sampler2D k0; 6 | uniform sampler2D tfm; 7 | uniform float radius; 8 | uniform float q; 9 | uniform float alpha; 10 | 11 | uniform bool anisotropic; 12 | uniform float cvsHeight; 13 | uniform float cvsWidth; 14 | 15 | const float PI = 3.14159265358979323846; 16 | const int N = 8; 17 | 18 | void main (void) { 19 | vec2 src_size = vec2(cvsWidth, cvsHeight); 20 | vec2 uv = vec2(gl_FragCoord.x / src_size.x, (src_size.y - gl_FragCoord.y) / src_size.y); 21 | 22 | if(anisotropic){ 23 | vec4 m[8]; 24 | vec3 s[8]; 25 | for (int k = 0; k < N; ++k) { 26 | m[k] = vec4(0.0); 27 | s[k] = vec3(0.0); 28 | } 29 | 30 | float piN = 2.0 * PI / float(N); 31 | mat2 X = mat2(cos(piN), sin(piN), -sin(piN), cos(piN)); 32 | 33 | vec4 t = texture2D(tfm, uv); 34 | float a = radius * clamp((alpha + t.w) / alpha, 0.1, 2.0); 35 | float b = radius * clamp(alpha / (alpha + t.w), 0.1, 2.0); 36 | 37 | float cos_phi = cos(t.z); 38 | float sin_phi = sin(t.z); 39 | 40 | mat2 R = mat2(cos_phi, -sin_phi, sin_phi, cos_phi); 41 | mat2 S = mat2(0.5/a, 0.0, 0.0, 0.5/b); 42 | mat2 SR = S * R; 43 | 44 | const int max_x = 6; 45 | const int max_y = 6; 46 | 47 | for (int j = -max_y; j <= max_y; ++j) { 48 | for (int i = -max_x; i <= max_x; ++i) { 49 | vec2 v = SR * vec2(i,j); 50 | if (dot(v,v) <= 0.25) { 51 | vec4 c_fix = texture2D(src, uv + vec2(i,j) / src_size); 52 | vec3 c = c_fix.rgb; 53 | for (int k = 0; k < N; ++k) { 54 | float w = texture2D(k0, vec2(0.5, 0.5) + v).x; 55 | 56 | m[k] += vec4(c * w, w); 57 | s[k] += c * c * w; 58 | 59 | v *= X; 60 | } 61 | } 62 | } 63 | } 64 | 65 | vec4 o = vec4(0.0); 66 | for (int k = 0; k < N; ++k) { 67 | m[k].rgb /= m[k].w; 68 | s[k] = abs(s[k] / m[k].w - m[k].rgb * m[k].rgb); 69 | 70 | float sigma2 = s[k].r + s[k].g + s[k].b; 71 | float w = 1.0 / (1.0 + pow(255.0 * sigma2, 0.5 * q)); 72 | 73 | o += vec4(m[k].rgb * w, w); 74 | } 75 | 76 | gl_FragColor = vec4(o.rgb / o.w, 1.0); 77 | }else{ 78 | gl_FragColor = texture2D(src, uv); 79 | } 80 | 81 | } 82 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/AKF-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/Abstraction-frag.glsl: -------------------------------------------------------------------------------- 1 | // by Jan Eric Kyprianidis 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform sampler2D akf; 6 | uniform sampler2D fxdog; 7 | uniform vec3 edge_color; 8 | 9 | uniform bool b_Abstraction; 10 | uniform float cvsHeight; 11 | uniform float cvsWidth; 12 | 13 | void main (void) { 14 | vec2 src_size = vec2(cvsWidth, cvsHeight); 15 | vec2 uv = gl_FragCoord.xy / src_size ; 16 | vec2 uv_src = vec2(gl_FragCoord.x / src_size.x, (src_size.y - gl_FragCoord.y) / src_size.y); 17 | if(b_Abstraction){ 18 | vec2 d = 1.0 / src_size; 19 | vec3 c = texture2D(akf, uv).xyz; 20 | float e = texture2D(fxdog, uv).x; 21 | gl_FragColor = vec4(mix(edge_color, c, e), 1.0); 22 | }else{ 23 | gl_FragColor = texture2D(src, uv_src); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/Abstraction-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/Anisotropic-frag.glsl: -------------------------------------------------------------------------------- 1 | // by Jan Eric Kyprianidis 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform sampler2D tfm; 6 | uniform sampler2D visual; 7 | uniform bool anisotropic; 8 | uniform float cvsHeight; 9 | uniform float cvsWidth; 10 | varying vec2 vTexCoord; 11 | 12 | void main (void) { 13 | vec2 src_size = vec2(cvsWidth, cvsHeight); 14 | vec2 uv = vec2(gl_FragCoord.x / src_size.x, (src_size.y - gl_FragCoord.y) / src_size.y); 15 | vec4 t = texture2D( tfm, uv ); 16 | 17 | if(anisotropic){ 18 | gl_FragColor = texture2D(visual, vec2(t.w,0.5)); 19 | }else{ 20 | gl_FragColor = texture2D(src, uv); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/Anisotropic-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/DoG-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D src; 4 | 5 | uniform bool b_DoG; 6 | uniform float cvsHeight; 7 | uniform float cvsWidth; 8 | 9 | uniform float sigma_e; 10 | uniform float sigma_r; 11 | uniform float tau; 12 | uniform float phi; 13 | varying vec2 vTexCoord; 14 | 15 | void main(void){ 16 | vec3 destColor = vec3(0.0); 17 | if(b_DoG){ 18 | float tFrag = 1.0 / cvsHeight; 19 | float sFrag = 1.0 / cvsWidth; 20 | vec2 Frag = vec2(sFrag,tFrag); 21 | vec2 uv = vec2(gl_FragCoord.s, cvsHeight - gl_FragCoord.t); 22 | float twoSigmaESquared = 2.0 * sigma_e * sigma_e; 23 | float twoSigmaRSquared = 2.0 * sigma_r * sigma_r; 24 | int halfWidth = int(ceil( 2.0 * sigma_r )); 25 | 26 | const int MAX_NUM_ITERATION = 99999; 27 | vec2 sum = vec2(0.0); 28 | vec2 norm = vec2(0.0); 29 | 30 | for(int cnt=0;cnt (2*halfWidth+1)*(2*halfWidth+1)){break;} 32 | int i = int(cnt / (2*halfWidth+1)) - halfWidth; 33 | int j = cnt - halfWidth - int(cnt / (2*halfWidth+1)) * (2*halfWidth+1); 34 | 35 | float d = length(vec2(i,j)); 36 | vec2 kernel = vec2( exp( -d * d / twoSigmaESquared ), 37 | exp( -d * d / twoSigmaRSquared )); 38 | 39 | vec2 L = texture2D(src, (uv + vec2(i,j)) * Frag).xx; 40 | 41 | norm += 2.0 * kernel; 42 | sum += kernel * L; 43 | } 44 | 45 | sum /= norm; 46 | 47 | float H = 100.0 * (sum.x - tau * sum.y); 48 | float edge = ( H > 0.0 )? 1.0 : 2.0 * smoothstep(-2.0, 2.0, phi * H ); 49 | destColor = vec3(edge); 50 | }else{ 51 | destColor = texture2D(src, vTexCoord).rgb; 52 | } 53 | 54 | gl_FragColor = vec4(destColor, 1.0); 55 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/DoG-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/ETF-frag.glsl: -------------------------------------------------------------------------------- 1 | // Edge Tangent Flow 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform float cvsHeight; 6 | uniform float cvsWidth; 7 | 8 | void main (void) { 9 | vec2 src_size = vec2(cvsWidth, cvsHeight); 10 | vec2 uv = gl_FragCoord.xy / src_size; 11 | vec2 d = 1.0 / src_size; 12 | vec3 c = texture2D(src, uv).xyz; 13 | float gx = c.z; 14 | vec2 tx = c.xy; 15 | const float KERNEL = 5.0; 16 | vec2 etf = vec2(0.0); 17 | vec2 sum = vec2(0,0); 18 | float weight = 0.0; 19 | 20 | for(float j = -KERNEL ; j0.0?1.0:-1.0; 28 | float ws = sqrt(j*j+i*i) < KERNEL?1.0:0.0; 29 | 30 | sum += ty * (wm * wd ); 31 | weight += wm * wd ; 32 | } 33 | } 34 | 35 | if(weight != 0.0){ 36 | etf = sum / weight; 37 | }else{ 38 | etf = vec2(0.0); 39 | } 40 | 41 | float mag = sqrt(etf.x*etf.x + etf.y*etf.y); 42 | float vx = etf.x/mag; 43 | float vy = etf.y/mag; 44 | gl_FragColor = vec4(vx,vy,mag, 1.0); 45 | } 46 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/ETF-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/FDoG-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D src; 4 | uniform sampler2D tfm; 5 | 6 | uniform float cvsHeight; 7 | uniform float cvsWidth; 8 | 9 | uniform float sigma_m; 10 | uniform float phi; 11 | 12 | uniform bool b_FDoG; 13 | varying vec2 vTexCoord; 14 | 15 | struct lic_t { 16 | vec2 p; 17 | vec2 t; 18 | float w; 19 | float dw; 20 | }; 21 | 22 | void step(inout lic_t s) { 23 | vec2 src_size = vec2(cvsWidth, cvsHeight); 24 | vec2 t = texture2D(tfm, s.p).xy; 25 | if (dot(t, s.t) < 0.0) t = -t; 26 | s.t = t; 27 | 28 | s.dw = (abs(t.x) > abs(t.y))? 29 | abs((fract(s.p.x) - 0.5 - sign(t.x)) / t.x) : 30 | abs((fract(s.p.y) - 0.5 - sign(t.y)) / t.y); 31 | 32 | s.p += t * s.dw / src_size; 33 | s.w += s.dw; 34 | } 35 | 36 | void main (void) { 37 | 38 | vec3 destColor = vec3(0.0); 39 | if(b_FDoG){ 40 | vec2 src_size = vec2(cvsWidth, cvsHeight); 41 | vec2 uv = vec2(gl_FragCoord.x / src_size.x, (src_size.y - gl_FragCoord.y) / src_size.y); 42 | 43 | float twoSigmaMSquared = 2.0 * sigma_m * sigma_m; 44 | float halfWidth = 2.0 * sigma_m; 45 | 46 | float H = texture2D( src, uv ).x; 47 | float w = 1.0; 48 | 49 | lic_t a, b; 50 | a.p = b.p = uv; 51 | a.t = texture2D( tfm, uv ).xy / src_size; 52 | b.t = -a.t; 53 | a.w = b.w = 0.0; 54 | 55 | const int MAX_NUM_ITERATION = 99999; 56 | for(int i = 0;i 0.0 )? 1.0 : 2.0 * smoothstep(-2.0, 2.0, phi * H ); 78 | destColor = vec3(edge); 79 | } 80 | else{ 81 | destColor = texture2D(src, vTexCoord).rgb; 82 | } 83 | gl_FragColor = vec4(destColor, 1.0); 84 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/FDoG-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/FXDoG-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D src; 4 | uniform sampler2D tfm; 5 | 6 | uniform float cvsHeight; 7 | uniform float cvsWidth; 8 | 9 | uniform float sigma_m; 10 | uniform float phi; 11 | uniform float epsilon; 12 | 13 | uniform bool b_FXDoG; 14 | varying vec2 vTexCoord; 15 | 16 | float cosh(float val) 17 | { 18 | float tmp = exp(val); 19 | float cosH = (tmp + 1.0 / tmp) / 2.0; 20 | return cosH; 21 | } 22 | 23 | float tanh(float val) 24 | { 25 | float tmp = exp(val); 26 | float tanH = (tmp - 1.0 / tmp) / (tmp + 1.0 / tmp); 27 | return tanH; 28 | } 29 | 30 | float sinh(float val) 31 | { 32 | float tmp = exp(val); 33 | float sinH = (tmp - 1.0 / tmp) / 2.0; 34 | return sinH; 35 | } 36 | 37 | struct lic_t { 38 | vec2 p; 39 | vec2 t; 40 | float w; 41 | float dw; 42 | }; 43 | 44 | void step(inout lic_t s) { 45 | vec2 src_size = vec2(cvsWidth, cvsHeight); 46 | vec2 t = texture2D(tfm, s.p).xy; 47 | if (dot(t, s.t) < 0.0) t = -t; 48 | s.t = t; 49 | 50 | s.dw = (abs(t.x) > abs(t.y))? 51 | abs((fract(s.p.x) - 0.5 - sign(t.x)) / t.x) : 52 | abs((fract(s.p.y) - 0.5 - sign(t.y)) / t.y); 53 | 54 | s.p += t * s.dw / src_size; 55 | s.w += s.dw; 56 | } 57 | 58 | void main (void) { 59 | 60 | vec3 destColor = vec3(0.0); 61 | if(b_FXDoG){ 62 | vec2 src_size = vec2(cvsWidth, cvsHeight); 63 | vec2 uv = vec2(gl_FragCoord.x / src_size.x, (src_size.y - gl_FragCoord.y) / src_size.y); 64 | 65 | float twoSigmaMSquared = 2.0 * sigma_m * sigma_m; 66 | float halfWidth = 2.0 * sigma_m; 67 | 68 | float H = texture2D( src, uv ).x; 69 | float w = 1.0; 70 | 71 | lic_t a, b; 72 | a.p = b.p = uv; 73 | a.t = texture2D( tfm, uv ).xy / src_size; 74 | b.t = -a.t; 75 | a.w = b.w = 0.0; 76 | 77 | const int MAX_NUM_ITERATION = 99999; 78 | for(int i = 0;i epsilon )? 1.0 : 1.0 + tanh( phi * (H - epsilon)); 100 | destColor = vec3(edge); 101 | } 102 | else{ 103 | destColor = texture2D(src, vTexCoord).rgb; 104 | } 105 | gl_FragColor = vec4(destColor, 1.0); 106 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/FXDoG-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/Gaussian_K-frag.glsl: -------------------------------------------------------------------------------- 1 | // by Jan Eric Kyprianidis 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform float sigma; 6 | uniform float cvsHeight; 7 | uniform float cvsWidth; 8 | 9 | void main (void) { 10 | vec2 src_size = vec2(cvsWidth, cvsHeight); 11 | vec2 uv = gl_FragCoord.xy / src_size; 12 | 13 | float twoSigma2 = 2.0 * 2.0 * 2.0; 14 | const int halfWidth = 4;//int(ceil( 2.0 * sigma )); 15 | 16 | vec3 sum = vec3(0.0); 17 | float norm = 0.0; 18 | for ( int i = -halfWidth; i <= halfWidth; ++i ) { 19 | for ( int j = -halfWidth; j <= halfWidth; ++j ) { 20 | float d = length(vec2(i,j)); 21 | float kernel = exp( -d *d / twoSigma2 ); 22 | vec3 c = texture2D(src, uv + vec2(i,j) / src_size ).rgb; 23 | sum += kernel * c; 24 | norm += kernel; 25 | } 26 | } 27 | gl_FragColor = vec4(sum / norm, 1.0); 28 | } 29 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/Gaussian_K-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/LIC-frag.glsl: -------------------------------------------------------------------------------- 1 | // by Jan Eric Kyprianidis 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform sampler2D tfm; 6 | 7 | uniform bool b_lic; 8 | uniform float cvsHeight; 9 | uniform float cvsWidth; 10 | uniform float sigma; 11 | 12 | struct lic_t { 13 | vec2 p; 14 | vec2 t; 15 | float w; 16 | float dw; 17 | }; 18 | 19 | void step(inout lic_t s) { 20 | vec2 src_size = vec2(cvsWidth, cvsHeight); 21 | vec2 t = texture2D(tfm, s.p).xy; 22 | if (dot(t, s.t) < 0.0) t = -t; 23 | s.t = t; 24 | 25 | s.dw = (abs(t.x) > abs(t.y))? 26 | abs((fract(s.p.x) - 0.5 - sign(t.x)) / t.x) : 27 | abs((fract(s.p.y) - 0.5 - sign(t.y)) / t.y); 28 | 29 | s.p += t * s.dw / src_size; 30 | s.w += s.dw; 31 | } 32 | 33 | void main (void) { 34 | vec2 src_size = vec2(cvsWidth, cvsHeight); 35 | float twoSigma2 = 2.0 * sigma * sigma; 36 | float halfWidth = 2.0 * sigma; 37 | vec2 uv = vec2(gl_FragCoord.x / src_size.x, (src_size.y - gl_FragCoord.y) / src_size.y); 38 | 39 | if(b_lic){ 40 | const int MAX_NUM_ITERATION = 99999; 41 | vec3 c = texture2D( src, uv ).xyz; 42 | float w = 1.0; 43 | 44 | lic_t a, b; 45 | a.p = b.p = uv; 46 | a.t = texture2D( tfm, uv ).xy / src_size; 47 | b.t = -a.t; 48 | a.w = b.w = 0.0; 49 | 50 | for(int i = 0;i nabs.y)? nabs.x : nabs.y); 29 | n /= src_size; 30 | 31 | vec2 sum = texture2D( src, uv ).xx; 32 | vec2 norm = vec2(1.0, 1.0); 33 | 34 | float halfWidth = 2.0 * sigma_r; 35 | float d = ds; 36 | const int MAX_NUM_ITERATION = 99999; 37 | for(int i = 0;i nabs.y)? nabs.x : nabs.y); 29 | n /= src_size; 30 | 31 | vec2 sum = texture2D( src, uv ).xx; 32 | vec2 norm = vec2(1.0, 1.0); 33 | 34 | float halfWidth = 2.0 * sigma; 35 | float d = ds; 36 | const int MAX_NUM_ITERATION = 99999; 37 | for(int i = 0;i 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform float cvsHeight; 6 | uniform float cvsWidth; 7 | 8 | void main (void) { 9 | vec2 src_size = vec2(cvsWidth, cvsHeight); 10 | vec2 uv = gl_FragCoord.xy / src_size; 11 | vec2 d = 1.0 / src_size; 12 | vec3 u = ( 13 | -1.0 * texture2D(src, uv + vec2(-d.x, -d.y)).xyz + 14 | -2.0 * texture2D(src, uv + vec2(-d.x, 0.0)).xyz + 15 | -1.0 * texture2D(src, uv + vec2(-d.x, d.y)).xyz + 16 | +1.0 * texture2D(src, uv + vec2( d.x, -d.y)).xyz + 17 | +2.0 * texture2D(src, uv + vec2( d.x, 0.0)).xyz + 18 | +1.0 * texture2D(src, uv + vec2( d.x, d.y)).xyz 19 | ) / 4.0; 20 | 21 | vec3 v = ( 22 | -1.0 * texture2D(src, uv + vec2(-d.x, -d.y)).xyz + 23 | -2.0 * texture2D(src, uv + vec2( 0.0, -d.y)).xyz + 24 | -1.0 * texture2D(src, uv + vec2( d.x, -d.y)).xyz + 25 | +1.0 * texture2D(src, uv + vec2(-d.x, d.y)).xyz + 26 | +2.0 * texture2D(src, uv + vec2( 0.0, d.y)).xyz + 27 | +1.0 * texture2D(src, uv + vec2( d.x, d.y)).xyz 28 | ) / 4.0; 29 | 30 | gl_FragColor = vec4(dot(u, u), dot(v, v), dot(u, v), 1.0); 31 | } 32 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/SST-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/TF-frag.glsl: -------------------------------------------------------------------------------- 1 | // Tangent Field 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform float cvsHeight; 6 | uniform float cvsWidth; 7 | uniform float hCoef[9]; 8 | uniform float vCoef[9]; 9 | 10 | const float redScale = 0.298912; 11 | const float greenScale = 0.586611; 12 | const float blueScale = 0.114478; 13 | const vec3 monochromeScale = vec3(redScale, greenScale, blueScale); 14 | 15 | void main (void) { 16 | vec2 offset[9]; 17 | offset[0] = vec2(-1.0, -1.0); 18 | offset[1] = vec2( 0.0, -1.0); 19 | offset[2] = vec2( 1.0, -1.0); 20 | offset[3] = vec2(-1.0, 0.0); 21 | offset[4] = vec2( 0.0, 0.0); 22 | offset[5] = vec2( 1.0, 0.0); 23 | offset[6] = vec2(-1.0, 1.0); 24 | offset[7] = vec2( 0.0, 1.0); 25 | offset[8] = vec2( 1.0, 1.0); 26 | float tFrag = 1.0 / cvsHeight; 27 | float sFrag = 1.0 / cvsWidth; 28 | vec2 Frag = vec2(sFrag,tFrag); 29 | vec2 uv = vec2(gl_FragCoord.s, gl_FragCoord.t); 30 | float horizonColor = 0.0; 31 | float verticalColor = 0.0; 32 | 33 | horizonColor += dot(texture2D(src, (uv + offset[0]) * Frag).rgb, monochromeScale) * hCoef[0]; 34 | horizonColor += dot(texture2D(src, (uv + offset[1]) * Frag).rgb, monochromeScale) * hCoef[1]; 35 | horizonColor += dot(texture2D(src, (uv + offset[2]) * Frag).rgb, monochromeScale) * hCoef[2]; 36 | horizonColor += dot(texture2D(src, (uv + offset[3]) * Frag).rgb, monochromeScale) * hCoef[3]; 37 | horizonColor += dot(texture2D(src, (uv + offset[4]) * Frag).rgb, monochromeScale) * hCoef[4]; 38 | horizonColor += dot(texture2D(src, (uv + offset[5]) * Frag).rgb, monochromeScale) * hCoef[5]; 39 | horizonColor += dot(texture2D(src, (uv + offset[6]) * Frag).rgb, monochromeScale) * hCoef[6]; 40 | horizonColor += dot(texture2D(src, (uv + offset[7]) * Frag).rgb, monochromeScale) * hCoef[7]; 41 | horizonColor += dot(texture2D(src, (uv + offset[8]) * Frag).rgb, monochromeScale) * hCoef[8]; 42 | 43 | verticalColor += dot(texture2D(src, (uv + offset[0]) * Frag).rgb, monochromeScale) * vCoef[0]; 44 | verticalColor += dot(texture2D(src, (uv + offset[1]) * Frag).rgb, monochromeScale) * vCoef[1]; 45 | verticalColor += dot(texture2D(src, (uv + offset[2]) * Frag).rgb, monochromeScale) * vCoef[2]; 46 | verticalColor += dot(texture2D(src, (uv + offset[3]) * Frag).rgb, monochromeScale) * vCoef[3]; 47 | verticalColor += dot(texture2D(src, (uv + offset[4]) * Frag).rgb, monochromeScale) * vCoef[4]; 48 | verticalColor += dot(texture2D(src, (uv + offset[5]) * Frag).rgb, monochromeScale) * vCoef[5]; 49 | verticalColor += dot(texture2D(src, (uv + offset[6]) * Frag).rgb, monochromeScale) * vCoef[6]; 50 | verticalColor += dot(texture2D(src, (uv + offset[7]) * Frag).rgb, monochromeScale) * vCoef[7]; 51 | verticalColor += dot(texture2D(src, (uv + offset[8]) * Frag).rgb, monochromeScale) * vCoef[8]; 52 | 53 | float mag = sqrt(horizonColor * horizonColor + verticalColor * verticalColor); 54 | float vx = verticalColor/mag; 55 | float vy = horizonColor/mag; 56 | 57 | gl_FragColor = vec4(vx, vy, mag, 1.0); 58 | } 59 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/TF-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/TFM-frag.glsl: -------------------------------------------------------------------------------- 1 | // by Jan Eric Kyprianidis 2 | precision mediump float; 3 | 4 | uniform sampler2D src; 5 | uniform float cvsHeight; 6 | uniform float cvsWidth; 7 | 8 | void main (void) { 9 | vec2 uv = gl_FragCoord.xy / vec2(cvsWidth, cvsHeight); 10 | vec3 g = texture2D(src, uv).xyz; 11 | 12 | float lambda1 = 0.5 * (g.y + g.x + sqrt(g.y*g.y - 2.0*g.x*g.y + g.x*g.x + 4.0*g.z*g.z)); 13 | float lambda2 = 0.5 * (g.y + g.x - sqrt(g.y*g.y - 2.0*g.x*g.y + g.x*g.x + 4.0*g.z*g.z)); 14 | 15 | vec2 v = vec2(lambda1 - g.x, -g.z); 16 | vec2 t; 17 | if (length(v) > 0.0) { 18 | t = normalize(v); 19 | } else { 20 | t = vec2(0.0, 1.0); 21 | } 22 | 23 | float phi = atan(t.y, t.x); 24 | 25 | float A = (lambda1 + lambda2 > 0.0)?(lambda1 - lambda2) / (lambda1 + lambda2) : 0.0; 26 | gl_FragColor = vec4(t, phi, A); 27 | } 28 | -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/TFM-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/XDoG-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D src; 4 | 5 | uniform bool b_XDoG; 6 | uniform float cvsHeight; 7 | uniform float cvsWidth; 8 | 9 | uniform float sigma; 10 | uniform float k; 11 | uniform float p; 12 | uniform float epsilon; 13 | uniform float phi; 14 | varying vec2 vTexCoord; 15 | 16 | float cosh(float val) 17 | { 18 | float tmp = exp(val); 19 | float cosH = (tmp + 1.0 / tmp) / 2.0; 20 | return cosH; 21 | } 22 | 23 | float tanh(float val) 24 | { 25 | float tmp = exp(val); 26 | float tanH = (tmp - 1.0 / tmp) / (tmp + 1.0 / tmp); 27 | return tanH; 28 | } 29 | 30 | float sinh(float val) 31 | { 32 | float tmp = exp(val); 33 | float sinH = (tmp - 1.0 / tmp) / 2.0; 34 | return sinH; 35 | } 36 | 37 | void main(void){ 38 | vec3 destColor = vec3(0.0); 39 | if(b_XDoG){ 40 | float tFrag = 1.0 / cvsHeight; 41 | float sFrag = 1.0 / cvsWidth; 42 | vec2 Frag = vec2(sFrag,tFrag); 43 | vec2 uv = vec2(gl_FragCoord.s, cvsHeight - gl_FragCoord.t); 44 | float twoSigmaESquared = 2.0 * sigma * sigma; 45 | float twoSigmaRSquared = twoSigmaESquared * k * k; 46 | int halfWidth = int(ceil( 1.0 * sigma * k )); 47 | 48 | const int MAX_NUM_ITERATION = 99999; 49 | vec2 sum = vec2(0.0); 50 | vec2 norm = vec2(0.0); 51 | 52 | for(int cnt=0;cnt (2*halfWidth+1)*(2*halfWidth+1)){break;} 54 | int i = int(cnt / (2*halfWidth+1)) - halfWidth; 55 | int j = cnt - halfWidth - int(cnt / (2*halfWidth+1)) * (2*halfWidth+1); 56 | 57 | float d = length(vec2(i,j)); 58 | vec2 kernel = vec2( exp( -d * d / twoSigmaESquared ), 59 | exp( -d * d / twoSigmaRSquared )); 60 | 61 | vec2 L = texture2D(src, (uv + vec2(i,j)) * Frag).xx; 62 | 63 | norm += kernel; 64 | sum += kernel * L; 65 | } 66 | 67 | sum /= norm; 68 | 69 | float H = 100.0 * ((1.0 + p) * sum.x - p * sum.y); 70 | float edge = ( H > epsilon )? 1.0 : 1.0 + tanh( phi * (H - epsilon)); 71 | destColor = vec3(edge); 72 | }else{ 73 | destColor = texture2D(src, vTexCoord).rgb; 74 | } 75 | 76 | gl_FragColor = vec4(destColor, 1.0); 77 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/XDoG-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/blurEffect-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | varying vec4 vColor; 5 | 6 | void main(void){ 7 | vec2 tFrag = vec2(1.0 / 512.0); 8 | vec4 destColor = texture2D(texture, gl_FragCoord.st * tFrag); 9 | destColor *= 0.36; 10 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, 1.0)) * tFrag) * 0.04; 11 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, 1.0)) * tFrag) * 0.04; 12 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, 1.0)) * tFrag) * 0.04; 13 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, 0.0)) * tFrag) * 0.04; 14 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, 0.0)) * tFrag) * 0.04; 15 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, -1.0)) * tFrag) * 0.04; 16 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, -1.0)) * tFrag) * 0.04; 17 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, -1.0)) * tFrag) * 0.04; 18 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, 2.0)) * tFrag) * 0.02; 19 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, 2.0)) * tFrag) * 0.02; 20 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, 2.0)) * tFrag) * 0.02; 21 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, 2.0)) * tFrag) * 0.02; 22 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, 2.0)) * tFrag) * 0.02; 23 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, 1.0)) * tFrag) * 0.02; 24 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, 1.0)) * tFrag) * 0.02; 25 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, 0.0)) * tFrag) * 0.02; 26 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, 0.0)) * tFrag) * 0.02; 27 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, -1.0)) * tFrag) * 0.02; 28 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, -1.0)) * tFrag) * 0.02; 29 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, -2.0)) * tFrag) * 0.02; 30 | destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, -2.0)) * tFrag) * 0.02; 31 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, -2.0)) * tFrag) * 0.02; 32 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, -2.0)) * tFrag) * 0.02; 33 | destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, -2.0)) * tFrag) * 0.02; 34 | 35 | gl_FragColor = vColor * destColor; 36 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/blurEffect-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec4 color; 3 | uniform mat4 mvpMatrix; 4 | varying vec4 vColor; 5 | 6 | void main(void){ 7 | vColor = color; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/bumpMapping-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | varying vec4 vColor; 5 | varying vec2 vTextureCoord; 6 | varying vec3 vEyeDirection; 7 | varying vec3 vLightDirection; 8 | 9 | void main(void){ 10 | vec3 mNormal = (texture2D(texture, vTextureCoord) * 2.0 - 1.0).rgb; 11 | vec3 light = normalize(vLightDirection); 12 | vec3 eye = normalize(vEyeDirection); 13 | vec3 halfLE = normalize(light + eye); 14 | float diffuse = clamp(dot(mNormal, light), 0.1, 1.0); 15 | float specular = pow(clamp(dot(mNormal, halfLE), 0.0, 1.0), 50.0); 16 | vec4 destColor = vColor * vec4(vec3(diffuse), 1.0) + vec4(vec3(specular), 1.0); 17 | gl_FragColor = destColor; 18 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/bumpMapping-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | attribute vec2 textureCoord; 5 | uniform mat4 mMatrix; 6 | uniform mat4 mvpMatrix; 7 | uniform mat4 invMatrix; 8 | uniform vec3 lightPosition; 9 | uniform vec3 eyePosition; 10 | varying vec4 vColor; 11 | varying vec2 vTextureCoord; 12 | varying vec3 vEyeDirection; 13 | varying vec3 vLightDirection; 14 | 15 | void main(void){ 16 | vec3 pos = (mMatrix * vec4(position, 0.0)).xyz; 17 | vec3 invEye = (invMatrix * vec4(eyePosition, 0.0)).xyz; 18 | vec3 invLight = (invMatrix * vec4(lightPosition, 0.0)).xyz; 19 | vec3 eye = invEye - pos; 20 | vec3 light = invLight - pos; 21 | vec3 n = normalize(normal); 22 | vec3 t = normalize(cross(normal, vec3(0.0, 1.0, 0.0))); 23 | vec3 b = cross(n, t); 24 | vEyeDirection.x = dot(t, eye); 25 | vEyeDirection.y = dot(b, eye); 26 | vEyeDirection.z = dot(n, eye); 27 | normalize(vEyeDirection); 28 | vLightDirection.x = dot(t, light); 29 | vLightDirection.y = dot(b, light); 30 | vLightDirection.z = dot(n, light); 31 | normalize(vLightDirection); 32 | vColor = color; 33 | vTextureCoord = textureCoord; 34 | gl_Position = mvpMatrix * vec4(position, 1.0); 35 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/cubeTexBumpMapping-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform vec3 eyePosition; 4 | uniform sampler2D normalMap; 5 | uniform samplerCube cubeTexture; 6 | uniform bool reflection; 7 | varying vec3 vPosition; 8 | varying vec2 vTextureCoord; 9 | varying vec3 vNormal; 10 | varying vec3 tTangent; 11 | 12 | varying vec4 vColor; 13 | 14 | //reflect = I - 2.0 * dot(N, I) * N. 15 | vec3 egt_reflect(vec3 p, vec3 n){ 16 | return p - 2.0* dot(n,p) * n; 17 | } 18 | 19 | void main(void){ 20 | vec3 tBinormal = cross(vNormal, tTangent); 21 | mat3 mView = mat3(tTangent, tBinormal, vNormal); 22 | vec3 mNormal = mView * (texture2D(normalMap, vTextureCoord) * 2.0 - 1.0).rgb; 23 | vec3 ref; 24 | if(reflection){ 25 | ref = reflect(vPosition - eyePosition, mNormal); 26 | //ref = egt_reflect(normalize(vPosition - eyePosition),normalize(vNormal)); 27 | }else{ 28 | ref = vNormal; 29 | } 30 | vec4 envColor = textureCube(cubeTexture, ref); 31 | vec4 destColor = vColor * envColor; 32 | gl_FragColor = destColor; 33 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/cubeTexBumpMapping-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | attribute vec2 textureCoord; 5 | 6 | uniform mat4 mMatrix; 7 | uniform mat4 mvpMatrix; 8 | varying vec3 vPosition; 9 | varying vec2 vTextureCoord; 10 | varying vec3 vNormal; 11 | varying vec4 vColor; 12 | varying vec3 tTangent; 13 | 14 | void main(void){ 15 | vPosition = (mMatrix * vec4(position, 1.0)).xyz; 16 | vNormal = (mMatrix * vec4(normal, 0.0)).xyz; 17 | vTextureCoord = textureCoord; 18 | vColor = color; 19 | tTangent = cross(vNormal, vec3(0.0, 1.0, 0.0)); 20 | gl_Position = mvpMatrix * vec4(position, 1.0); 21 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/cubeTexMapping-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform vec3 eyePosition; 4 | uniform samplerCube cubeTexture; 5 | uniform bool reflection; 6 | varying vec3 vPosition; 7 | varying vec3 vNormal; 8 | varying vec4 vColor; 9 | 10 | //reflect = I - 2.0 * dot(N, I) * N. 11 | vec3 egt_reflect(vec3 p, vec3 n){ 12 | return p - 2.0* dot(n,p) * n; 13 | } 14 | 15 | void main(void){ 16 | vec3 ref; 17 | if(reflection){ 18 | ref = reflect(vPosition - eyePosition, vNormal); 19 | //ref = egt_reflect(normalize(vPosition - eyePosition),normalize(vNormal)); 20 | }else{ 21 | ref = vNormal; 22 | } 23 | vec4 envColor = textureCube(cubeTexture, ref); 24 | vec4 destColor = vColor * envColor; 25 | gl_FragColor = destColor; 26 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/cubeTexMapping-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | uniform mat4 mMatrix; 5 | uniform mat4 mvpMatrix; 6 | varying vec3 vPosition; 7 | varying vec3 vNormal; 8 | varying vec4 vColor; 9 | 10 | void main(void){ 11 | vPosition = (mMatrix * vec4(position, 1.0)).xyz; 12 | vNormal = (mMatrix * vec4(normal, 0.0)).xyz; 13 | vColor = color; 14 | gl_Position = mvpMatrix * vec4(position, 1.0); 15 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/demo-frag.glsl: -------------------------------------------------------------------------------- 1 | void main(void){ 2 | gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 3 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/demo-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | uniform mat4 mvpMatrix; 3 | 4 | void main(void){ 5 | gl_Position = mvpMatrix * vec4(position, 1.0); 6 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/demo1-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | varying vec4 vColor; 3 | 4 | void main(void){ 5 | gl_FragColor = vColor; 6 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/demo1-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec4 color; 3 | uniform mat4 mvpMatrix; 4 | varying vec4 vColor; 5 | 6 | void main(void){ 7 | vColor = color; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/dir_ambient-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec4 vColor; 4 | 5 | void main(void){ 6 | gl_FragColor = vColor; 7 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/dir_ambient-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec4 color; 3 | attribute vec3 normal; 4 | 5 | uniform mat4 mvpMatrix; 6 | uniform mat4 invMatrix; 7 | uniform vec3 lightDirection; 8 | uniform vec4 ambientColor; 9 | varying vec4 vColor; 10 | 11 | void main(void){ 12 | vec3 invLight = normalize(invMatrix*vec4(lightDirection,0)).xyz; 13 | float diffuse = clamp(dot(invLight,normal),0.1,1.0); 14 | vColor = color*vec4(vec3(diffuse),1.0) +ambientColor; 15 | gl_Position = mvpMatrix * vec4(position, 1.0); 16 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/directionLighting-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec4 vColor; 4 | 5 | void main(void){ 6 | gl_FragColor = vColor; 7 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/directionLighting-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec4 color; 3 | attribute vec3 normal; 4 | 5 | uniform mat4 mvpMatrix; 6 | uniform mat4 invMatrix; 7 | uniform vec3 lightDirection; 8 | varying vec4 vColor; 9 | 10 | void main(void){ 11 | vec3 invLight = normalize(invMatrix*vec4(lightDirection,0)).xyz; 12 | float diffuse = clamp(dot(invLight,normal),0.1,1.0); 13 | vColor = color*vec4(vec3(diffuse),1.0); 14 | gl_Position = mvpMatrix * vec4(position, 1.0); 15 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/filterScene-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec4 vColor; 4 | 5 | void main(void){ 6 | gl_FragColor = vColor; 7 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/filterScene-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | uniform mat4 mvpMatrix; 5 | uniform mat4 invMatrix; 6 | uniform vec3 lightDirection; 7 | uniform vec3 eyeDirection; 8 | uniform vec4 ambientColor; 9 | varying vec4 vColor; 10 | 11 | void main(void){ 12 | vec3 invLight = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz; 13 | vec3 invEye = normalize(invMatrix * vec4(eyeDirection, 0.0)).xyz; 14 | vec3 halfLE = normalize(invLight + invEye); 15 | float diffuse = clamp(dot(normal, invLight), 0.0, 1.0); 16 | float specular = pow(clamp(dot(normal, halfLE), 0.0, 1.0), 50.0); 17 | vec4 amb = color * ambientColor; 18 | vColor = amb * vec4(vec3(diffuse), 1.0) + vec4(vec3(specular), 1.0); 19 | gl_Position = mvpMatrix * vec4(position, 1.0); 20 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/frameBuffer-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | varying vec4 vColor; 5 | varying vec2 vTextureCoord; 6 | 7 | void main(void){ 8 | vec4 smpColor = texture2D(texture, vTextureCoord); 9 | gl_FragColor = vColor * smpColor; 10 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/frameBuffer-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | attribute vec2 textureCoord; 5 | uniform mat4 mMatrix; 6 | uniform mat4 mvpMatrix; 7 | uniform mat4 invMatrix; 8 | uniform vec3 lightDirection; 9 | uniform bool useLight; 10 | varying vec4 vColor; 11 | varying vec2 vTextureCoord; 12 | 13 | void main(void){ 14 | if(useLight){ 15 | vec3 invLight = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz; 16 | float diffuse = clamp(dot(normal, invLight), 0.2, 1.0); 17 | vColor = vec4(color.xyz * vec3(diffuse), 1.0); 18 | }else{ 19 | vColor = color; 20 | } 21 | vTextureCoord = textureCoord; 22 | gl_Position = mvpMatrix * vec4(position, 1.0); 23 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/gaussianFilter-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | uniform bool b_gaussian; 5 | uniform float cvsHeight; 6 | uniform float cvsWidth; 7 | uniform float weight[10]; 8 | uniform bool horizontal; 9 | varying vec2 vTexCoord; 10 | 11 | void main(void){ 12 | vec3 destColor = vec3(0.0); 13 | if(b_gaussian){ 14 | float tFrag = 1.0 / cvsHeight; 15 | float sFrag = 1.0 / cvsWidth; 16 | vec2 Frag = vec2(sFrag,tFrag); 17 | vec2 fc; 18 | if(horizontal){ 19 | fc = vec2(gl_FragCoord.s, cvsHeight - gl_FragCoord.t); 20 | destColor += texture2D(texture, (fc + vec2(-9.0, 0.0)) * Frag).rgb * weight[9]; 21 | destColor += texture2D(texture, (fc + vec2(-8.0, 0.0)) * Frag).rgb * weight[8]; 22 | destColor += texture2D(texture, (fc + vec2(-7.0, 0.0)) * Frag).rgb * weight[7]; 23 | destColor += texture2D(texture, (fc + vec2(-6.0, 0.0)) * Frag).rgb * weight[6]; 24 | destColor += texture2D(texture, (fc + vec2(-5.0, 0.0)) * Frag).rgb * weight[5]; 25 | destColor += texture2D(texture, (fc + vec2(-4.0, 0.0)) * Frag).rgb * weight[4]; 26 | destColor += texture2D(texture, (fc + vec2(-3.0, 0.0)) * Frag).rgb * weight[3]; 27 | destColor += texture2D(texture, (fc + vec2(-2.0, 0.0)) * Frag).rgb * weight[2]; 28 | destColor += texture2D(texture, (fc + vec2(-1.0, 0.0)) * Frag).rgb * weight[1]; 29 | destColor += texture2D(texture, (fc + vec2( 0.0, 0.0)) * Frag).rgb * weight[0]; 30 | destColor += texture2D(texture, (fc + vec2( 1.0, 0.0)) * Frag).rgb * weight[1]; 31 | destColor += texture2D(texture, (fc + vec2( 2.0, 0.0)) * Frag).rgb * weight[2]; 32 | destColor += texture2D(texture, (fc + vec2( 3.0, 0.0)) * Frag).rgb * weight[3]; 33 | destColor += texture2D(texture, (fc + vec2( 4.0, 0.0)) * Frag).rgb * weight[4]; 34 | destColor += texture2D(texture, (fc + vec2( 5.0, 0.0)) * Frag).rgb * weight[5]; 35 | destColor += texture2D(texture, (fc + vec2( 6.0, 0.0)) * Frag).rgb * weight[6]; 36 | destColor += texture2D(texture, (fc + vec2( 7.0, 0.0)) * Frag).rgb * weight[7]; 37 | destColor += texture2D(texture, (fc + vec2( 8.0, 0.0)) * Frag).rgb * weight[8]; 38 | destColor += texture2D(texture, (fc + vec2( 9.0, 0.0)) * Frag).rgb * weight[9]; 39 | }else{ 40 | fc = gl_FragCoord.st; 41 | destColor += texture2D(texture, (fc + vec2(0.0, -9.0)) * Frag).rgb * weight[9]; 42 | destColor += texture2D(texture, (fc + vec2(0.0, -8.0)) * Frag).rgb * weight[8]; 43 | destColor += texture2D(texture, (fc + vec2(0.0, -7.0)) * Frag).rgb * weight[7]; 44 | destColor += texture2D(texture, (fc + vec2(0.0, -6.0)) * Frag).rgb * weight[6]; 45 | destColor += texture2D(texture, (fc + vec2(0.0, -5.0)) * Frag).rgb * weight[5]; 46 | destColor += texture2D(texture, (fc + vec2(0.0, -4.0)) * Frag).rgb * weight[4]; 47 | destColor += texture2D(texture, (fc + vec2(0.0, -3.0)) * Frag).rgb * weight[3]; 48 | destColor += texture2D(texture, (fc + vec2(0.0, -2.0)) * Frag).rgb * weight[2]; 49 | destColor += texture2D(texture, (fc + vec2(0.0, -1.0)) * Frag).rgb * weight[1]; 50 | destColor += texture2D(texture, (fc + vec2(0.0, 0.0)) * Frag).rgb * weight[0]; 51 | destColor += texture2D(texture, (fc + vec2(0.0, 1.0)) * Frag).rgb * weight[1]; 52 | destColor += texture2D(texture, (fc + vec2(0.0, 2.0)) * Frag).rgb * weight[2]; 53 | destColor += texture2D(texture, (fc + vec2(0.0, 3.0)) * Frag).rgb * weight[3]; 54 | destColor += texture2D(texture, (fc + vec2(0.0, 4.0)) * Frag).rgb * weight[4]; 55 | destColor += texture2D(texture, (fc + vec2(0.0, 5.0)) * Frag).rgb * weight[5]; 56 | destColor += texture2D(texture, (fc + vec2(0.0, 6.0)) * Frag).rgb * weight[6]; 57 | destColor += texture2D(texture, (fc + vec2(0.0, 7.0)) * Frag).rgb * weight[7]; 58 | destColor += texture2D(texture, (fc + vec2(0.0, 8.0)) * Frag).rgb * weight[8]; 59 | destColor += texture2D(texture, (fc + vec2(0.0, 9.0)) * Frag).rgb * weight[9]; 60 | } 61 | }else{ 62 | destColor = texture2D(texture, vTexCoord).rgb; 63 | } 64 | gl_FragColor = vec4(destColor, 1.0); 65 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/gaussianFilter-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/gkuwaharaFilter-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/grayScaleFilter-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | uniform bool grayScale; 5 | varying vec2 vTexCoord; 6 | 7 | const float redScale = 0.298912; 8 | const float greenScale = 0.586611; 9 | const float blueScale = 0.114478; 10 | const vec3 monochromeScale = vec3(redScale, greenScale, blueScale); 11 | 12 | void main(void){ 13 | vec4 smpColor = texture2D(texture, vTexCoord); 14 | if(grayScale){ 15 | float grayColor = dot(smpColor.rgb, monochromeScale); 16 | smpColor = vec4(vec3(grayColor), 1.0); 17 | } 18 | gl_FragColor = smpColor; 19 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/grayScaleFilter-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/kuwaharaFilter-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/laplacianFilter-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | 5 | uniform bool b_laplacian; 6 | uniform float cvsHeight; 7 | uniform float cvsWidth; 8 | uniform float coef[9]; 9 | varying vec2 vTexCoord; 10 | 11 | const float redScale = 0.298912; 12 | const float greenScale = 0.586611; 13 | const float blueScale = 0.114478; 14 | const vec3 monochromeScale = vec3(redScale, greenScale, blueScale); 15 | 16 | void main(void){ 17 | vec3 destColor = vec3(0.0); 18 | if(b_laplacian){ 19 | vec2 offset[9]; 20 | offset[0] = vec2(-1.0, -1.0); 21 | offset[1] = vec2( 0.0, -1.0); 22 | offset[2] = vec2( 1.0, -1.0); 23 | offset[3] = vec2(-1.0, 0.0); 24 | offset[4] = vec2( 0.0, 0.0); 25 | offset[5] = vec2( 1.0, 0.0); 26 | offset[6] = vec2(-1.0, 1.0); 27 | offset[7] = vec2( 0.0, 1.0); 28 | offset[8] = vec2( 1.0, 1.0); 29 | float tFrag = 1.0 / cvsHeight; 30 | float sFrag = 1.0 / cvsWidth; 31 | vec2 Frag = vec2(sFrag,tFrag); 32 | vec2 fc = vec2(gl_FragCoord.s, cvsHeight - gl_FragCoord.t); 33 | 34 | destColor += texture2D(texture, (fc + offset[0]) * Frag).rgb * coef[0]; 35 | destColor += texture2D(texture, (fc + offset[1]) * Frag).rgb * coef[1]; 36 | destColor += texture2D(texture, (fc + offset[2]) * Frag).rgb * coef[2]; 37 | destColor += texture2D(texture, (fc + offset[3]) * Frag).rgb * coef[3]; 38 | destColor += texture2D(texture, (fc + offset[4]) * Frag).rgb * coef[4]; 39 | destColor += texture2D(texture, (fc + offset[5]) * Frag).rgb * coef[5]; 40 | destColor += texture2D(texture, (fc + offset[6]) * Frag).rgb * coef[6]; 41 | destColor += texture2D(texture, (fc + offset[7]) * Frag).rgb * coef[7]; 42 | destColor += texture2D(texture, (fc + offset[8]) * Frag).rgb * coef[8]; 43 | 44 | destColor =max(destColor, 0.0); 45 | }else{ 46 | destColor = texture2D(texture, vTexCoord).rgb; 47 | } 48 | 49 | gl_FragColor = vec4(destColor, 1.0); 50 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/laplacianFilter-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/luminance-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | uniform float threshold; 5 | varying vec2 vTexCoord; 6 | 7 | const float redScale = 0.298912; 8 | const float greenScale = 0.586611; 9 | const float blueScale = 0.114478; 10 | const vec3 monochromeScale = vec3(redScale, greenScale, blueScale); 11 | 12 | void main(void){ 13 | 14 | vec4 smpColor = texture2D(texture, vec2(vTexCoord.s, 1.0 - vTexCoord.t)); 15 | float luminance = dot(smpColor.rgb, monochromeScale); 16 | if(luminance 0.0){ 29 | if(depthBuffer){ 30 | vec4 lightCoord = vDepth / vDepth.w; 31 | if(lightCoord.z - 0.0001 > shadow){ 32 | depthColor = vec4(0.5, 0.5, 0.5, 1.0); 33 | } 34 | }else{ 35 | float near = 0.1; 36 | float far = 150.0; 37 | float linerDepth = 1.0 / (far - near); 38 | linerDepth *= length(vPosition.xyz - lightPosition); 39 | if(linerDepth - 0.0001 > shadow){ 40 | depthColor = vec4(0.5, 0.5, 0.5, 1.0); 41 | } 42 | } 43 | } 44 | gl_FragColor = vColor * (vec3(diffuse),1.0) * depthColor; 45 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/shadowScreen-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | uniform mat4 mMatrix; 5 | uniform mat4 mvpMatrix; 6 | uniform mat4 tMatrix; 7 | uniform mat4 lgtMatrix; 8 | varying vec3 vPosition; 9 | varying vec3 vNormal; 10 | varying vec4 vColor; 11 | varying vec4 vTexCoord; 12 | varying vec4 vDepth; 13 | 14 | void main(void){ 15 | vPosition = (mMatrix * vec4(position, 1.0)).xyz; 16 | vNormal = normal; 17 | vColor = color; 18 | vTexCoord = tMatrix * vec4(vPosition, 1.0); 19 | vDepth = lgtMatrix * vec4(position, 1.0); 20 | gl_Position = mvpMatrix * vec4(position, 1.0); 21 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/sobelFilter-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | 5 | uniform bool b_sobel; 6 | uniform float cvsHeight; 7 | uniform float cvsWidth; 8 | uniform float hCoef[9]; 9 | uniform float vCoef[9]; 10 | varying vec2 vTexCoord; 11 | 12 | void main(void){ 13 | vec3 destColor = vec3(0.0); 14 | if(b_sobel){ 15 | vec2 offset[9]; 16 | offset[0] = vec2(-1.0, -1.0); 17 | offset[1] = vec2( 0.0, -1.0); 18 | offset[2] = vec2( 1.0, -1.0); 19 | offset[3] = vec2(-1.0, 0.0); 20 | offset[4] = vec2( 0.0, 0.0); 21 | offset[5] = vec2( 1.0, 0.0); 22 | offset[6] = vec2(-1.0, 1.0); 23 | offset[7] = vec2( 0.0, 1.0); 24 | offset[8] = vec2( 1.0, 1.0); 25 | float tFrag = 1.0 / cvsHeight; 26 | float sFrag = 1.0 / cvsWidth; 27 | vec2 Frag = vec2(sFrag,tFrag); 28 | vec2 fc = vec2(gl_FragCoord.s, cvsHeight - gl_FragCoord.t); 29 | vec3 horizonColor = vec3(0.0); 30 | vec3 verticalColor = vec3(0.0); 31 | 32 | horizonColor += texture2D(texture, (fc + offset[0]) * Frag).rgb * hCoef[0]; 33 | horizonColor += texture2D(texture, (fc + offset[1]) * Frag).rgb * hCoef[1]; 34 | horizonColor += texture2D(texture, (fc + offset[2]) * Frag).rgb * hCoef[2]; 35 | horizonColor += texture2D(texture, (fc + offset[3]) * Frag).rgb * hCoef[3]; 36 | horizonColor += texture2D(texture, (fc + offset[4]) * Frag).rgb * hCoef[4]; 37 | horizonColor += texture2D(texture, (fc + offset[5]) * Frag).rgb * hCoef[5]; 38 | horizonColor += texture2D(texture, (fc + offset[6]) * Frag).rgb * hCoef[6]; 39 | horizonColor += texture2D(texture, (fc + offset[7]) * Frag).rgb * hCoef[7]; 40 | horizonColor += texture2D(texture, (fc + offset[8]) * Frag).rgb * hCoef[8]; 41 | 42 | verticalColor += texture2D(texture, (fc + offset[0]) * Frag).rgb * vCoef[0]; 43 | verticalColor += texture2D(texture, (fc + offset[1]) * Frag).rgb * vCoef[1]; 44 | verticalColor += texture2D(texture, (fc + offset[2]) * Frag).rgb * vCoef[2]; 45 | verticalColor += texture2D(texture, (fc + offset[3]) * Frag).rgb * vCoef[3]; 46 | verticalColor += texture2D(texture, (fc + offset[4]) * Frag).rgb * vCoef[4]; 47 | verticalColor += texture2D(texture, (fc + offset[5]) * Frag).rgb * vCoef[5]; 48 | verticalColor += texture2D(texture, (fc + offset[6]) * Frag).rgb * vCoef[6]; 49 | verticalColor += texture2D(texture, (fc + offset[7]) * Frag).rgb * vCoef[7]; 50 | verticalColor += texture2D(texture, (fc + offset[8]) * Frag).rgb * vCoef[8]; 51 | destColor = vec3(sqrt(horizonColor * horizonColor + verticalColor * verticalColor)); 52 | }else{ 53 | destColor = texture2D(texture, vTexCoord).rgb; 54 | } 55 | 56 | gl_FragColor = vec4(destColor, 1.0); 57 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/sobelFilter-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/specCpt-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec4 vColor; 4 | 5 | void main(void){ 6 | gl_FragColor = vColor; 7 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/specCpt-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | uniform mat4 mvpMatrix; 5 | uniform mat4 invMatrix; 6 | uniform vec3 lightDirection; 7 | uniform vec3 eyeDirection; 8 | varying vec4 vColor; 9 | 10 | void main(void){ 11 | vec3 invLight = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz; 12 | vec3 invEye = normalize(invMatrix * vec4(eyeDirection, 0.0)).xyz; 13 | vec3 halfLE = normalize(invLight + invEye); 14 | float specular = pow(clamp(dot(normal, halfLE), 0.0, 1.0), 50.0); 15 | vColor = color * vec4(vec3(specular), 1.0); 16 | gl_Position = mvpMatrix * vec4(position, 1.0); 17 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/specular-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec4 vColor; 4 | 5 | void main(void){ 6 | gl_FragColor = vColor; 7 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/specular-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec4 color; 3 | attribute vec3 normal; 4 | 5 | uniform mat4 mvpMatrix; 6 | uniform mat4 invMatrix; 7 | 8 | uniform vec3 lightDirection; 9 | uniform vec3 eyeDirection; 10 | uniform vec4 ambientColor; 11 | varying vec4 vColor; 12 | 13 | void main(void){ 14 | vec3 invLight = normalize(invMatrix*vec4(lightDirection,0.0)).xyz; 15 | vec3 invEye = normalize(invMatrix* vec4(eyeDirection,0.0)).xyz; 16 | vec3 halfLE = normalize(invLight+invEye); 17 | 18 | float diffuse = clamp(dot(invLight,normal),0.0,1.0); 19 | float specular = pow(clamp(dot(normal,halfLE),0.0,1.0),50.0); 20 | vec4 light = color*vec4(vec3(diffuse),1.0)+vec4(vec3(specular),1.0); 21 | vColor = light + ambientColor; 22 | gl_Position = mvpMatrix * vec4(position, 1.0); 23 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/stencilBufferOutline-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | uniform bool useTexture; 5 | varying vec4 vColor; 6 | varying vec2 vTextureCoord; 7 | 8 | void main(void){ 9 | vec4 smpColor = vec4(1.0); 10 | if(useTexture){ 11 | smpColor = texture2D(texture, vTextureCoord); 12 | } 13 | gl_FragColor = vColor * smpColor; 14 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/stencilBufferOutline-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | attribute vec2 textureCoord; 5 | uniform mat4 mvpMatrix; 6 | uniform mat4 invMatrix; 7 | uniform vec3 lightDirection; 8 | uniform bool useLight; 9 | uniform bool outline; 10 | varying vec4 vColor; 11 | varying vec2 vTextureCoord; 12 | 13 | void main(void){ 14 | if(useLight){ 15 | vec3 invLight = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz; 16 | float diffuse = clamp(dot(normal, invLight), 0.1, 1.0); 17 | vColor = color * vec4(vec3(diffuse), 1.0); 18 | }else{ 19 | vColor = color; 20 | } 21 | vTextureCoord = textureCoord; 22 | vec3 oPosition = position; 23 | if(outline){ 24 | oPosition += normal * 0.1; 25 | } 26 | gl_Position = mvpMatrix * vec4(oPosition, 1.0); 27 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/synth-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture1; 4 | uniform sampler2D texture2; 5 | uniform bool glare; 6 | varying vec2 vTexCoord; 7 | 8 | void main(void){ 9 | vec4 destColor = texture2D(texture1, vTexCoord); 10 | vec4 smpColor = texture2D(texture2, vec2(vTexCoord.s, 1.0 - vTexCoord.t)); 11 | if(glare){ 12 | destColor += smpColor * 0.4; 13 | } 14 | gl_FragColor = destColor; 15 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/synth-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec2 texCoord; 3 | uniform mat4 mvpMatrix; 4 | varying vec2 vTexCoord; 5 | 6 | void main(void){ 7 | vTexCoord = texCoord; 8 | gl_Position = mvpMatrix * vec4(position, 1.0); 9 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/texture-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D texture; 4 | varying vec4 vColor; 5 | varying vec2 vTextureCoord; 6 | 7 | void main(void){ 8 | vec4 smpColor = texture2D(texture, vTextureCoord); 9 | gl_FragColor = vColor * smpColor; 10 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/texture-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec4 color; 3 | attribute vec2 textureCoord; 4 | uniform mat4 mvpMatrix; 5 | varying vec4 vColor; 6 | varying vec2 vTextureCoord; 7 | 8 | void main(void){ 9 | vColor = color; 10 | vTextureCoord = textureCoord; 11 | gl_Position = mvpMatrix * vec4(position, 1.0); 12 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/toonShading-frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform mat4 invMatrix; 4 | uniform vec3 lightDirection; 5 | uniform sampler2D texture; 6 | uniform vec4 edgeColor; 7 | varying vec3 vNormal; 8 | varying vec4 vColor; 9 | 10 | void main(void){ 11 | if(edgeColor.a > 0.0){ 12 | gl_FragColor = edgeColor; 13 | }else{ 14 | vec3 invLight = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz; 15 | float diffuse = clamp(dot(vNormal, invLight), 0.1, 1.0); 16 | vec4 smpColor = texture2D(texture, vec2(diffuse, 0.0)); 17 | gl_FragColor = vColor * smpColor; 18 | } 19 | } -------------------------------------------------------------------------------- /lib_webgl/ts_scripts/shaders/toonShading-vert.glsl: -------------------------------------------------------------------------------- 1 | attribute vec3 position; 2 | attribute vec3 normal; 3 | attribute vec4 color; 4 | uniform mat4 mvpMatrix; 5 | uniform bool edge; 6 | varying vec3 vNormal; 7 | varying vec4 vColor; 8 | 9 | void main(void){ 10 | vec3 pos = position; 11 | if(edge){ 12 | pos += normal * 0.05; 13 | } 14 | vNormal = normal; 15 | vColor = color; 16 | gl_Position = mvpMatrix * vec4(pos, 1.0); 17 | } -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/config/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "buttonList": [{ 3 | "name": "f_LaplacianFilter", 4 | "pipline": "CONVOLUTION_FILTER", 5 | "filter": "LAPLACIAN", 6 | "shader": "laplacianFilter" 7 | }, 8 | { 9 | "name": "f_SobelFilter", 10 | "pipline": "CONVOLUTION_FILTER", 11 | "filter": "SOBEL", 12 | "shader": "sobelFilter" 13 | }, 14 | { 15 | "name": "f_BloomEffect", 16 | "pipline": "BLOOM_EFFECT", 17 | "filter": "GAUSSIAN", 18 | "shader": "gaussianFilter" 19 | }, 20 | { 21 | "name": "f_GaussianFilter", 22 | "pipline": "CONVOLUTION_TWICE", 23 | "filter": "GAUSSIAN", 24 | "shader": "gaussianFilter" 25 | }, 26 | { 27 | "name": "f_KuwaharaFilter", 28 | "pipline": "CONVOLUTION_FILTER", 29 | "filter": "KUWAHARA", 30 | "shader": "kuwaharaFilter" 31 | }, 32 | { 33 | "name": "f_GeneralizedKuwaharaFilter", 34 | "pipline": "CONVOLUTION_FILTER", 35 | "filter": "GKUWAHARA", 36 | "shader": "gkuwaharaFilter" 37 | }, 38 | { 39 | "name": "f_AnisotropicKuwahara", 40 | "pipline": "ANISTROPIC", 41 | "filter": "AKUWAHARA", 42 | "shader": "AKF" 43 | }, 44 | { 45 | "name": "f_VisualAnisotropic", 46 | "pipline": "ANISTROPIC", 47 | "filter": "ANISTROPIC", 48 | "shader": "Anisotropic" 49 | }, 50 | { 51 | "name": "f_LIC", 52 | "pipline": "ANISTROPIC", 53 | "filter": "LIC", 54 | "shader": "LIC" 55 | }, 56 | { 57 | "name": "f_NoiseLIC", 58 | "pipline": "ANISTROPIC", 59 | "filter": "NOISELIC", 60 | "shader": "LIC" 61 | }, 62 | { 63 | "name": "f_DoG", 64 | "pipline": "CONVOLUTION_FILTER", 65 | "filter": "DoG", 66 | "shader": "DoG" 67 | }, 68 | { 69 | "name": "f_FDoG", 70 | "pipline": "ANISTROPIC", 71 | "filter": "FDoG", 72 | "shader": "FDoG" 73 | }, 74 | { 75 | "name": "f_XDoG", 76 | "pipline": "CONVOLUTION_FILTER", 77 | "filter": "XDoG", 78 | "shader": "XDoG" 79 | }, 80 | { 81 | "name": "f_FXDoG", 82 | "pipline": "ANISTROPIC", 83 | "filter": "FXDoG", 84 | "shader": "FXDoG" 85 | }, 86 | { 87 | "name": "f_Abstraction", 88 | "pipline": "ABSTRACTION", 89 | "filter": "ABSTRACTION", 90 | "shader": "Abstraction" 91 | } 92 | ] 93 | } -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/config/ui.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Filter Viewer", 3 | "useTexture": true, 4 | "f_BloomEffect": false, 5 | "f_VisualAnisotropic": false, 6 | "f_LIC": false, 7 | "f_NoiseLIC": false, 8 | "f_LaplacianFilter": false, 9 | "f_GaussianFilter": false, 10 | "f_SobelFilter": false, 11 | "f_DoG": false, 12 | "f_XDoG": false, 13 | "f_FDoG": false, 14 | "f_FXDoG": false, 15 | "f_KuwaharaFilter": false, 16 | "f_GeneralizedKuwaharaFilter": false, 17 | "f_AnisotropicKuwahara": false, 18 | "f_Abstraction": false 19 | } -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/config/user_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "default_pipline": "CONVOLUTION_FILTER", 3 | "default_filter": "SOBEL", 4 | "default_shader": "sobelFilter", 5 | "default_btn": "f_SobelFilter", 6 | "user_selected": "./image/lion.png", 7 | "user_params": { 8 | "laplacianCoef": [1.0, 1.0, 1.0, 9 | 1.0, -8.0, 1.0, 10 | 1.0, 1.0, 1.0 11 | ], 12 | "sobelHorCoef": [1.0, 0.0, -1.0, 13 | 2.0, 0.0, -2.0, 14 | 1.0, 0.0, -1.0 15 | ], 16 | 17 | "sobelVerCoef": [1.0, 2.0, 1.0, 18 | 0.0, 0.0, 0.0, -1.0, -2.0, -1.0 19 | ], 20 | "gaussianWeight": [0.18543236601139526, 0.15801503896991967, 0.1147424683911689, 0.0710007337752964, 0.03743814902121118, 0.016822044718167, 0.006441041250141352, 0.0021015816162546458, 0.000584318079265502, 0.00013844117287781785], 21 | 22 | "gkweight": [0.8322, 0.8758, 0.903, 0.9123, 0.903, 0.8758, 0.8322, 0.8758, 0.9216, 0.9503, 0.96, 0.9503, 0.9216, 0.8758, 0.903, 0.9503, 0.9798, 0.9898, 0.9798, 0.9503, 0.903, 0.9123, 0.96, 0.9898, 1.0, 0.9898, 0.96, 0.9123, 0.903, 0.9503, 0.9798, 0.9898, 0.9798, 0.9503, 0.903, 0.8758, 0.9216, 0.9503, 0.96, 0.9503, 0.9216, 0.8758, 0.8322, 0.8758, 0.903, 0.9123, 0.903, 0.8758, 0.8322] 23 | } 24 | 25 | } -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/css/image-picker.css: -------------------------------------------------------------------------------- 1 | ul.thumbnails.image_picker_selector { 2 | overflow: auto; 3 | list-style-image: none; 4 | list-style-position: outside; 5 | list-style-type: none; 6 | padding: 0px; 7 | margin: 0px; } 8 | ul.thumbnails.image_picker_selector ul { 9 | overflow: auto; 10 | list-style-image: none; 11 | list-style-position: outside; 12 | list-style-type: none; 13 | padding: 0px; 14 | margin: 0px; } 15 | ul.thumbnails.image_picker_selector li.group {width:100%;} 16 | ul.thumbnails.image_picker_selector li.group_title { 17 | float: none; } 18 | ul.thumbnails.image_picker_selector li { 19 | margin: 0px 12px 12px 0px; 20 | float: left; } 21 | ul.thumbnails.image_picker_selector li .thumbnail { 22 | padding: 6px; 23 | border: 1px solid #dddddd; 24 | -webkit-user-select: none; 25 | -moz-user-select: none; 26 | -ms-user-select: none; } 27 | ul.thumbnails.image_picker_selector li .thumbnail img { 28 | -webkit-user-drag: none; } 29 | ul.thumbnails.image_picker_selector li .thumbnail.selected { 30 | background: #0088cc; } 31 | -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | position: relative; 3 | min-height: 100%; 4 | } 5 | 6 | body { 7 | margin-bottom: 60px; 8 | /* Margin bottom by footer height */ 9 | background-image: url("../image/back.png") 10 | } 11 | 12 | #canvas_viewer { 13 | box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.8), 0 15px 30px 0 rgba(0, 0, 0, 0.7); 14 | text-align: center; 15 | } 16 | 17 | .container { 18 | width: auto; 19 | padding: 0 15px; 20 | position: relative; 21 | top: 30%; 22 | max-width: 512px; 23 | } 24 | 25 | #select_gallery { 26 | position: fixed; 27 | top: 15%; 28 | } 29 | 30 | .image_picker_selector img { 31 | height: 75px; 32 | width: 75px; 33 | } 34 | 35 | .image_picker_selector li { 36 | box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4); 37 | } -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/AKF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/AKF.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/FXDoG&AKF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/FXDoG&AKF.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/FXDoG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/FXDoG.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/LIC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/LIC.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/anim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/anim.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/back.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/cat.jpg -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/encognita.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/encognita.ico -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/k0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/k0.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/lion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/lion.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/noise.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/visual_rgb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/visual_rgb.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/image/woman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/image/woman.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | FilterViewer 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/scripts/extlib/stats.min.js: -------------------------------------------------------------------------------- 1 | // stats.js - http://github.com/mrdoob/stats.js 2 | (function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;dg+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/ 4 | 1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v); 5 | b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f}); 6 | -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/start-server.bat: -------------------------------------------------------------------------------- 1 | http-server -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/AnisotropicVisual.py: -------------------------------------------------------------------------------- 1 | # -*- coding: utf-8 -*- 2 | """ 3 | Created on Sun Oct 7 18:39:00 2018 4 | 5 | @author: raymondmg 6 | """ 7 | import numpy as np 8 | import SST 9 | import cv2 as cv 10 | 11 | class AnisotropicKuwahara: 12 | def __init__(self,image,sst,kernel_size=7,div_num=8,q=8.0,alpha=1.0): 13 | self.sst = sst 14 | self.kernel_size = kernel_size 15 | self.image = image 16 | self.div_num = div_num 17 | self.angle = 2 * np.pi/div_num 18 | self.q = q 19 | self.alpha = alpha 20 | self.height = image.shape[0] 21 | self.width = image.shape[1] 22 | self.channel = image.shape[2] 23 | self.param_anisotropy() 24 | 25 | def param_anisotropy(self): 26 | visual_image = cv.imread("./img/visual_rgb.png") 27 | anisotropic_image = np.zeros((self.height,self.width,self.channel)) 28 | A = np.zeros((self.height,self.width)) 29 | PHI = np.zeros((self.height,self.width)) 30 | for j in range(self.height): 31 | for i in range(self.width): 32 | E = self.sst[j,i,0] 33 | G = self.sst[j,i,1] 34 | F = self.sst[j,i,2] 35 | D = np.sqrt((E-G)*(E-G)+4.0*F*F) 36 | 37 | lambda1 = (E + G + D)/2.0 38 | lambda2 = (E + G - D)/2.0 39 | 40 | if (lambda1 + lambda2) <=0: 41 | A[j,i] = 0 42 | else: 43 | A[j,i] = (lambda1 - lambda2)/(lambda1 + lambda2) 44 | 45 | #visualization Anisotropic 46 | anisotropic_image[j,i,0] = visual_image[0,int(255*A[j,i]),0] 47 | anisotropic_image[j,i,1] = visual_image[0,int(255*A[j,i]),1] 48 | anisotropic_image[j,i,2] = visual_image[0,int(255*A[j,i]),2] 49 | 50 | PHI[j,i] = np.arctan2(-F, lambda1 - E) 51 | 52 | self.A = A 53 | self.PHI = PHI 54 | cv.imwrite("./img/anisotropic_image.png",anisotropic_image) 55 | return anisotropic_image 56 | 57 | img = cv.imread('./img/anim.png') 58 | sst_func = SST.SST(img,SST.SST_TYPE.CLASSIC) 59 | sst_image = sst_func.cal(5) 60 | 61 | aniso_kuwahara_func = AnisotropicKuwahara(img,sst_image) 62 | anisotropic_image = aniso_kuwahara_func.param_anisotropy() 63 | 64 | 65 | -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/GKuwahara_shader.py: -------------------------------------------------------------------------------- 1 | # -*- coding: utf-8 -*- 2 | """ 3 | Created on Sat Sep 29 18:06:00 2018 4 | 5 | @author: raymondmg 6 | """ 7 | import numpy as np 8 | def divide_kernel(kernel_size,div): 9 | rad = kernel_size //2 10 | angle = 2 * np.pi / div 11 | 12 | out = [] 13 | for i in range(div): 14 | out.append([]) 15 | 16 | for h in range(-rad,rad+1): 17 | for w in range(-rad,rad+1): 18 | theta = np.arctan2(h,w) 19 | index = int(np.floor(theta/angle) % div) 20 | out[index].append((h,w)) 21 | return out 22 | 23 | def gaussian_kernel(kernel): 24 | out_kernel = np.zeros((kernel,kernel)) 25 | for i in range(kernel): 26 | for j in range(kernel): 27 | out_kernel[i,j] = np.exp(-((i-kernel//2)**2+(j-kernel//2)**2) / (2 * (kernel)**2)) 28 | return out_kernel 29 | 30 | g = gaussian_kernel(7) 31 | 32 | s="["; 33 | for i in range(len(g)): 34 | for j in range(len(g[i])): 35 | s+=str(round(g[i][j],4))+" ," 36 | s+="]" 37 | print(s) 38 | 39 | divRegion = divide_kernel(7,8) 40 | 41 | 42 | for i in range(len(divRegion)): 43 | d = divRegion[i] 44 | print("mean["+str(i)+"]=vec3(0.0);") 45 | print("sigma["+str(i)+"]=vec3(0.0);") 46 | print("cur_weight = 0.0;") 47 | for j in range(len(d)): 48 | idx = (d[j][0]+3)+(d[j][1]+3)*7 49 | print("mean["+str(i)+"] += texture2D(texture, (fc + offset["+str(idx)+"]) * Frag).rgb * weight["+str(idx)+"];") 50 | print("sigma["+str(i)+"] += texture2D(texture, (fc + offset["+str(idx)+"]) * Frag).rgb * texture2D(texture, (fc + offset["+str(idx)+"]) * Frag).rgb * weight["+str(idx)+"];") 51 | print("cur_weight+= weight["+str(idx)+"];") 52 | print("mean["+str(i)+"] /= cur_weight;") 53 | print("sigma["+str(i)+"] /= cur_weight;") 54 | print("cur_std = sqrt(abs(sigma["+str(i)+"] - mean["+str(i)+"] * mean["+str(i)+"]));") 55 | print("total_ms += mean["+str(i)+"] * pow(cur_std,vec3(-q));") 56 | print("total_s += pow(cur_std,vec3(-q));") -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/Gaussian.py: -------------------------------------------------------------------------------- 1 | # -*- coding: utf-8 -*- 2 | """ 3 | Created on Mon Oct 8 12:42:53 2018 4 | 5 | @author: raymondmg 6 | """ 7 | import numpy as np 8 | 9 | class Gaussian: 10 | def __init__(self): 11 | print("init gaussian function!") 12 | 13 | 14 | def calc(self,image,sigma,height,width,channel=1): 15 | twoSigma2 = 2.0 * sigma * sigma 16 | halfKernelSize = int(np.ceil( 2.0 * sigma )) 17 | 18 | if channel == 1: 19 | gaussian_image = np.zeros((height,width)) 20 | else: 21 | gaussian_image = np.zeros((height,width,channel)) 22 | for j in range(height): 23 | for i in range(width): 24 | sumA = [0,0,0] 25 | w = 0 26 | for k in range(-halfKernelSize,halfKernelSize+1): 27 | for q in range(-halfKernelSize,halfKernelSize+1): 28 | iq = i + q 29 | jk = j + k 30 | if iq >= 0 and jk >= 0 and iq 0.5: 63 | a -= 1.0 64 | if a < -0.5: 65 | a += 1.0 66 | 67 | if (np.abs(a) <= 0.5 / N) and (r < 0.5 * kernel_size): 68 | krnl[j,i] = 1 69 | else: 70 | krnl[j,i] = 0 71 | 72 | 73 | g = self.calc(krnl,sigma_s,kernel_size,kernel_size) 74 | 75 | mx = 0 76 | for j in range(kernel_size): 77 | for i in range(kernel_size): 78 | x = i - 0.5 * kernel_size + 0.5 79 | y = j - 0.5 * kernel_size + 0.5 80 | r = np.sqrt(x * x + y * y) 81 | 82 | g[j,i] *= np.exp(-0.5 * r * r / sigma_r / sigma_r) 83 | if g[j,i] > mx: 84 | mx = g[j,i] 85 | 86 | for j in range(kernel_size): 87 | for i in range(kernel_size): 88 | g[j,i] /=mx 89 | #g[j,i]*=255 90 | print("init gaussian function finished!") 91 | return g -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/Gkuwahara.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | # -*- coding: utf-8 -*- 3 | """ 4 | Created on Thu Dec 7 16:43:14 2017 5 | 6 | @author: raymondmg 7 | """ 8 | 9 | import numpy as np 10 | import cv2 11 | import time 12 | 13 | 14 | def gaussian_kernel(kernel): 15 | out_kernel = np.zeros((kernel,kernel)) 16 | for i in range(kernel): 17 | for j in range(kernel): 18 | out_kernel[i,j] = np.exp(-((i-kernel//2)**2+(j-kernel//2)**2) / (2 * (kernel)**2)) 19 | return out_kernel 20 | 21 | def visual_divide(img,height,width,index): 22 | num = len(index) 23 | out = np.zeros((num,height,width)) 24 | 25 | for i in range(num): 26 | cur_index = index[i] 27 | for c in cur_index: 28 | out[i,c[0],c[1]] = img[c[0],c[1]] 29 | return out 30 | 31 | def divide_kernel(img,kernel_size,center_point,div): 32 | h_index = center_point[0] 33 | w_index = center_point[1] 34 | rad = kernel_size //2 35 | angle = 2 * np.pi / div 36 | 37 | out = [] 38 | for i in range(div): 39 | out.append([]) 40 | 41 | for h in range(h_index-rad,h_index+rad+1): 42 | for w in range(w_index-rad,w_index+rad+1): 43 | theta = np.arctan2(h-h_index,w-w_index) 44 | index = int(np.floor(theta/angle) % div) 45 | out[index].append((h,w)) 46 | return out 47 | 48 | def generalized_kuwahara_filter(image,kernel = 7,q = 3,div = 8): 49 | pad_size = kernel//2 50 | gauss_kernel = gaussian_kernel(kernel) 51 | 52 | height, width, channel = image.shape 53 | out_image = image.copy() 54 | 55 | pad_image = np.zeros((height+pad_size*2,width+pad_size*2,channel)) 56 | for c in range(channel): 57 | pad_image[:,:,c] = np.pad(out_image[:,:,c],[pad_size,pad_size],'constant') 58 | 59 | for h in range(height): 60 | for w in range(width): 61 | for c in range(channel): 62 | #identify the area 1,2,3,4 range 63 | #in pad image 64 | cur_point_index = (h + pad_size,w + pad_size,c) 65 | div_res = divide_kernel(pad_image[:,:,c],kernel,cur_point_index,div) 66 | 67 | 68 | total_ms = 0 69 | total_s = 0 70 | for i in range(div): 71 | cur_sum = 0 72 | cur_var = 0 73 | cur_weight = 0 74 | cur_index = div_res[i] 75 | for ci in cur_index: 76 | g = gauss_kernel[ci[0]-cur_point_index[0]+pad_size,ci[1]-cur_point_index[1]+pad_size] 77 | cur_val = pad_image[ci[0],ci[1],c] 78 | cur_sum += cur_val*g 79 | cur_var += (cur_val**2)*g 80 | cur_weight += g 81 | 82 | if cur_weight !=0: 83 | cur_sum /= cur_weight 84 | cur_var /= cur_weight 85 | 86 | cur_std = cur_var - cur_sum**2 87 | 88 | if cur_std > 1e-10: 89 | cur_std = np.sqrt(cur_std) 90 | else: 91 | cur_std = 1e-10 92 | 93 | total_ms += cur_sum * np.power(cur_std,-q) 94 | total_s += np.power(cur_std,-q) 95 | 96 | res_val = 0 97 | if total_s > 1e-10: 98 | res_val = total_ms/total_s 99 | if res_val>1: 100 | out_image[h,w,c] = res_val 101 | return out_image 102 | 103 | img = cv2.imread('./img/demo.jpg') 104 | 105 | start = time.time() 106 | out_generalized = generalized_kuwahara_filter(img) 107 | end = time.time() 108 | print('generalized kuwahara filter algo;'+str(end-start)) 109 | out_generalized = out_generalized.astype(np.uint8) 110 | cv2.imwrite('./img/out_generalized.jpg',out_generalized) -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/Noise.py: -------------------------------------------------------------------------------- 1 | # -*- coding: utf-8 -*- 2 | """ 3 | Created on Thu Oct 18 15:27:45 2018 4 | 5 | @author: g-xu-wang 6 | """ 7 | 8 | import cv2 9 | import numpy as np 10 | 11 | def RandomNoise(width=512,height=512): 12 | noise = np.zeros((height,width,3)) 13 | for j in range(height): 14 | for i in range(width): 15 | for c in range(3): 16 | noise[j,i,c] = np.random.rand()*255 17 | return noise 18 | 19 | out = np.uint8(RandomNoise()) 20 | cv2.imwrite("./img/noise.png",out) -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/SST.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | # -*- coding: utf-8 -*- 3 | """ 4 | Created on Wed Oct 3 10:51:24 2018 5 | 6 | @author: raymondmg 7 | """ 8 | 9 | import cv2 as cv 10 | import numpy as np 11 | from enum import Enum 12 | import Gaussian 13 | 14 | class SST_TYPE(Enum): 15 | CLASSIC = 1 16 | 17 | 18 | class SST: 19 | def __init__(self,image,type): 20 | self.type = type 21 | self.image = image 22 | def sst_classic(self,kernel_size=5,sigma=2,tau=0.002,box_filter = [[1,0],[-1,0],[0,1],[0,-1]],iter=5): 23 | img = self.image 24 | self.sigma = sigma 25 | height,width,channel = img.shape 26 | dimage = np.float32(img) 27 | 28 | 29 | 30 | gray = cv.cvtColor(dimage, cv.COLOR_BGR2GRAY) 31 | 32 | 33 | sobelx = cv.Sobel(gray, cv.CV_32F, 1, 0, ksize=3) 34 | sobely = cv.Sobel(gray, cv.CV_32F, 0, 1, ksize=3) 35 | 36 | tensor_image = np.zeros((height,width,3)) 37 | for j in range(height): 38 | for i in range(width): 39 | fx = sobelx[j,i] 40 | fy = sobely[j,i] 41 | tensor_image[j,i] = (fx*fx,fy*fy,fx*fy) 42 | 43 | #sigma = 2 * self.sigma * self.sigma 44 | #smooth_structure_tensor = cv.GaussianBlur(tensor_image,(kernel_size,kernel_size),sigma) 45 | 46 | gaussian_func = Gaussian.Gaussian() 47 | smooth_structure_tensor = gaussian_func.calc(tensor_image,2,height,width,channel) 48 | print("generated smooth structure tensor!") 49 | self.smooth_structure_tensor = smooth_structure_tensor 50 | cv.imwrite("./img/smooth_structure_tensor.png",smooth_structure_tensor) 51 | return smooth_structure_tensor 52 | 53 | def cal(self,kernel_size=5): 54 | if self.type == SST_TYPE.CLASSIC: 55 | return self.sst_classic(kernel_size) -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/Vector.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | # -*- coding: utf-8 -*- 3 | """ 4 | Created on Fri Oct 5 16:41:54 2018 5 | 6 | @author: raymondmg 7 | """ 8 | import numpy as np 9 | 10 | class Vector2: 11 | def __init__(self,x,y): 12 | self.data = [x,y] 13 | 14 | def add(self,v): 15 | return Vector2(self.data[0]+v.data[0],self.data[1]+v.data[1]) 16 | 17 | def scale(self,s): 18 | return Vector2(self.data[0]*s,self.data[1]*s) 19 | 20 | def vscale(self,s): 21 | self.data = [self.data[0]*s,self.data[1]*s] 22 | return self 23 | 24 | def vadd(self,v): 25 | self.data = [self.data[0]+v.data[0],self.data[1]+v.data[1]] 26 | return self 27 | 28 | def vint(self): 29 | self.data = [int(self.data[0]),int(self.data[1])] 30 | return self 31 | 32 | def demoTensor(): 33 | vfield = np.zeros((512,512,2)) 34 | for j in range(512): 35 | for i in range(512): 36 | x = i - int(512 / 2) 37 | y = j - int(512 / 2) 38 | norm = np.sqrt(x**2+y**2) 39 | if norm == 0: 40 | vfield[j,i,0] = 0 41 | vfield[j,i,1] = 0 42 | else: 43 | vfield[j,i,0] = -y/norm 44 | vfield[j,i,1] = x/norm 45 | return vfield 46 | 47 | def randomNoise(height,width,flag_visual=False): 48 | if flag_visual: 49 | random_image = np.zeros((height,width,3)) 50 | for j in range(height): 51 | for i in range(width): 52 | val = int(np.random.rand()*255) 53 | random_image[j,i,0] = val 54 | random_image[j,i,1] = val 55 | random_image[j,i,2] = val 56 | else: 57 | random_image = np.zeros((height,width)) 58 | for j in range(height): 59 | for i in range(width): 60 | val = np.random.rand() 61 | random_image[j,i] = val 62 | return random_image -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/VectorField.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | # -*- coding: utf-8 -*- 3 | """ 4 | Created on Fri Oct 5 16:20:59 2018 5 | 6 | @author: raymondmg 7 | """ 8 | import numpy as np 9 | import Vector as v 10 | 11 | class VectorField: 12 | def __init__(self,sst): 13 | self.sst = sst 14 | 15 | def DemoVectorField(self,vec): 16 | width = 512 17 | height = 512 18 | x = vec.data[0] - width / 2 19 | y = vec.data[1] - height / 2 20 | norm = np.sqrt(x * x + y * y) 21 | 22 | if norm == 0: 23 | return v.Vector2(0, 0) 24 | 25 | return v.Vector2(-y / norm, x / norm) 26 | 27 | def GetVectorFieldValByCoord(self,vec): 28 | y = int(round(vec.data[1])) 29 | x = int(round(vec.data[0])) 30 | 31 | if y>= self.vfield_image.shape[0]: 32 | y -= self.vfield_image.shape[0] 33 | if x>=self.vfield_image.shape[1]: 34 | x -=self.vfield_image.shape[1] 35 | 36 | val = self.vfield_image[y,x] 37 | return v.Vector2(val[0],val[1]) 38 | 39 | 40 | def cal(self): 41 | height,width,_ = self.sst.shape 42 | smooth_structure_tensor = self.sst 43 | vfield_image = np.zeros((height,width,2)) 44 | for j in range(height): 45 | for i in range(width): 46 | E = smooth_structure_tensor[j,i,0] 47 | F = smooth_structure_tensor[j,i,1] 48 | G = smooth_structure_tensor[j,i,2] 49 | D = np.sqrt((E-G)*(E-G)+4.0*F*F) 50 | lambda1 = (E + G + D) / 2.0 51 | theta = np.arctan2(-F, lambda1 - E) 52 | vfield_image[j,i,0] = np.cos(theta) 53 | vfield_image[j,i,1] = np.sin(theta) 54 | print("generated vector field!") 55 | self.vfield_image=vfield_image 56 | return vfield_image -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/Gaussian.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/Gaussian.cpython-35.pyc -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/Gaussian.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/Gaussian.cpython-36.pyc -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/SST.cpython-35.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/SST.cpython-35.pyc -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/SST.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/SST.cpython-36.pyc -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/Vector.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/Vector.cpython-36.pyc -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/VectorField.cpython-36.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/__pycache__/VectorField.cpython-36.pyc -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/anim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/anim.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/anisotropic_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/anisotropic_image.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/building.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/building.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/k0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/k0.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/lic_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/lic_image.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/noise.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/smooth_structure_tensor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/smooth_structure_tensor.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/tensor_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/tensor_image.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/tools/py_kuwahara/img/visual_rgb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/tools/py_kuwahara/img/visual_rgb.png -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/FilterViewer.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * FilterViewer.ts 4 | * tool for test filter in WebGL 5 | * filter viewer 6 | * 7 | * ========================================================================= */ 8 | /// 9 | declare var $: any; 10 | 11 | let viewer = document.getElementById("canvas_viewer"); 12 | viewer.width = 512; 13 | viewer.height = 512; 14 | 15 | //load data 16 | $.getJSON( "./config/ui.json", (ui_data) => { 17 | //console.log( "loaded UI data"); 18 | $.getJSON( "./config/shader.json", (shader_data) => { 19 | //console.log( "loaded shader data"); 20 | $.getJSON( "./config/button.json", (button_data) => { 21 | //console.log( "loaded button data"); 22 | $.getJSON( "./config/user_config.json", (user_config) => { 23 | //console.log( "loaded user config data"); 24 | var filterViewer = new EcognitaWeb3D.FilterViewer(viewer); 25 | filterViewer.initialize(ui_data,shader_data,button_data,user_config); 26 | }); 27 | }); 28 | }); 29 | }); 30 | 31 | -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/build/build-tools.bat: -------------------------------------------------------------------------------- 1 | TITLE Environment Setting 2 | 3 | @echo off 4 | echo compile start 5 | 6 | PUSHD %~dp0 7 | echo. 8 | echo current path is:%cd% 9 | 10 | PUSHD ..\..\..\..\lib_webgl\ts_scripts\build 11 | echo. 12 | echo Ecognita webgl library path is:%cd% 13 | 14 | echo. 15 | echo compile Ecognita webgl library 16 | call build-webgl.bat 17 | 18 | PUSHD ..\..\..\tools_webgl\FilterViewer\ts_scripts\build\tools 19 | 20 | echo. 21 | echo filter viewer path is:%cd% 22 | 23 | echo. 24 | echo compile filter viewer 25 | call build-tsc.bat 26 | 27 | echo. 28 | echo compile YUI compress 29 | call build-yui.bat 30 | 31 | POPD 32 | POPD 33 | POPD 34 | 35 | echo. 36 | echo Finished Environment Setting 37 | 38 | pause -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/build/readme-mac.md: -------------------------------------------------------------------------------- 1 | #compile the scripts for mac 2 | cd .. 3 | tsc --out ../../../scripts/main.js @compile-list.txt 4 | 5 | ..\..\..\..\lib_webgl\ts_scripts\build 6 | 7 | java -jar yuicompressor-2.4.8.jar ../../../scripts/main.js -o ../../../scripts/FilterViewer.min.js -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/build/tools/build-tsc.bat: -------------------------------------------------------------------------------- 1 | tsc --out ../../../scripts/main.js @compile-list.txt -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/build/tools/build-yui.bat: -------------------------------------------------------------------------------- 1 | java -jar yuicompressor-2.4.8.jar ../../../scripts/main.js -o ../../../scripts/FilterViewer.min.js -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/build/tools/compile-list.txt: -------------------------------------------------------------------------------- 1 | ../../FilterViewer.ts -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/build/tools/yuicompressor-2.4.8.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/FilterViewer/ts_scripts/build/tools/yuicompressor-2.4.8.jar -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/lib/EgnFilterViewerUI.ts: -------------------------------------------------------------------------------- 1 | /// 2 | module Utils{ 3 | 4 | //dat UI 5 | declare var dat:any; 6 | export class FilterViewerUI { 7 | gui:any; 8 | data:any; 9 | folderHashSet:any; 10 | folderName:any; 11 | uiController:any; 12 | constructor(data:any){ 13 | this.gui = new dat.gui.GUI(); 14 | this.data = data; 15 | this.gui.remember(data); 16 | 17 | this.uiController = new Utils.HashSet(); 18 | 19 | this.folderHashSet = new Utils.HashSet(); 20 | this.folderHashSet.set("f","Filter"); 21 | 22 | //get all folder name 23 | this.folderName = []; 24 | this.folderHashSet.forEach((k,v)=>{ 25 | this.folderName.push(k); 26 | }); 27 | 28 | this.initData(); 29 | this.initFolder(); 30 | } 31 | initFolder(){ 32 | 33 | this.folderName.forEach(fn => { 34 | let f = this.gui.addFolder(this.folderHashSet.get(fn)); 35 | for(var key in this.data) { 36 | //judge this key is in folder or not 37 | let f_name = key.split("_"); 38 | if((key).includes('_') && f_name[0]==fn){ 39 | let c = f.add(this.data, key).listen(); 40 | this.uiController.set(key, c); 41 | } 42 | } 43 | }); 44 | } 45 | initData(){ 46 | 47 | for(var key in this.data) { 48 | if(!(key).includes('_')){ 49 | this.gui.add(this.data, key); 50 | } 51 | } 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/lib/EgnType.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * EgnType.ts 4 | * static type 5 | * v0.1 6 | * 7 | * ========================================================================= */ 8 | module EcognitaWeb3D { 9 | export enum Filter { 10 | LAPLACIAN, 11 | SOBEL, 12 | GAUSSIAN, 13 | KUWAHARA, 14 | GKUWAHARA, 15 | AKUWAHARA, 16 | ANISTROPIC, 17 | LIC, 18 | NOISELIC, 19 | DoG, 20 | XDoG, 21 | FDoG, 22 | FXDoG, 23 | ABSTRACTION 24 | } 25 | 26 | export enum RenderPipeLine { 27 | CONVOLUTION_FILTER, 28 | ANISTROPIC, 29 | BLOOM_EFFECT, 30 | CONVOLUTION_TWICE, 31 | ABSTRACTION 32 | } 33 | } -------------------------------------------------------------------------------- /tools_webgl/FilterViewer/ts_scripts/lib/HashSet.ts: -------------------------------------------------------------------------------- 1 | module Utils{ 2 | interface typFuncKeyVal{(key:string, val:any) :void}; 3 | 4 | export class HashSet { 5 | private items: { [key: string]: T; }; 6 | 7 | constructor() { 8 | this.items = {}; 9 | } 10 | 11 | set(key: string, value: T): void { 12 | this.items[key] = value; 13 | } 14 | 15 | delete(key: string): boolean { 16 | return delete this.items[key]; 17 | } 18 | 19 | has(key: string): boolean { 20 | return key in this.items; 21 | } 22 | 23 | get(key: string): T { 24 | return this.items[key]; 25 | } 26 | 27 | len(): number { 28 | return Object.keys(this.items).length; 29 | } 30 | 31 | forEach(f:typFuncKeyVal) { 32 | for (let k in this.items) { 33 | f(k, this.items[k]); 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/img/test1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/NormalMapGenerator/img/test1.png -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/img/test2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/NormalMapGenerator/img/test2.jpg -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/img/texture_info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/e720cf883c7926904824124d588f12f96a47eb37/tools_webgl/NormalMapGenerator/img/texture_info.png -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tools test 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 |

strength:

16 | 17 |
18 |

level:

19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/NormalMapGenerator.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * NormalMapGenerator.ts 4 | * tool for generate normal map from texture 5 | * using filesaver.js can export a nice texture,TODO 6 | * 7 | * ========================================================================= */ 8 | /// 9 | /// 10 | var cvs_normalmap = document.getElementById('canvas_normalmap'); 11 | cvs_normalmap.width = 512; 12 | cvs_normalmap.height = 512; 13 | 14 | var cvs_web3d = document.getElementById('canvas_web3d'); 15 | cvs_web3d.width = 512; 16 | cvs_web3d.height = 512; 17 | 18 | var strength =parseFloat((document.getElementById('strength')).value)/10.0; 19 | var level = parseFloat((document.getElementById('level')).value)/10.0; 20 | 21 | var ImageViewer = new EcognitaMathLib.ImageView(cvs_normalmap,"./img/texture_info.png"); 22 | ImageViewer.image.onload = (() => { 23 | ImageViewer.readImageData(); 24 | ImageViewer.drawNormalMap(strength,level); 25 | var bumpMapping = new EcognitaWeb3DFunction.BumpMapping(cvs_web3d,cvs_normalmap.toDataURL()); 26 | }); 27 | 28 | function updateStrength(val){ 29 | ImageViewer.drawNormalMap(val/10,level); 30 | var bumpMapping = new EcognitaWeb3DFunction.BumpMapping(cvs_web3d,cvs_normalmap.toDataURL()); 31 | } 32 | 33 | function updateLevel(val){ 34 | ImageViewer.drawNormalMap(strength,val/10); 35 | var bumpMapping = new EcognitaWeb3DFunction.BumpMapping(cvs_web3d,cvs_normalmap.toDataURL()); 36 | } 37 | 38 | function ExportNormalMap(){ 39 | var image = cvs_normalmap.toDataURL("image/png").replace("image/png", "image/octet-stream"); 40 | 41 | window.location.href = image; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/build/build-tools.bat: -------------------------------------------------------------------------------- 1 | TITLE Tools Environment Setting 2 | @echo off 3 | echo compile typescript 4 | tsc --out ../../scripts/main.js @compile-list.txt 5 | 6 | echo. 7 | echo Finished Tools Environment Setting -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/build/compile-list.txt: -------------------------------------------------------------------------------- 1 | ../../../lib_webgl/ts_scripts/lib/cv_imread.ts 2 | ../../../lib_webgl/ts_scripts/lib/cv_colorSpace.ts 3 | ../../../lib_webgl/ts_scripts/lib/extra_utils.ts 4 | ../../../lib_webgl/ts_scripts/lib/webgl_matrix.ts 5 | ../../../lib_webgl/ts_scripts/lib/webgl_quaternion.ts 6 | ../../../lib_webgl/ts_scripts/lib/webgl_shaders.ts 7 | ../../../lib_webgl/ts_scripts/lib/webgl_model.ts 8 | ../../../lib_webgl/ts_scripts/lib/webgl_utils.ts 9 | ../../../lib_webgl/ts_scripts/package/pkg/bumpMapping.ts 10 | ../NormalMapGenerator.ts 11 | ../extlib/math_utils.ts 12 | ../extlib/vector.ts 13 | ../lib/image_utils.ts -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/build/readme-mac.md: -------------------------------------------------------------------------------- 1 | #compile the scripts for mac 2 | cd .. 3 | tsc --out ../../scripts/main.js @compile-list.txt -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/demo/compile-list.txt: -------------------------------------------------------------------------------- 1 | ./demo.ts 2 | ../extlib/math_utils.ts 3 | ../extlib/vector.ts 4 | ../lib/image_utils.ts -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/demo/demo.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * demo.ts 4 | * demo for normal map generator 5 | * 6 | * ========================================================================= */ 7 | /// 8 | var cvs_hm = document.getElementById('canvas_heightmap'); 9 | var cvs_nm = document.getElementById('canvas_normalmap'); 10 | 11 | var strength =parseFloat((document.getElementById("p_s")).value); 12 | var level = parseFloat((document.getElementById("p_l")).value); 13 | 14 | cvs_hm.height = 512; 15 | cvs_hm.width = 512; 16 | cvs_nm.height = 512; 17 | cvs_nm.width= 512; 18 | 19 | var HeightMapViewer = new EcognitaMathLib.ImageView(cvs_hm,"./project/NormalMapGenerator/img/heightmap.jpg"); 20 | HeightMapViewer.image.onload = (() => { 21 | HeightMapViewer.readImageData(); 22 | }); 23 | 24 | var NormalMapViewer = new EcognitaMathLib.ImageView(cvs_nm,"./project/NormalMapGenerator/img/heightmap.jpg"); 25 | NormalMapViewer.image.onload = (() => { 26 | NormalMapViewer.readImageData(); 27 | NormalMapViewer.drawNormalMap(strength,level); 28 | 29 | document.getElementById("generate_normalmap").addEventListener("click", function() { 30 | strength =parseFloat((document.getElementById("p_s")).value); 31 | level = parseFloat((document.getElementById("p_l")).value); 32 | NormalMapViewer.drawNormalMap(strength,level); 33 | }); 34 | }); 35 | 36 | -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/demo/readme-mac.md: -------------------------------------------------------------------------------- 1 | #compile the scripts for mac 2 | cd .. 3 | tsc --out ../../scripts/extlib_np_demo.js @compile-list.txt -------------------------------------------------------------------------------- /tools_webgl/NormalMapGenerator/ts_scripts/extlib/math_utils.ts: -------------------------------------------------------------------------------- 1 | /* ========================================================================= 2 | * 3 | * math_utils.ts 4 | * simple math functions 5 | * ========================================================================= */ 6 | module EcognitaMathLib { 7 | export function absmax(x: number, y: number) { 8 | return (x * x > y * y) ? x : y; 9 | } 10 | 11 | export function absmin(x: number, y: number) { 12 | return (x * x < y * y) ? x : y; 13 | } 14 | } --------------------------------------------------------------------------------