├── .gitignore ├── README.md ├── geometry_instancing ├── .editorconfig ├── build_config.js ├── gulp │ ├── taskName.js │ └── tasks │ │ ├── start.js │ │ ├── tsCompile.js │ │ └── tsLint.js ├── gulpfile.js ├── package-lock.json ├── package.json ├── src │ ├── css │ │ └── style.css │ ├── index.html │ ├── js │ │ ├── dat.gui.js │ │ ├── script.js │ │ └── stats.js │ └── ts │ │ ├── Main.ts │ │ ├── enum │ │ └── EventName.ts │ │ ├── myLib │ │ ├── MyLib.ts │ │ ├── enum │ │ │ ├── events │ │ │ │ ├── KeyboardEventName.ts │ │ │ │ ├── MSGestureEventName.ts │ │ │ │ ├── MouseEventName.ts │ │ │ │ └── TouchEventName.ts │ │ │ └── ui │ │ │ │ └── KeyCode.ts │ │ └── webgl │ │ │ ├── controller │ │ │ └── RoundCameraController.ts │ │ │ ├── engine │ │ │ ├── Camera.ts │ │ │ ├── RenderingObject.ts │ │ │ ├── RenderingTextureObject.ts │ │ │ ├── ShaderAttributeObject.ts │ │ │ ├── ShaderObject.ts │ │ │ ├── TextureObject.ts │ │ │ ├── UniformObject.ts │ │ │ └── VertexAttributeObject.ts │ │ │ ├── object │ │ │ ├── OrthoScreenObject.ts │ │ │ └── SceneObject.ts │ │ │ ├── primitive │ │ │ ├── Plane.ts │ │ │ ├── Primitive.ts │ │ │ ├── Sphere.ts │ │ │ └── Torus.ts │ │ │ └── utils │ │ │ └── WebGLUtil.ts │ │ └── project │ │ ├── GUIPanel.ts │ │ ├── InstanceAttributeObject.ts │ │ ├── InstanceProperty.ts │ │ ├── RGB.ts │ │ ├── Shader.ts │ │ └── TorusInstance.ts ├── tsconfig.json ├── tslint.json └── webpack.config.js ├── multiple_render_targets ├── .editorconfig ├── build_config.js ├── gulp │ ├── taskName.js │ └── tasks │ │ ├── start.js │ │ ├── tsCompile.js │ │ └── tsLint.js ├── gulpfile.js ├── package-lock.json ├── package.json ├── src │ ├── css │ │ └── style.css │ ├── index.html │ ├── js │ │ ├── dat.gui.js │ │ ├── script.js │ │ └── stats.js │ └── ts │ │ ├── Main.ts │ │ ├── enum │ │ └── EventName.ts │ │ ├── myLib │ │ ├── MyLib.ts │ │ ├── enum │ │ │ ├── events │ │ │ │ ├── KeyboardEventName.ts │ │ │ │ ├── MSGestureEventName.ts │ │ │ │ ├── MouseEventName.ts │ │ │ │ └── TouchEventName.ts │ │ │ └── ui │ │ │ │ └── KeyCode.ts │ │ └── webgl │ │ │ ├── controller │ │ │ └── RoundCameraController.ts │ │ │ ├── engine │ │ │ ├── Camera.ts │ │ │ ├── RenderingObject.ts │ │ │ ├── RenderingTextureObject.ts │ │ │ ├── ShaderAttributeObject.ts │ │ │ ├── ShaderObject.ts │ │ │ ├── TextureObject.ts │ │ │ ├── UniformObject.ts │ │ │ └── VertexAttributeObject.ts │ │ │ ├── object │ │ │ ├── OrthoScreenObject.ts │ │ │ └── SceneObject.ts │ │ │ ├── primitive │ │ │ ├── Plane.ts │ │ │ ├── Primitive.ts │ │ │ ├── Sphere.ts │ │ │ └── Torus.ts │ │ │ └── utils │ │ │ └── WebGLUtil.ts │ │ └── project │ │ ├── DeferredAmbientLight.ts │ │ ├── DeferredAmbientLightPassShader.ts │ │ ├── DeferredGeometryPassShader.ts │ │ ├── DeferredPointLight.ts │ │ ├── DeferredPointLightPassShader.ts │ │ ├── GUIPanel.ts │ │ ├── MRTScreenShader.ts │ │ ├── MultiRenderingTextureObject.ts │ │ ├── PlainColorShader.ts │ │ ├── RGB.ts │ │ └── TextureTypeObject.ts ├── tsconfig.json ├── tslint.json └── webpack.config.js └── transform_feedback ├── .editorconfig ├── build_config.js ├── gulp ├── taskName.js └── tasks │ ├── start.js │ ├── tsCompile.js │ └── tsLint.js ├── gulpfile.js ├── package-lock.json ├── package.json ├── src ├── css │ └── style.css ├── index.html ├── js │ ├── script.js │ └── stats.js └── ts │ ├── Main.ts │ ├── enum │ └── EventName.ts │ ├── myLib │ ├── MyLib.ts │ ├── enum │ │ ├── events │ │ │ ├── KeyboardEventName.ts │ │ │ ├── MSGestureEventName.ts │ │ │ ├── MouseEventName.ts │ │ │ └── TouchEventName.ts │ │ └── ui │ │ │ └── KeyCode.ts │ └── webgl │ │ ├── controller │ │ └── RoundCameraController.ts │ │ ├── engine │ │ ├── Camera.ts │ │ ├── RenderingObject.ts │ │ ├── RenderingTextureObject.ts │ │ ├── ShaderAttributeObject.ts │ │ ├── ShaderObject.ts │ │ ├── TextureObject.ts │ │ ├── UniformObject.ts │ │ └── VertexAttributeObject.ts │ │ ├── object │ │ ├── OrthoScreenObject.ts │ │ └── SceneObject.ts │ │ ├── primitive │ │ ├── Plane.ts │ │ ├── Primitive.ts │ │ ├── Sphere.ts │ │ └── Torus.ts │ │ └── utils │ │ └── WebGLUtil.ts │ └── project │ ├── TransformFeedbackShader.ts │ ├── TransformFeedbackVaryingObject.ts │ └── TransformFeedbackVertex.ts ├── tsconfig.json ├── tslint.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | /**/script.js.map 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 170706_webgl2_feature -------------------------------------------------------------------------------- /geometry_instancing/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /geometry_instancing/build_config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ビルドの設定ファイル 3 | * 4 | * @author ICS-Kano 5 | */ 6 | /** ソースフォルダ */ 7 | const SRC_FOLDER = "./src"; 8 | 9 | /** TypeScriptフォルダ */ 10 | const TS_FOLDER = `${SRC_FOLDER}/ts`; 11 | /** TypeScriptファイルのエントリーファイル */ 12 | const TS_ENTRY_FILES_NAME = { 13 | "script": "Main.ts" 14 | }; 15 | 16 | /** 変換後のJS格納フォルダ */ 17 | const JS_FOLDER = `${SRC_FOLDER}/js`; 18 | 19 | /** リリースファイルの格納フォルダ */ 20 | const DIST_FOLDER = "dist"; 21 | 22 | /** リリース対象ファイルファイルの格納フォルダ */ 23 | const DIST_FILES = [ 24 | `${SRC_FOLDER}/**/*.html`, 25 | `${JS_FOLDER}/**/*.js` 26 | ]; 27 | 28 | // TypeScrptのエントリーファイルの作成 29 | let tsEntryFiles = {}; 30 | for (let tsKey in TS_ENTRY_FILES_NAME) { 31 | const key = tsKey; 32 | const tsFile = `${TS_FOLDER}/${TS_ENTRY_FILES_NAME[tsKey]}`; 33 | tsEntryFiles[key] = tsFile; 34 | } 35 | 36 | // moduleとしてexportする 37 | module.exports = { 38 | srcFolder: SRC_FOLDER, 39 | tsFolder: TS_FOLDER, 40 | tsEntryFiles: tsEntryFiles, 41 | jsFolder: JS_FOLDER, 42 | distFolder: DIST_FOLDER, 43 | distFiles: DIST_FILES 44 | }; -------------------------------------------------------------------------------- /geometry_instancing/gulp/taskName.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Gulpのタスク名 3 | * 4 | * @author ICS-Kano 5 | */ 6 | module.exports = { 7 | "start": "start", 8 | "tsCompile": "tsCompile", 9 | "tsLint": "tsLint" 10 | }; 11 | -------------------------------------------------------------------------------- /geometry_instancing/gulp/tasks/start.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ローカルサーバーの起動、ファイルウォッチ用のタスク 3 | * 4 | * @author ICS-Kano 5 | */ 6 | // 設定ファイル 7 | const config = require("../../build_config"); 8 | const taskName = require("../taskName"); 9 | const browserSync = require("browser-sync"); 10 | 11 | require("./tsCompile"); 12 | require("./tsLint"); 13 | 14 | const gulp = require("gulp"); 15 | 16 | /** 17 | * ローカルサーバーのタスク設定 18 | */ 19 | gulp.task(taskName.start, 20 | gulp.series( 21 | gulp.parallel( 22 | taskName.tsLint, 23 | taskName.tsCompile 24 | ), 25 | () => { 26 | startWatchTasks() 27 | } 28 | ) 29 | ); 30 | 31 | /** 32 | * ウォッチタスクを開始します。 33 | */ 34 | function startWatchTasks() { 35 | browserSync({ 36 | server: { 37 | baseDir: "src" // ルートとなるディレクトリを指定 38 | } 39 | }); 40 | 41 | // jsファイルを監視 42 | gulp.watch(`${config.jsFolder}/**/*.js`, (done) => { 43 | // ファイルに変更があれば同期しているブラウザをリロード 44 | browserSync.reload(); 45 | // リロード終了時に実行 46 | done() 47 | }); 48 | 49 | // TypeScriptファイルのウォッチ 50 | gulp.watch(`${config.tsFolder}/**/*.ts`, 51 | gulp.parallel( 52 | taskName.tsLint, // Lint 53 | taskName.tsCompile // コンパイル 54 | ) 55 | ) 56 | } 57 | -------------------------------------------------------------------------------- /geometry_instancing/gulp/tasks/tsCompile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TypeScriptのコンパイルタスク 3 | * 4 | * @author ICS-Kano 5 | */ 6 | 7 | const config = require("../../build_config"); 8 | const webpackConfig = require('../../webpack.config.js'); 9 | 10 | const taskName = require("../taskName"); 11 | 12 | const gulp = require("gulp"); 13 | const plumber = require("gulp-plumber"); 14 | const webpackStream = require("webpack-stream"); 15 | const webpack = require("webpack"); 16 | 17 | const sourcemaps = require("gulp-sourcemaps"); 18 | 19 | // TODO:webpak 2 fix 20 | 21 | gulp.task(taskName.tsCompile, () => { 22 | return sourcemaps.init() 23 | .pipe(plumber()) 24 | .pipe(webpackStream(webpackConfig)) 25 | .pipe(sourcemaps.write("./")) 26 | .pipe(gulp.dest(config.jsFolder)) 27 | }); 28 | -------------------------------------------------------------------------------- /geometry_instancing/gulp/tasks/tsLint.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TypeScriptのLintチェック 3 | * 4 | * @author ICS-Kano 5 | */ 6 | const config = require("../../build_config"); 7 | const taskName = require("../taskName"); 8 | 9 | const gulp = require("gulp"); 10 | const tslint = require("gulp-tslint"); 11 | const notify = require("gulp-notify"); 12 | const plumber = require("gulp-plumber"); 13 | 14 | gulp.task(taskName.tsLint, () => { 15 | return gulp.src(`${config.tsFolder}**/*.ts`) 16 | .pipe(plumber({ 17 | errorHandler: function (err) { 18 | notify.onError(`ts Error:${err}`); 19 | this.emit("end") 20 | } 21 | })) 22 | .pipe(tslint({ 23 | formatter: "verbose", 24 | configuration: "./tslint.json" 25 | })) 26 | .pipe(tslint.report()) 27 | }); 28 | -------------------------------------------------------------------------------- /geometry_instancing/gulpfile.js: -------------------------------------------------------------------------------- 1 | const requireDir = require("require-dir"); 2 | requireDir("./gulp", {recurse: true}); 3 | -------------------------------------------------------------------------------- /geometry_instancing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl2-demo-instancing", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "", 6 | "scripts": { 7 | "gulp": "gulp", 8 | "webpack": "webpack", 9 | "start": "gulp start", 10 | "tsc": "gulp tsCompile", 11 | "tslint": "gulp tsLint" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@types/dat-gui": "^0.6.2", 18 | "browser-sync": "^2.18.8", 19 | "gl-matrix": "^2.4.0", 20 | "gulp": "github:gulpjs/gulp#4.0", 21 | "gulp-notify": "^3.2.0", 22 | "gulp-plumber": "^1.1.0", 23 | "gulp-sourcemaps": "^2.4.0", 24 | "gulp-tslint": "^8.1.2", 25 | "require-dir": "^0.3.1", 26 | "ts-loader": "^3.4.0", 27 | "tslint": "^5.9.1", 28 | "typescript": "^2.2.1", 29 | "webpack": "^3.10.0", 30 | "webpack-stream": "^4.0.0" 31 | }, 32 | "dependencies": { 33 | "@types/gl-matrix": "^2.4.0", 34 | "@types/stats.js": "^0.17.0", 35 | "@types/webgl2": "0.0.2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /geometry_instancing/src/css/style.css: -------------------------------------------------------------------------------- 1 | #container { 2 | position: relative; 3 | } 4 | .guiStyle { 5 | position: absolute; 6 | top: 0; 7 | right: 0; 8 | } 9 | -------------------------------------------------------------------------------- /geometry_instancing/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL 2.0 demo - Gepmetry Instancing 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 |
22 |

※このデモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。

23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /geometry_instancing/src/js/stats.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global.Stats = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | /** 8 | * @author mrdoob / http://mrdoob.com/ 9 | */ 10 | 11 | var Stats = function () { 12 | 13 | var mode = 0; 14 | 15 | var container = document.createElement( 'div' ); 16 | container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; 17 | container.addEventListener( 'click', function ( event ) { 18 | 19 | event.preventDefault(); 20 | showPanel( ++ mode % container.children.length ); 21 | 22 | }, false ); 23 | 24 | // 25 | 26 | function addPanel( panel ) { 27 | 28 | container.appendChild( panel.dom ); 29 | return panel; 30 | 31 | } 32 | 33 | function showPanel( id ) { 34 | 35 | for ( var i = 0; i < container.children.length; i ++ ) { 36 | 37 | container.children[ i ].style.display = i === id ? 'block' : 'none'; 38 | 39 | } 40 | 41 | mode = id; 42 | 43 | } 44 | 45 | // 46 | 47 | var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0; 48 | 49 | var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) ); 50 | var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) ); 51 | 52 | if ( self.performance && self.performance.memory ) { 53 | 54 | var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) ); 55 | 56 | } 57 | 58 | showPanel( 0 ); 59 | 60 | return { 61 | 62 | REVISION: 16, 63 | 64 | dom: container, 65 | 66 | addPanel: addPanel, 67 | showPanel: showPanel, 68 | 69 | begin: function () { 70 | 71 | beginTime = ( performance || Date ).now(); 72 | 73 | }, 74 | 75 | end: function () { 76 | 77 | frames ++; 78 | 79 | var time = ( performance || Date ).now(); 80 | 81 | msPanel.update( time - beginTime, 200 ); 82 | 83 | if ( time > prevTime + 1000 ) { 84 | 85 | fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 ); 86 | 87 | prevTime = time; 88 | frames = 0; 89 | 90 | if ( memPanel ) { 91 | 92 | var memory = performance.memory; 93 | memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 ); 94 | 95 | } 96 | 97 | } 98 | 99 | return time; 100 | 101 | }, 102 | 103 | update: function () { 104 | 105 | beginTime = this.end(); 106 | 107 | }, 108 | 109 | // Backwards Compatibility 110 | 111 | domElement: container, 112 | setMode: showPanel 113 | 114 | }; 115 | 116 | }; 117 | 118 | Stats.Panel = function ( name, fg, bg ) { 119 | 120 | var min = Infinity, max = 0, round = Math.round; 121 | var PR = round( window.devicePixelRatio || 1 ); 122 | 123 | var WIDTH = 80 * PR, HEIGHT = 48 * PR, 124 | TEXT_X = 3 * PR, TEXT_Y = 2 * PR, 125 | GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, 126 | GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; 127 | 128 | var canvas = document.createElement( 'canvas' ); 129 | canvas.width = WIDTH; 130 | canvas.height = HEIGHT; 131 | canvas.style.cssText = 'width:80px;height:48px'; 132 | 133 | var context = canvas.getContext( '2d' ); 134 | context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif'; 135 | context.textBaseline = 'top'; 136 | 137 | context.fillStyle = bg; 138 | context.fillRect( 0, 0, WIDTH, HEIGHT ); 139 | 140 | context.fillStyle = fg; 141 | context.fillText( name, TEXT_X, TEXT_Y ); 142 | context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); 143 | 144 | context.fillStyle = bg; 145 | context.globalAlpha = 0.9; 146 | context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); 147 | 148 | return { 149 | 150 | dom: canvas, 151 | 152 | update: function ( value, maxValue ) { 153 | 154 | min = Math.min( min, value ); 155 | max = Math.max( max, value ); 156 | 157 | context.fillStyle = bg; 158 | context.globalAlpha = 1; 159 | context.fillRect( 0, 0, WIDTH, GRAPH_Y ); 160 | context.fillStyle = fg; 161 | context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y ); 162 | 163 | context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT ); 164 | 165 | context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT ); 166 | 167 | context.fillStyle = bg; 168 | context.globalAlpha = 0.9; 169 | context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) ); 170 | 171 | } 172 | 173 | }; 174 | 175 | }; 176 | 177 | return Stats; 178 | 179 | }))); 180 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/Main.ts: -------------------------------------------------------------------------------- 1 | import {GUI, GUIController} from "dat-gui"; 2 | import {vec3, vec4} from "gl-matrix"; 3 | import EventName from "./enum/EventName"; 4 | import {RoundCameraController} from "./myLib/webgl/controller/RoundCameraController"; 5 | import {Camera} from "./myLib/webgl/engine/Camera"; 6 | import {Primitive} from "./myLib/webgl/primitive/Primitive"; 7 | import {GUIPanel} from "./project/GUIPanel"; 8 | import {Shader} from "./project/Shader"; 9 | import {TorusInstance} from "./project/TorusInstance"; 10 | 11 | declare let dat:any; 12 | 13 | /** 14 | * @author Kentaro Kawakatsu 15 | */ 16 | class Main 17 | { 18 | private static RAD:number = Math.PI / 180; 19 | 20 | private static CANVAS_WIDTH:number = 960; 21 | private static CANVAS_HEIGHT:number = 540; 22 | 23 | private stats:Stats; 24 | 25 | private canvas:HTMLCanvasElement; 26 | private context:WebGL2RenderingContext; 27 | 28 | private controller:RoundCameraController; 29 | private camera:Camera; 30 | 31 | private torus:TorusInstance; 32 | private numInstance:number = 1000; 33 | private useWireframe:boolean = false; 34 | 35 | constructor() 36 | { 37 | console.log(new Date()); 38 | 39 | this.canvas = document.getElementById(("myCanvas")); 40 | this.canvas.width = Main.CANVAS_WIDTH; 41 | this.canvas.height = Main.CANVAS_HEIGHT; 42 | this.context = this.canvas.getContext("webgl2"); 43 | 44 | if (!this.context) 45 | { 46 | // WebGL2 is not supported 47 | this.canvas.style.display = "none"; 48 | return; 49 | } 50 | ( document.getElementById(("notSupportedDescription"))).style.display = "none"; 51 | 52 | // Stats 53 | this.stats = new Stats(); 54 | document.body.appendChild(this.stats.dom); 55 | // GUI 56 | let panel:GUIPanel = new GUIPanel(); 57 | let gui:GUI = new dat.GUI({autoPlace:false}); 58 | let guiContainer:HTMLElement = document.getElementById("container"); 59 | guiContainer.style.width = Main.CANVAS_WIDTH + "px"; 60 | gui.domElement.classList.add("guiStyle"); 61 | guiContainer.appendChild(gui.domElement); 62 | 63 | let instanceFolder:GUI = gui.addFolder("Instance"); 64 | instanceFolder.open(); 65 | let instanceNumSlider:GUIController = instanceFolder.add(panel, "num", 100, 5000).step(100); 66 | panel.setGUITitle(gui, "num", "Num"); 67 | instanceNumSlider.onFinishChange((value:number) => 68 | { 69 | this.numInstance = value; 70 | this.torus.resetInstanceData(value); 71 | }); 72 | let useWireframeSlider:GUIController = instanceFolder.add(panel, "wireframe"); 73 | panel.setGUITitle(gui, "wireframe", "Wireframe"); 74 | useWireframeSlider.onFinishChange((value:boolean) => 75 | { 76 | this.useWireframe = value; 77 | if (value) 78 | { 79 | this.torus.ibo = this.torus.wireIbo; 80 | } 81 | else 82 | { 83 | this.torus.ibo = this.torus.objectIbo; 84 | } 85 | }); 86 | 87 | this.context.clearColor(0.0, 0.0, 0.0, 1.0); 88 | this.context.clearDepth(1.0); 89 | this.context.enable(this.context.CULL_FACE); 90 | this.context.frontFace(this.context.CCW); 91 | this.context.enable(this.context.DEPTH_TEST); 92 | this.context.depthFunc(this.context.LEQUAL); 93 | 94 | let torus:TorusInstance = new TorusInstance(this.context, this.numInstance, 2.0, 0.5, 20, 50, (Primitive.ATTRIBUTE_USE_POSITION | Primitive.ATTRIBUTE_USE_NOMRAL)); 95 | this.torus = torus; 96 | torus.attachShader(new Shader(this.context)); 97 | torus.shader.getUniform("ambientColor").vector4 = vec4.fromValues(0.2, 0.2, 0.2, 1.0); 98 | torus.shader.getUniform("lightDirection").vector3 = vec3.fromValues(1.0, 1.0, 1.0); 99 | torus.shader.getUniform("lightColor").vector4 = vec4.fromValues(1.0, 1.0, 1.0, 1.0); 100 | torus.shader.getUniform("lightIntensity").value = 0.8; 101 | 102 | this.camera = new Camera(60 * Main.RAD, Main.CANVAS_WIDTH / Main.CANVAS_HEIGHT, 0.1, 1000.0); 103 | this.controller = new RoundCameraController(this.camera, this.canvas); 104 | this.canvas.style.cursor = "move"; 105 | this.controller.radius = 80; 106 | this.controller.radiusOffset = 1; 107 | this.controller.rotate(0, 0); 108 | 109 | this.render(); 110 | } 111 | 112 | private render():void 113 | { 114 | this.stats.begin(); 115 | 116 | this.controller.upDate(0.1); 117 | this.torus.updateInstance(); 118 | // 119 | this.torus.shader.getUniform("vpMatrix").matrix = this.camera.getCameraMtx(); 120 | // 121 | this.context.clear(this.context.COLOR_BUFFER_BIT | this.context.DEPTH_BUFFER_BIT); 122 | this.torus.shader.bindShader(); 123 | this.torus.bindVertexbuffer(); 124 | this.torus.bindIndexbuffer(); 125 | if (this.useWireframe) 126 | { 127 | this.context.drawElementsInstanced(this.context.LINES, this.torus.wireIboData.length, this.context.UNSIGNED_SHORT, 0, this.numInstance); 128 | } 129 | else 130 | { 131 | this.context.drawElementsInstanced(this.context.TRIANGLES, this.torus.iboData.length, this.context.UNSIGNED_SHORT, 0, this.numInstance); 132 | } 133 | this.context.flush(); 134 | 135 | this.stats.end(); 136 | 137 | requestAnimationFrame(() => this.render()); 138 | } 139 | } 140 | 141 | window.addEventListener(EventName.DOM_CONTENT_LOADED, () => new Main()); 142 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/enum/EventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class EventName { 5 | static DOM_CONTENT_LOADED:string = "DOMContentLoaded" 6 | } 7 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/MyLib.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MyLib 5 | { 6 | constructor() 7 | { 8 | 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/enum/events/KeyboardEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class KeyboardEventName 5 | { 6 | public static KEY_DOWN:string = "keydown"; 7 | } 8 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/enum/events/MSGestureEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MSGestureEventName 5 | { 6 | public static GESTURE_START:string = "gesturestart"; 7 | public static GESTURE_CHANGE:string = "gesturechange"; 8 | public static GESTURE_END:string = "gestureend"; 9 | } 10 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/enum/events/MouseEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MouseEventName 5 | { 6 | public static MOUSE_DOWN:string = "mousedown"; 7 | public static MOUSE_UP:string = "mouseup"; 8 | public static MOUSE_MOVE:string = "mousemove"; 9 | public static MOUSE_WHEEL:string = "mousewheel"; 10 | } 11 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/enum/events/TouchEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class TouchEventName 5 | { 6 | public static TOUCH_START:string = "touchstart"; 7 | public static TOUCH_MOVE:string = "touchmove"; 8 | public static TOUCH_END:string = "touchend"; 9 | } 10 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/enum/ui/KeyCode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class KeyCode 5 | { 6 | public static UP:number = 38; 7 | public static DOWN:number = 40; 8 | } 9 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/controller/RoundCameraController.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import KeyboardEventName from "../../enum/events/KeyboardEventName"; 3 | import MouseEventName from "../../enum/events/MouseEventName"; 4 | import MSGestureEventName from "../../enum/events/MSGestureEventName"; 5 | import TouchEventName from "../../enum/events/TouchEventName"; 6 | import KeyCode from "../../enum/ui/KeyCode"; 7 | import {Camera} from "../engine/Camera"; 8 | /** 9 | * @author Kentaro Kawakatsu 10 | */ 11 | export class RoundCameraController 12 | { 13 | public static RAD:number = Math.PI / 180.0; 14 | 15 | // parameter 16 | public radiusMin:number = 1.0; 17 | public radiusOffset:number = 0.1; 18 | public gestureRadiusFactor:number = 20.0; 19 | 20 | // camera 21 | public radius:number = 2.0; 22 | private _camera:Camera; 23 | private _stage:HTMLCanvasElement; 24 | private _target:vec3; 25 | private _theta:number = 0.0; 26 | private _oldX:number = 0.0; 27 | private _phi:number = 90.0; 28 | private _oldY:number = 0.0; 29 | 30 | private _currentTheta:number = 0.0; 31 | private _currentPhi:number = 90.0; 32 | 33 | // for mouse 34 | public isMouseDown:Boolean; 35 | 36 | // for touch 37 | private _identifier:number; 38 | private _oldRadius:number; 39 | private _isGestureChange:Boolean; 40 | 41 | constructor(camera:Camera, stage:HTMLCanvasElement) 42 | { 43 | this._camera = camera; 44 | this._stage = stage; 45 | this._target = vec3.fromValues(0.0, 0.0, 0.0); 46 | this.enable(); 47 | this._updateCamera(); 48 | } 49 | 50 | public enable():void 51 | { 52 | document.addEventListener(KeyboardEventName.KEY_DOWN, (event:KeyboardEvent) => 53 | { 54 | this._keyHandler(event); 55 | }); 56 | document.addEventListener(MouseEventName.MOUSE_UP, (event:MouseEvent) => 57 | { 58 | this._upHandler(event); 59 | }); 60 | this._stage.addEventListener(MouseEventName.MOUSE_DOWN, (event:MouseEvent) => 61 | { 62 | this._downHandler(event); 63 | }); 64 | this._stage.addEventListener(MouseEventName.MOUSE_MOVE, (event:MouseEvent) => 65 | { 66 | this._moveHandler(event); 67 | }); 68 | this._stage.addEventListener(MouseEventName.MOUSE_WHEEL, (event:WheelEvent) => 69 | { 70 | this._wheelHandler(event); 71 | }); 72 | 73 | // touch 74 | if ("ontouchstart" in window) 75 | { 76 | this._stage.addEventListener(TouchEventName.TOUCH_START, (event:TouchEvent) => 77 | { 78 | this._touchStartHandler(event); 79 | }); 80 | this._stage.addEventListener(TouchEventName.TOUCH_MOVE, (event:TouchEvent) => 81 | { 82 | this._touchMoveHandler(event); 83 | }); 84 | document.addEventListener(TouchEventName.TOUCH_END, (event:TouchEvent) => 85 | { 86 | this._touchEndHandler(event); 87 | }); 88 | } 89 | if ("ongesturestart" in window) 90 | { 91 | this._stage.addEventListener(MSGestureEventName.GESTURE_START, (event:MSGestureEvent) => 92 | { 93 | this._gestureStartHandler(event); 94 | }); 95 | this._stage.addEventListener(MSGestureEventName.GESTURE_CHANGE, (event:MSGestureEvent) => 96 | { 97 | this._gestureChangeHandler(event); 98 | }); 99 | document.addEventListener(MSGestureEventName.GESTURE_END, (event:MSGestureEvent) => 100 | { 101 | this._gestureEndHandler(event); 102 | }); 103 | } 104 | } 105 | 106 | private _keyHandler(event:KeyboardEvent):void 107 | { 108 | switch (event.keyCode) 109 | { 110 | case KeyCode.UP: 111 | this.radius -= this.radiusOffset; 112 | if (this.radius < this.radiusMin) 113 | { 114 | this.radius = this.radiusMin; 115 | } 116 | break; 117 | case KeyCode.DOWN: 118 | this.radius += this.radiusOffset; 119 | break; 120 | default: 121 | break; 122 | } 123 | } 124 | 125 | private _upHandler(event:MouseEvent):void 126 | { 127 | this.isMouseDown = false; 128 | } 129 | 130 | private _downHandler(event:MouseEvent):void 131 | { 132 | this.isMouseDown = true; 133 | let rect:ClientRect = ( event.target).getBoundingClientRect(); 134 | this._oldX = event.clientX - rect.left; 135 | this._oldY = event.clientY - rect.top; 136 | } 137 | 138 | private _wheelHandler(event:MouseWheelEvent):void 139 | { 140 | if (event.wheelDelta > 0) 141 | { 142 | this.radius -= this.radiusOffset; 143 | if (this.radius < this.radiusMin) 144 | { 145 | this.radius = this.radiusMin; 146 | } 147 | } 148 | else 149 | { 150 | this.radius += this.radiusOffset; 151 | } 152 | } 153 | 154 | private _moveHandler(event:MouseEvent):void 155 | { 156 | if (this.isMouseDown) 157 | { 158 | let rect:ClientRect = ( event.target).getBoundingClientRect(); 159 | let stageX:number = event.clientX - rect.left; 160 | let stageY:number = event.clientY - rect.top; 161 | 162 | this.inputXY(stageX, stageY); 163 | } 164 | } 165 | 166 | private _touchStartHandler(event:TouchEvent):void 167 | { 168 | event.preventDefault(); 169 | if (!this.isMouseDown) 170 | { 171 | let touches:TouchList = event.changedTouches; 172 | let touch:Touch = touches[0]; 173 | this.isMouseDown = true; 174 | this._identifier = touch.identifier; 175 | let target:HTMLElement = touch.target; 176 | this._oldX = touch.pageX - target.offsetLeft; 177 | this._oldY = touch.pageY - target.offsetTop; 178 | } 179 | } 180 | 181 | private _touchMoveHandler(event:TouchEvent):void 182 | { 183 | event.preventDefault(); 184 | if (this._isGestureChange) 185 | { 186 | return; 187 | } 188 | let touches:TouchList = event.changedTouches; 189 | let touchLength:number = touches.length; 190 | for (let i:number = 0; i < touchLength; i++) 191 | { 192 | let touch:Touch = touches[i]; 193 | if (touch.identifier === this._identifier) 194 | { 195 | let target:HTMLElement = touch.target; 196 | let stageX:number = touch.pageX - target.offsetLeft; 197 | let stageY:number = touch.pageY - target.offsetTop; 198 | this.inputXY(stageX, stageY); 199 | break; 200 | } 201 | } 202 | } 203 | 204 | private _touchEndHandler(event:TouchEvent):void 205 | { 206 | if (this.isMouseDown) 207 | { 208 | event.preventDefault(); 209 | } 210 | this.isMouseDown = false; 211 | } 212 | 213 | private _gestureStartHandler(event:MSGestureEvent):void 214 | { 215 | this._isGestureChange = true; 216 | this.isMouseDown = true; 217 | this._oldRadius = this.radius; 218 | } 219 | 220 | private _gestureChangeHandler(event:MSGestureEvent):void 221 | { 222 | event.preventDefault(); 223 | event.stopImmediatePropagation(); 224 | this.radius = this._oldRadius + this.gestureRadiusFactor * this.radiusOffset * (1 - event.scale); 225 | if (this.radius < this.radiusMin) 226 | { 227 | this.radius = this.radiusMin; 228 | } 229 | } 230 | 231 | private _gestureEndHandler(event:MSGestureEvent):void 232 | { 233 | this._isGestureChange = false; 234 | this.isMouseDown = false; 235 | this._identifier = -1; 236 | } 237 | 238 | private inputXY(newX:number, newY:number):void 239 | { 240 | this._theta -= (newX - this._oldX) * 0.3; 241 | this._oldX = newX; 242 | this._phi -= (newY - this._oldY) * 0.3; 243 | this._oldY = newY; 244 | // 245 | if (this._phi < 20) 246 | { 247 | this._phi = 20; 248 | } 249 | else if (this._phi > 160) 250 | { 251 | this._phi = 160; 252 | } 253 | } 254 | 255 | private _updateCamera():void 256 | { 257 | let t:number = this._currentTheta * RoundCameraController.RAD; 258 | let p:number = this._currentPhi * RoundCameraController.RAD; 259 | 260 | let rsin:number = this.radius * Math.sin(p); 261 | this._camera.x = rsin * Math.sin(t) + this._target[0]; 262 | this._camera.z = rsin * Math.cos(t) + this._target[2]; 263 | this._camera.y = this.radius * Math.cos(p) + this._target[1]; 264 | 265 | this._camera.lookAt(this._target); 266 | } 267 | 268 | public upDate(factor:number = 0.1):void 269 | { 270 | this._currentTheta += (this._theta - this._currentTheta) * factor; 271 | this._currentPhi += (this._phi - this._currentPhi) * factor; 272 | 273 | this._updateCamera(); 274 | } 275 | 276 | public rotate(dTheta:number, dPhi:number):void 277 | { 278 | this._theta += dTheta; 279 | this._phi += dPhi; 280 | } 281 | 282 | public set(theta:number, phi:number):void 283 | { 284 | this._theta = theta; 285 | this._phi = phi; 286 | } 287 | } 288 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/Camera.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class Camera 6 | { 7 | public static DIRECTION:vec3 = vec3.fromValues(0.0, 0.0, 1.0); 8 | // 9 | private _cameraUP:vec3 = vec3.fromValues(0.0, 1.0, 0.0); 10 | // 11 | private _projectionMtx:mat4 = mat4.identity(mat4.create()); 12 | private _cameraMtx:mat4 = mat4.identity(mat4.create()); 13 | private _lookMtx:mat4 = mat4.identity(mat4.create()); 14 | // 15 | public x:number = 0.0; 16 | public y:number = 0.0; 17 | public z:number = 0.0; 18 | 19 | constructor(fov:number, aspect:number, zNear:number, zFar:number) 20 | { 21 | mat4.perspective(this._projectionMtx, fov, aspect, zNear, zFar); 22 | } 23 | 24 | public getCameraMtx():mat4 25 | { 26 | return this._cameraMtx; 27 | } 28 | 29 | public lookAt(point:vec3):void 30 | { 31 | mat4.identity(this._lookMtx); 32 | mat4.lookAt(this._lookMtx, vec3.fromValues(this.x, this.y, this.z), point, this._cameraUP); 33 | mat4.multiply(this._cameraMtx, this._projectionMtx, this._lookMtx); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/RenderingObject.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "./ShaderAttributeObject"; 2 | import {ShaderObject} from "./ShaderObject"; 3 | import {VertexAttributeObject} from "./VertexAttributeObject"; 4 | /** 5 | * @author Kentaro Kawakatsu 6 | */ 7 | export class RenderingObject 8 | { 9 | public context:WebGLRenderingContext; 10 | 11 | public vboList:VertexAttributeObject[]; 12 | public ibo:WebGLBuffer; 13 | 14 | public vboDataList:number[][]; 15 | public iboData:number[]; 16 | 17 | public shader:ShaderObject; 18 | 19 | constructor($context:WebGLRenderingContext) 20 | { 21 | this.context = $context; 22 | 23 | this.vboList = []; 24 | this.vboDataList = []; 25 | 26 | this.init(); 27 | } 28 | 29 | public init():void 30 | { 31 | } 32 | 33 | public attachShader($shader:ShaderObject):void 34 | { 35 | this.shader = $shader; 36 | } 37 | 38 | public bindVertexbuffer():void 39 | { 40 | const length:number = this.shader.attributeList.length; 41 | for (let i:number = 0; i < length; i++) 42 | { 43 | let attribute:ShaderAttributeObject = this.shader.attributeList[i]; 44 | if (attribute.location >= 0) 45 | { 46 | let vbo:VertexAttributeObject = this.getVertexBuffer(attribute.name); 47 | this.context.bindBuffer(this.context.ARRAY_BUFFER, vbo.buffer); 48 | this.context.enableVertexAttribArray(attribute.location); 49 | this.context.vertexAttribPointer(attribute.location, attribute.stride, this.context.FLOAT, false, vbo.byteStride, vbo.bufferOffset); 50 | } 51 | } 52 | } 53 | 54 | public getVertexBuffer(attributeName:string):VertexAttributeObject 55 | { 56 | const length:number = this.vboList.length; 57 | for (let i:number = 0; i < length; i++) 58 | { 59 | let attribute:VertexAttributeObject = this.vboList[i]; 60 | if (attribute.name === attributeName) 61 | { 62 | return attribute; 63 | } 64 | } 65 | return null; 66 | } 67 | 68 | public bindIndexbuffer():void 69 | { 70 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/RenderingTextureObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class RenderingTextureObject 5 | { 6 | public context:WebGLRenderingContext; 7 | 8 | public frameBuffer:WebGLFramebuffer; 9 | public renderBuffer:WebGLRenderbuffer; 10 | public texture:WebGLTexture; 11 | 12 | public width:number; 13 | public height:number; 14 | 15 | constructor($context:WebGLRenderingContext, $width:number, $height:number) 16 | { 17 | this.context = $context; 18 | this.width = $width; 19 | this.height = $height; 20 | this.init(); 21 | } 22 | 23 | public init():void 24 | { 25 | this.renderBuffer = this.context.createRenderbuffer(); 26 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, this.renderBuffer); 27 | this.context.renderbufferStorage(this.context.RENDERBUFFER, this.context.DEPTH_COMPONENT16, this.width, this.height); 28 | 29 | this.frameBuffer = this.context.createFramebuffer(); 30 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, this.frameBuffer); 31 | this.context.framebufferRenderbuffer(this.context.FRAMEBUFFER, this.context.DEPTH_ATTACHMENT, this.context.RENDERBUFFER, this.renderBuffer); 32 | 33 | this.texture = this.context.createTexture(); 34 | this.context.bindTexture(this.context.TEXTURE_2D, this.texture); 35 | this.context.texImage2D(this.context.TEXTURE_2D, 0, this.context.RGBA, this.width, this.height, 0, this.context.RGBA, this.context.UNSIGNED_BYTE, null); 36 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MAG_FILTER, this.context.LINEAR); 37 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MIN_FILTER, this.context.LINEAR); 38 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_S, this.context.CLAMP_TO_EDGE); 39 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_T, this.context.CLAMP_TO_EDGE); 40 | 41 | this.context.framebufferTexture2D(this.context.FRAMEBUFFER, this.context.COLOR_ATTACHMENT0, this.context.TEXTURE_2D, this.texture, 0); 42 | 43 | this.context.bindTexture(this.context.TEXTURE_2D, null); 44 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, null); 45 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, null); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/ShaderAttributeObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class ShaderAttributeObject 5 | { 6 | public name:string; 7 | public stride:number; 8 | public location:number; 9 | 10 | constructor($name:string, $stride:number) 11 | { 12 | this.name = $name; 13 | this.stride = $stride; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/ShaderObject.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "./ShaderAttributeObject"; 2 | import {UniformObject} from "./UniformObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class ShaderObject 7 | { 8 | public context:WebGLRenderingContext; 9 | 10 | public program:WebGLProgram; 11 | public vShader:WebGLShader; 12 | public fShader:WebGLShader; 13 | public uniformList:UniformObject[]; 14 | public attributeList:ShaderAttributeObject[]; 15 | 16 | public vShaderSource:string; 17 | public fShaderSource:string; 18 | 19 | constructor($context:WebGLRenderingContext) 20 | { 21 | this.context = $context; 22 | 23 | this.uniformList = []; 24 | this.attributeList = []; 25 | this.init(); 26 | } 27 | 28 | public init():void 29 | { 30 | 31 | } 32 | 33 | public createProgram():void 34 | { 35 | this.vShader = this.creatShader(this.vShaderSource, this.context.VERTEX_SHADER); 36 | this.fShader = this.creatShader(this.fShaderSource, this.context.FRAGMENT_SHADER); 37 | 38 | this.program = this.context.createProgram(); 39 | this.context.attachShader(this.program, this.vShader); 40 | this.context.attachShader(this.program, this.fShader); 41 | 42 | this.context.linkProgram(this.program); 43 | 44 | let i:number; 45 | let length:number; 46 | 47 | length = this.attributeList.length; 48 | for (i = 0; i < length; i++) 49 | { 50 | let attribute:ShaderAttributeObject = this.attributeList[i]; 51 | attribute.location = this.context.getAttribLocation(this.program, attribute.name); 52 | } 53 | 54 | length = this.uniformList.length; 55 | for (i = 0; i < length; i++) 56 | { 57 | let uniform:UniformObject = this.uniformList[i]; 58 | uniform.location = this.context.getUniformLocation(this.program, uniform.name); 59 | } 60 | } 61 | 62 | public bindShader():void 63 | { 64 | this.bindProgram(); 65 | this.bindUniform(); 66 | } 67 | 68 | public bindProgram():void 69 | { 70 | if (this.context.getProgramParameter(this.program, this.context.LINK_STATUS)) 71 | { 72 | this.context.useProgram(this.program); 73 | } 74 | else 75 | { 76 | console.log(this.context.getProgramInfoLog(this.program)); 77 | } 78 | } 79 | 80 | public bindUniform():void 81 | { 82 | const length:number = this.uniformList.length; 83 | for (let i:number = 0; i < length; i++) 84 | { 85 | let uniform:UniformObject = this.uniformList[i]; 86 | switch (uniform.type) 87 | { 88 | case UniformObject.TYPE_MATRIX: 89 | this.context.uniformMatrix4fv(uniform.location, false, uniform.matrix); 90 | break; 91 | case UniformObject.TYPE_VALUE: 92 | this.context.uniform1f(uniform.location, uniform.value); 93 | break; 94 | case UniformObject.TYPE_VECTOR3: 95 | this.context.uniform3fv(uniform.location, uniform.vector3); 96 | break; 97 | case UniformObject.TYPE_VECTOR4: 98 | this.context.uniform4fv(uniform.location, uniform.vector4); 99 | break; 100 | case UniformObject.TYPE_TEXTURE: 101 | this.context.uniform1i(uniform.location, uniform.value); 102 | this.context.activeTexture(this.context["TEXTURE" + uniform.value]); 103 | this.context.bindTexture(this.context.TEXTURE_2D, uniform.texture); 104 | break; 105 | default: 106 | break; 107 | } 108 | } 109 | } 110 | 111 | public creatShader(source:string, type:number):WebGLShader 112 | { 113 | let shader:WebGLShader = this.context.createShader(type); 114 | this.context.shaderSource(shader, source); 115 | this.context.compileShader(shader); 116 | 117 | if (this.context.getShaderParameter(shader, this.context.COMPILE_STATUS)) 118 | { 119 | return shader; 120 | } 121 | else 122 | { 123 | console.log(type === this.context.VERTEX_SHADER, this.context.getShaderInfoLog(shader)); 124 | return null; 125 | } 126 | } 127 | 128 | public getUniform(uniformName:string):UniformObject 129 | { 130 | const length:number = this.uniformList.length; 131 | for (let i:number = 0; i < length; i++) 132 | { 133 | let uniform:UniformObject = this.uniformList[i]; 134 | if (uniform.name === uniformName) 135 | { 136 | return uniform; 137 | } 138 | } 139 | return null; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/TextureObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class TextureObject 5 | { 6 | public context:WebGLRenderingContext; 7 | 8 | public texture:WebGLTexture; 9 | 10 | public image:HTMLImageElement; 11 | public height:number; 12 | 13 | constructor($context:WebGLRenderingContext) 14 | { 15 | this.context = $context; 16 | this.init(); 17 | } 18 | 19 | public init():void 20 | { 21 | this.texture = this.context.createTexture(); 22 | } 23 | 24 | public setImage(image:HTMLImageElement):void 25 | { 26 | this.image = image; 27 | this.context.bindTexture(this.context.TEXTURE_2D, this.texture); 28 | this.context.texImage2D(this.context.TEXTURE_2D, 0, this.context.RGBA, this.context.RGBA, this.context.UNSIGNED_BYTE, image); 29 | this.context.generateMipmap(this.context.TEXTURE_2D); 30 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MIN_FILTER, this.context.LINEAR_MIPMAP_LINEAR); 31 | this.context.bindTexture(this.context.TEXTURE_2D, null); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/UniformObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3, vec4} from "gl-matrix"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class UniformObject 6 | { 7 | public static TYPE_VALUE:number = 0; 8 | public static TYPE_VECTOR3:number = 1; 9 | public static TYPE_VECTOR4:number = 2; 10 | public static TYPE_MATRIX:number = 3; 11 | public static TYPE_TEXTURE:number = 4; 12 | 13 | public type:number; 14 | public name:string; 15 | public location:WebGLUniformLocation; 16 | public value:number; 17 | public vector3:vec3; 18 | public vector4:vec4; 19 | public matrix:mat4; 20 | public texture:WebGLTexture; 21 | 22 | constructor($type:number, $name:string) 23 | { 24 | this.name = $name; 25 | this.type = $type; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/engine/VertexAttributeObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class VertexAttributeObject 5 | { 6 | public name:string; 7 | public byteStride:number = 0; 8 | public bufferOffset:number = 0; 9 | public buffer:WebGLBuffer; 10 | 11 | constructor($name:string) 12 | { 13 | this.name = $name; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/object/OrthoScreenObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | import {RenderingObject} from "../engine/RenderingObject"; 3 | import {VertexAttributeObject} from "../engine/VertexAttributeObject"; 4 | /** 5 | * @author Kentaro Kawakatsu 6 | */ 7 | export class OrthoScreenObject extends RenderingObject 8 | { 9 | public screenMatrix:mat4; 10 | 11 | constructor($context:WebGLRenderingContext) 12 | { 13 | super($context); 14 | } 15 | 16 | public init():void 17 | { 18 | let vPosition:number[] = [ 19 | -1.0, 1.0, 0.0, 20 | 1.0, 1.0, 0.0, 21 | -1.0, -1.0, 0.0, 22 | 1.0, -1.0, 0.0 23 | ]; 24 | this.iboData = [ 25 | 0, 1, 2, 26 | 3, 2, 1 27 | ]; 28 | 29 | let attribute:VertexAttributeObject; 30 | let vbo:WebGLBuffer; 31 | 32 | vbo = this.context.createBuffer(); 33 | this.context.bindBuffer(this.context.ARRAY_BUFFER, vbo); 34 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(vPosition), this.context.STATIC_DRAW); 35 | this.vboDataList[0] = vPosition; 36 | attribute = new VertexAttributeObject("position"); 37 | attribute.buffer = vbo; 38 | this.vboList[0] = attribute; 39 | 40 | this.ibo = this.context.createBuffer(); 41 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 42 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 43 | 44 | // 45 | let viewMtx:mat4 = mat4.identity(mat4.create()); 46 | let projectionMtx:mat4 = mat4.identity(mat4.create()); 47 | this.screenMatrix = mat4.identity(mat4.create()); 48 | mat4.lookAt(viewMtx, vec3.fromValues(0.0, 0.0, 0.5), vec3.fromValues(0.0, 0.0, 0.0), vec3.fromValues(0.0, 1.0, 0.0)); 49 | mat4.ortho(projectionMtx, -1.0, 1.0, 1.0, -1.0, 0.1, 1); 50 | mat4.multiply(this.screenMatrix, projectionMtx, viewMtx); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/object/SceneObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | import {RenderingObject} from "../engine/RenderingObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class SceneObject extends RenderingObject 7 | { 8 | private _mMatrix:mat4 = mat4.identity(mat4.create()); 9 | private _translateVec:vec3 = vec3.create(); 10 | private _scaleVec:vec3 = vec3.create(); 11 | 12 | public x:number = 0.0; 13 | public y:number = 0.0; 14 | public z:number = 0.0; 15 | public scaleX:number = 1.0; 16 | public scaleY:number = 1.0; 17 | public scaleZ:number = 1.0; 18 | public rotationX:number = 0.0; 19 | public rotationY:number = 0.0; 20 | public rotationZ:number = 0.0; 21 | 22 | constructor($context:WebGLRenderingContext) 23 | { 24 | super($context); 25 | } 26 | 27 | public getModelMtx():mat4 28 | { 29 | mat4.identity(this._mMatrix); 30 | vec3.set(this._translateVec, this.x, this.y, this.z); 31 | mat4.translate(this._mMatrix, this._mMatrix, this._translateVec); 32 | mat4.rotateZ(this._mMatrix, this._mMatrix, this.rotationZ); 33 | mat4.rotateY(this._mMatrix, this._mMatrix, this.rotationY); 34 | mat4.rotateX(this._mMatrix, this._mMatrix, this.rotationX); 35 | vec3.set(this._scaleVec, this.scaleX, this.scaleY, this.scaleZ); 36 | mat4.scale(this._mMatrix, this._mMatrix, this._scaleVec); 37 | return this._mMatrix; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/primitive/Plane.ts: -------------------------------------------------------------------------------- 1 | import {Primitive} from "./Primitive"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class Plane extends Primitive 6 | { 7 | public width:number; 8 | public height:number; 9 | public segmentsW:number; 10 | public segmentsH:number; 11 | 12 | constructor($context:WebGLRenderingContext, width:number, height:number, segmentsW:number, segmentsH:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 13 | { 14 | super($context); 15 | 16 | this.width = width; 17 | this.height = height; 18 | this.segmentsW = segmentsW; 19 | this.segmentsH = segmentsH; 20 | this.useAttribute = useAttribute; 21 | 22 | this.setData(); 23 | } 24 | 25 | protected setData():void 26 | { 27 | let halfWidth:number = this.width / 2.0; 28 | let halfHeight:number = this.height / 2.0; 29 | 30 | let segmentWidth:number = this.width / this.segmentsW; 31 | let segmentHeight:number = this.height / this.segmentsH; 32 | 33 | let wVertices:number = this.segmentsW + 1; 34 | let hVertices:number = this.segmentsH + 1; 35 | 36 | let positionList:number[] = []; 37 | let normalList:number[] = []; 38 | let uvList:number[] = []; 39 | let indexList:number[] = []; 40 | 41 | for (let j:number = 0; j < hVertices; j++) 42 | { 43 | let posY:number = segmentHeight * j - halfHeight; 44 | let v:number = 1.0 - (j / this.segmentsH); 45 | 46 | for (let i:number = 0; i < wVertices; i++) 47 | { 48 | positionList.push(segmentWidth * i - halfWidth, -posY, 0.0); 49 | normalList.push(0.0, 0.0, 1.0); 50 | uvList.push(i / this.segmentsW, v); 51 | } 52 | } 53 | 54 | this.positionList = positionList; 55 | this.normalList = normalList; 56 | this.uvList = uvList; 57 | 58 | this.setAttribute(); 59 | 60 | for (let j:number = 0; j < this.segmentsH; j++) 61 | { 62 | let j0:number = wVertices * j; 63 | let j1:number = wVertices * (j + 1); 64 | 65 | for (let i:number = 0; i < this.segmentsW; i++) 66 | { 67 | let i0:number = i + j0; 68 | let i1:number = i + j1; 69 | let i2:number = i + 1 + j1; 70 | let i3:number = i + 1 + j0; 71 | 72 | indexList.push(i0, i1, i3); 73 | indexList.push(i1, i2, i3); 74 | } 75 | } 76 | 77 | this.iboData = indexList; 78 | 79 | this.ibo = this.context.createBuffer(); 80 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 81 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 82 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/primitive/Primitive.ts: -------------------------------------------------------------------------------- 1 | import {VertexAttributeObject} from "../engine/VertexAttributeObject"; 2 | import {SceneObject} from "../object/SceneObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Primitive extends SceneObject 7 | { 8 | public static ATTRIBUTE_USE_POSITION:number = 0x01; 9 | public static ATTRIBUTE_USE_NOMRAL:number = 0x02; 10 | public static ATTRIBUTE_USE_UV:number = 0x04; 11 | 12 | public numVertices:number; 13 | public numIndices:number; 14 | 15 | public positionList:number[]; 16 | public normalList:number[]; 17 | public uvList:number[]; 18 | 19 | public useAttribute:number; 20 | 21 | constructor($context:WebGLRenderingContext) 22 | { 23 | super($context); 24 | } 25 | 26 | public init():void 27 | { 28 | 29 | } 30 | 31 | protected setData():void 32 | { 33 | 34 | } 35 | 36 | public setAttribute():void 37 | { 38 | let usePosition:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_POSITION) !== 0x0; 39 | let useNormal:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_NOMRAL) !== 0x0; 40 | let useUV:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_UV) !== 0x0; 41 | 42 | let attribute:VertexAttributeObject; 43 | 44 | if (usePosition) 45 | { 46 | attribute = new VertexAttributeObject("position"); 47 | attribute.buffer = this.context.createBuffer(); 48 | this.vboList.push(attribute); 49 | 50 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 51 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.positionList), this.context.STATIC_DRAW); 52 | } 53 | 54 | if (useNormal) 55 | { 56 | attribute = new VertexAttributeObject("normal"); 57 | attribute.buffer = this.context.createBuffer(); 58 | this.vboList.push(attribute); 59 | 60 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 61 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.normalList), this.context.STATIC_DRAW); 62 | } 63 | 64 | if (useUV) 65 | { 66 | attribute = new VertexAttributeObject("uv"); 67 | attribute.buffer = this.context.createBuffer(); 68 | this.vboList.push(attribute); 69 | 70 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 71 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.uvList), this.context.STATIC_DRAW); 72 | } 73 | 74 | this.context.bindBuffer(this.context.ARRAY_BUFFER, null); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/primitive/Sphere.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import {Primitive} from "./Primitive"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Sphere extends Primitive 7 | { 8 | public radius:number; 9 | public segmentsW:number; 10 | public segmentsH:number; 11 | 12 | constructor($context:WebGLRenderingContext, radius:number, segmentsW:number, segmentsH:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 13 | { 14 | super($context); 15 | 16 | this.radius = radius; 17 | this.segmentsW = segmentsW; 18 | this.segmentsH = segmentsH; 19 | this.useAttribute = useAttribute; 20 | 21 | this.setData(); 22 | } 23 | 24 | protected setData():void 25 | { 26 | let vec:vec3 = vec3.create(); 27 | let grid:number[][] = []; 28 | let idx:number = 0; 29 | 30 | let positionList:number[] = []; 31 | let normalList:number[] = []; 32 | let uvList:number[] = []; 33 | 34 | for (let j:number = 0; j <= this.segmentsH; j++) 35 | { 36 | let verticesRow:number[] = []; 37 | 38 | let v:number = j / this.segmentsH; 39 | let theta:number = v * Math.PI; 40 | 41 | for (let i:number = 0; i <= this.segmentsW; i++) 42 | { 43 | let u:number = i / this.segmentsW; 44 | let phi:number = u * 2 * Math.PI; 45 | 46 | vec[0] = -this.radius * Math.cos(phi) * Math.sin(theta); 47 | vec[1] = this.radius * Math.cos(theta); 48 | vec[2] = this.radius * Math.sin(phi) * Math.sin(theta); 49 | 50 | positionList.push(vec[0], vec[1], vec[2]); 51 | vec3.normalize(vec, vec); 52 | normalList.push(vec[0], vec[1], vec[2]); 53 | uvList.push(u, 1 - v); 54 | 55 | verticesRow.push(idx); 56 | idx += 1; 57 | } 58 | grid.push(verticesRow); 59 | } 60 | 61 | this.positionList = positionList; 62 | this.normalList = normalList; 63 | this.uvList = uvList; 64 | 65 | this.setAttribute(); 66 | 67 | let indexList:number[] = []; 68 | 69 | for (let j:number = 0; j < this.segmentsH; j++) 70 | { 71 | for (let i:number = 0; i < this.segmentsW; i++) 72 | { 73 | let i0:number = grid[j][i + 1]; 74 | let i1:number = grid[j][i]; 75 | let i2:number = grid[j + 1][i]; 76 | let i3:number = grid[j + 1][i + 1]; 77 | 78 | if (j !== 0) 79 | { 80 | indexList.push(i0, i1, i3); 81 | } 82 | 83 | if (j !== this.segmentsH - 1) 84 | { 85 | indexList.push(i1, i2, i3); 86 | } 87 | } 88 | } 89 | 90 | this.iboData = indexList; 91 | 92 | this.ibo = this.context.createBuffer(); 93 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 94 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 95 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/primitive/Torus.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import {Primitive} from "./Primitive"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Torus extends Primitive 7 | { 8 | public radius:number; 9 | public tube:number; 10 | public segmentsR:number; 11 | public segmentsT:number; 12 | 13 | constructor($context:WebGLRenderingContext, radius:number, tube:number, segmentsR:number, segmentsT:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 14 | { 15 | super($context); 16 | 17 | this.radius = radius; 18 | this.tube = tube; 19 | this.segmentsR = segmentsR; 20 | this.segmentsT = segmentsT; 21 | this.useAttribute = useAttribute; 22 | 23 | this.setData(); 24 | } 25 | 26 | protected setData():void 27 | { 28 | let vec:vec3 = vec3.create(); 29 | 30 | let positionList:number[] = []; 31 | let normalList:number[] = []; 32 | let uvList:number[] = []; 33 | let indexList:number[] = []; 34 | 35 | for (let j:number = 0; j <= this.segmentsR; j++) 36 | { 37 | let vUnit:number = j / this.segmentsR; 38 | let v:number = vUnit * Math.PI * 2; 39 | 40 | for (let i:number = 0; i <= this.segmentsT; i++) 41 | { 42 | let uUnit:number = i / this.segmentsT; 43 | let u:number = uUnit * Math.PI * 2; 44 | 45 | let cosU:number = Math.cos(u); 46 | let sinU:number = Math.sin(u); 47 | let cosV:number = Math.cos(v); 48 | 49 | let rr:number = this.radius + this.tube * cosV; 50 | 51 | vec[0] = rr * cosU; 52 | vec[1] = rr * sinU; 53 | vec[2] = this.tube * Math.sin(v); 54 | 55 | positionList.push(vec[0], vec[1], vec[2]); 56 | 57 | vec[0] -= this.radius * cosU; 58 | vec[1] -= this.radius * sinU; 59 | vec3.normalize(vec, vec); 60 | normalList.push(vec[0], vec[1], vec[2]); 61 | 62 | uvList.push(uUnit, vUnit); 63 | } 64 | } 65 | 66 | this.positionList = positionList; 67 | this.normalList = normalList; 68 | this.uvList = uvList; 69 | 70 | this.setAttribute(); 71 | 72 | for (let j:number = 1; j <= this.segmentsR; j++) 73 | { 74 | for (let i:number = 1; i <= this.segmentsT; i++) 75 | { 76 | let seg:number = this.segmentsT + 1; 77 | 78 | let i0:number = seg * j + i - 1; 79 | let i1:number = seg * (j - 1) + i - 1; 80 | let i2:number = seg * (j - 1) + i; 81 | let i3:number = seg * j + i; 82 | 83 | indexList.push(i0, i1, i3); 84 | indexList.push(i1, i2, i3); 85 | } 86 | } 87 | 88 | this.iboData = indexList; 89 | 90 | this.ibo = this.context.createBuffer(); 91 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 92 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 93 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/myLib/webgl/utils/WebGLUtil.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class WebGLUtil 5 | { 6 | 7 | public static init():void 8 | { 9 | 10 | } 11 | 12 | public static supportsWebGL():boolean 13 | { 14 | try 15 | { 16 | return !!WebGLRenderingContext && (!!document.createElement("canvas").getContext("webgl") || !!document.createElement("canvas").getContext("experimental-webgl")); 17 | } catch (e) 18 | { 19 | return false; 20 | } 21 | } 22 | 23 | public static getPowerOf2(w:number, h:number):any 24 | { 25 | let ww:number = w; 26 | let hh:number = h; 27 | if (!WebGLUtil.isPowerOfTwo(w)) 28 | { 29 | ww = WebGLUtil.nextHighestPowerOfTwo(w); 30 | } 31 | if (!WebGLUtil.isPowerOfTwo(h)) 32 | { 33 | hh = WebGLUtil.nextHighestPowerOfTwo(h); 34 | } 35 | return {w:ww, h:hh}; 36 | } 37 | 38 | private static isPowerOfTwo(value:number):boolean 39 | { 40 | return (value & (value - 1)) === 0; 41 | } 42 | 43 | private static nextHighestPowerOfTwo(value:number):number 44 | { 45 | --value; 46 | for (let i:number = 1; i < 32; i <<= 1) 47 | { 48 | value = value | value >> i; 49 | } 50 | return value + 1; 51 | } 52 | 53 | constructor() 54 | { 55 | 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/project/GUIPanel.ts: -------------------------------------------------------------------------------- 1 | import {GUI} from "dat-gui"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class GUIPanel 6 | { 7 | public num:number; 8 | public wireframe:boolean; 9 | 10 | constructor() 11 | { 12 | this.num = 1000; 13 | this.wireframe = false; 14 | } 15 | 16 | public setGUITitle(gui:GUI, propertyName:string, title:string) 17 | { 18 | let propertyList:NodeListOf = gui.domElement.getElementsByClassName("property-name"); 19 | let length:number = propertyList.length; 20 | for (let i:number = 0; i < length; i++) 21 | { 22 | let element:Element = propertyList[i]; 23 | if (element.innerHTML === propertyName) 24 | { 25 | element.innerHTML = title; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/project/InstanceAttributeObject.ts: -------------------------------------------------------------------------------- 1 | import {VertexAttributeObject} from "../myLib/webgl/engine/VertexAttributeObject"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class InstanceAttributeObject extends VertexAttributeObject 6 | { 7 | public divisor:number = 1; 8 | 9 | constructor($name:string) 10 | { 11 | super($name); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/project/InstanceProperty.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class InstanceProperty 6 | { 7 | private _mMatrix:mat4 = mat4.identity(mat4.create()); 8 | 9 | public x:number = 0.0; 10 | public y:number = 0.0; 11 | public z:number = 0.0; 12 | public scaleX:number = 1.0; 13 | public scaleY:number = 1.0; 14 | public scaleZ:number = 1.0; 15 | public rotationX:number = 0.0; 16 | public rotationY:number = 0.0; 17 | public rotationZ:number = 0.0; 18 | 19 | public xRotationVelocity:number; 20 | public zRotationVelocity:number; 21 | 22 | constructor() 23 | { 24 | } 25 | 26 | public getModelMtx():mat4 27 | { 28 | mat4.identity(this._mMatrix); 29 | mat4.translate(this._mMatrix, this._mMatrix, vec3.fromValues(this.x, this.y, this.z)); 30 | mat4.rotateZ(this._mMatrix, this._mMatrix, this.rotationZ); 31 | mat4.rotateY(this._mMatrix, this._mMatrix, this.rotationY); 32 | mat4.rotateX(this._mMatrix, this._mMatrix, this.rotationX); 33 | mat4.scale(this._mMatrix, this._mMatrix, vec3.fromValues(this.scaleX, this.scaleY, this.scaleZ)); 34 | return this._mMatrix; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/project/RGB.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class RGB 5 | { 6 | public r:number = 0; 7 | public g:number = 0; 8 | public b:number = 0; 9 | 10 | constructor(r:number, g:number, b:number) 11 | { 12 | this.r = r; 13 | this.g = g; 14 | this.b = b; 15 | } 16 | 17 | public static createFromHSV(h:number, s:number, v:number):RGB 18 | { 19 | if (s > 1.0) 20 | { 21 | s = 1.0; 22 | } 23 | 24 | if (v > 1.0) 25 | { 26 | v = 1.0; 27 | } 28 | 29 | let th:number = h % 360; 30 | let i:number = Math.floor(th / 60); 31 | let f:number = th / 60 - i; 32 | let m:number = v * (1 - s); 33 | let n:number = v * (1 - s * f); 34 | let k:number = v * (1 - s * (1 - f)); 35 | 36 | let color:RGB; 37 | if (s === 0) 38 | { 39 | color = new RGB(v, v, v); 40 | } 41 | else 42 | { 43 | switch (i) 44 | { 45 | case 0: 46 | { 47 | color = new RGB(v, k, m); 48 | break; 49 | } 50 | case 1: 51 | { 52 | color = new RGB(n, v, m); 53 | break; 54 | } 55 | case 2: 56 | { 57 | color = new RGB(m, v, k); 58 | break; 59 | } 60 | case 3: 61 | { 62 | color = new RGB(m, n, v); 63 | break; 64 | } 65 | case 4: 66 | { 67 | color = new RGB(k, m, v); 68 | break; 69 | } 70 | case 5: 71 | { 72 | color = new RGB(v, m, n); 73 | break; 74 | } 75 | } 76 | } 77 | return color; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /geometry_instancing/src/ts/project/Shader.ts: -------------------------------------------------------------------------------- 1 | import {vec3, vec4} from "gl-matrix"; 2 | import {ShaderAttributeObject} from "../myLib/webgl/engine/ShaderAttributeObject"; 3 | import {ShaderObject} from "../myLib/webgl/engine/ShaderObject"; 4 | import {UniformObject} from "../myLib/webgl/engine/UniformObject"; 5 | /** 6 | * @author Kentaro Kawakatsu 7 | */ 8 | export class Shader extends ShaderObject 9 | { 10 | public init():void 11 | { 12 | // language=GLSL 13 | this.vShaderSource = `#version 300 es 14 | in vec3 position; 15 | in vec3 normal; 16 | in mat4 instanceMMatrix; 17 | in vec4 instanceColor; 18 | uniform mat4 vpMatrix; 19 | uniform vec4 ambientColor; 20 | uniform vec3 lightDirection; 21 | uniform vec4 lightColor; 22 | uniform float lightIntensity; 23 | 24 | out vec4 vColor; 25 | 26 | void main(void) 27 | { 28 | vec3 worldNormal = normalize(instanceMMatrix * vec4(normal, 0.0)).xyz; 29 | float diffuse = clamp(dot(worldNormal, lightDirection), 0.0, 1.0); 30 | vColor = instanceColor * clamp(ambientColor + lightColor * vec4(vec3(lightIntensity * diffuse), 1.0), 0.0, 1.0); 31 | gl_Position = (vpMatrix * instanceMMatrix) * vec4(position, 1.0); 32 | } 33 | `; 34 | 35 | // language=GLSL 36 | this.fShaderSource = `#version 300 es 37 | precision mediump float; 38 | in vec4 vColor; 39 | out vec4 outColor; 40 | 41 | void main(void) 42 | { 43 | outColor = vColor; 44 | } 45 | `; 46 | 47 | let uniform:UniformObject; 48 | uniform = new UniformObject(UniformObject.TYPE_MATRIX, "vpMatrix"); 49 | this.uniformList[0] = uniform; 50 | 51 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "ambientColor"); 52 | uniform.vector4 = vec4.fromValues(0.0, 0.0, 0.0, 1.0); 53 | this.uniformList[1] = uniform; 54 | 55 | uniform = new UniformObject(UniformObject.TYPE_VECTOR3, "lightDirection"); 56 | uniform.vector3 = vec3.fromValues(1.0, 0.0, 0.0); 57 | this.uniformList[2] = uniform; 58 | 59 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "lightColor"); 60 | uniform.vector4 = vec4.fromValues(1.0, 1.0, 1.0, 1.0); 61 | this.uniformList[3] = uniform; 62 | 63 | uniform = new UniformObject(UniformObject.TYPE_VALUE, "lightIntensity"); 64 | uniform.value = 1.0; 65 | this.uniformList[4] = uniform; 66 | 67 | let attribute:ShaderAttributeObject; 68 | attribute = new ShaderAttributeObject("position", 3); 69 | this.attributeList[0] = attribute; 70 | 71 | attribute = new ShaderAttributeObject("normal", 3); 72 | this.attributeList[1] = attribute; 73 | 74 | attribute = new ShaderAttributeObject("instanceMMatrix", 16); 75 | this.attributeList[2] = attribute; 76 | 77 | attribute = new ShaderAttributeObject("instanceColor", 4); 78 | this.attributeList[3] = attribute; 79 | 80 | this.createProgram(); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /geometry_instancing/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "lib": [ 5 | "dom", 6 | "es2015.promise", 7 | "es5" 8 | ], 9 | "target": "es5", 10 | "noImplicitAny": false, 11 | "sourceMap": false 12 | } 13 | } -------------------------------------------------------------------------------- /geometry_instancing/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "indent": [ 9 | true, 10 | "spaces" 11 | ], 12 | "align": [ 13 | true, 14 | "parameters", 15 | "statements" 16 | ], 17 | "semicolon": true, 18 | "no-consecutive-blank-lines": true, 19 | "no-duplicate-variable": true, 20 | "no-eval": true, 21 | "member-access": true, 22 | "curly": true, 23 | "jsdoc-format": true, 24 | "no-internal-module": true, 25 | "no-string-literal": true, 26 | "no-trailing-whitespace": true, 27 | "no-var-requires": true, 28 | "no-var-keyword": true, 29 | "one-line": [ 30 | true, 31 | "check-whitespace" 32 | ], 33 | "quotemark": [ 34 | true, 35 | "double" 36 | ], 37 | "triple-equals": [ 38 | true, 39 | "allow-null-check" 40 | ], 41 | "typedef": [ 42 | true, 43 | "call-signature", 44 | "parameter", 45 | "property-declaration", 46 | "variable-declaration", 47 | "member-variable-declaration" 48 | ], 49 | "typedef-whitespace": [ 50 | true, 51 | { 52 | "call-signature": "nospace", 53 | "index-signature": "nospace", 54 | "parameter": "nospace", 55 | "property-declaration": "nospace", 56 | "variable-declaration": "nospace" 57 | }, 58 | { 59 | "call-signature": "nospace", 60 | "index-signature": "nospace", 61 | "parameter": "nospace", 62 | "property-declaration": "nospace", 63 | "variable-declaration": "nospace" 64 | } 65 | ], 66 | "variable-name": [ 67 | true, 68 | "ban-keywords" 69 | ], 70 | "whitespace": [ 71 | true, 72 | "check-branch", 73 | "check-decl", 74 | "check-operator", 75 | "check-separator", 76 | "check-typecast" 77 | ] 78 | } 79 | } -------------------------------------------------------------------------------- /geometry_instancing/webpack.config.js: -------------------------------------------------------------------------------- 1 | // ビルド設定ファイル 2 | const buidConfig = require("./build_config"); 3 | 4 | const entry = {}; 5 | 6 | /** webpackの設定ファイルです。 */ 7 | let webpackConfig = { 8 | entry: buidConfig.tsEntryFiles, 9 | output: { 10 | filename: "[name].js" 11 | }, 12 | devtool: "source-map", 13 | resolve: { 14 | extensions: ["*", ".js", ".ts"] 15 | }, 16 | module: { 17 | loaders: [ 18 | {test: /\.ts$/, loader: 'ts-loader'} 19 | ] 20 | } 21 | }; 22 | 23 | module.exports = webpackConfig; 24 | -------------------------------------------------------------------------------- /multiple_render_targets/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /multiple_render_targets/build_config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ビルドの設定ファイル 3 | * 4 | * @author ICS-Kano 5 | */ 6 | /** ソースフォルダ */ 7 | const SRC_FOLDER = "./src"; 8 | 9 | /** TypeScriptフォルダ */ 10 | const TS_FOLDER = `${SRC_FOLDER}/ts`; 11 | /** TypeScriptファイルのエントリーファイル */ 12 | const TS_ENTRY_FILES_NAME = { 13 | "script": "Main.ts" 14 | }; 15 | 16 | /** 変換後のJS格納フォルダ */ 17 | const JS_FOLDER = `${SRC_FOLDER}/js`; 18 | 19 | /** リリースファイルの格納フォルダ */ 20 | const DIST_FOLDER = "dist"; 21 | 22 | /** リリース対象ファイルファイルの格納フォルダ */ 23 | const DIST_FILES = [ 24 | `${SRC_FOLDER}/**/*.html`, 25 | `${JS_FOLDER}/**/*.js` 26 | ]; 27 | 28 | // TypeScrptのエントリーファイルの作成 29 | let tsEntryFiles = {}; 30 | for (let tsKey in TS_ENTRY_FILES_NAME) { 31 | const key = tsKey; 32 | const tsFile = `${TS_FOLDER}/${TS_ENTRY_FILES_NAME[tsKey]}`; 33 | tsEntryFiles[key] = tsFile; 34 | } 35 | 36 | // moduleとしてexportする 37 | module.exports = { 38 | srcFolder: SRC_FOLDER, 39 | tsFolder: TS_FOLDER, 40 | tsEntryFiles: tsEntryFiles, 41 | jsFolder: JS_FOLDER, 42 | distFolder: DIST_FOLDER, 43 | distFiles: DIST_FILES 44 | }; -------------------------------------------------------------------------------- /multiple_render_targets/gulp/taskName.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Gulpのタスク名 3 | * 4 | * @author ICS-Kano 5 | */ 6 | module.exports = { 7 | "start": "start", 8 | "tsCompile": "tsCompile", 9 | "tsLint": "tsLint" 10 | }; 11 | -------------------------------------------------------------------------------- /multiple_render_targets/gulp/tasks/start.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ローカルサーバーの起動、ファイルウォッチ用のタスク 3 | * 4 | * @author ICS-Kano 5 | */ 6 | // 設定ファイル 7 | const config = require("../../build_config"); 8 | const taskName = require("../taskName"); 9 | const browserSync = require("browser-sync"); 10 | 11 | require("./tsCompile"); 12 | require("./tsLint"); 13 | 14 | const gulp = require("gulp"); 15 | 16 | /** 17 | * ローカルサーバーのタスク設定 18 | */ 19 | gulp.task(taskName.start, 20 | gulp.series( 21 | gulp.parallel( 22 | taskName.tsLint, 23 | taskName.tsCompile 24 | ), 25 | () => { 26 | startWatchTasks(); 27 | } 28 | ) 29 | ); 30 | 31 | /** 32 | * ウォッチタスクを開始します。 33 | */ 34 | function startWatchTasks() { 35 | browserSync({ 36 | server: { 37 | baseDir: "src" // ルートとなるディレクトリを指定 38 | } 39 | }); 40 | 41 | // jsファイルを監視 42 | gulp.watch(`${config.jsFolder}/**/*.js`, (done) => { 43 | // ファイルに変更があれば同期しているブラウザをリロード 44 | browserSync.reload(); 45 | // リロード終了時に実行 46 | done(); 47 | }); 48 | 49 | // TypeScriptファイルのウォッチ 50 | gulp.watch(`${config.tsFolder}/**/*.ts`, 51 | gulp.parallel( 52 | taskName.tsLint, // Lint 53 | taskName.tsCompile // コンパイル 54 | ) 55 | ); 56 | } -------------------------------------------------------------------------------- /multiple_render_targets/gulp/tasks/tsCompile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TypeScriptのコンパイルタスク 3 | * 4 | * @author ICS-Kano 5 | */ 6 | 7 | const config = require("../../build_config"); 8 | const webpackConfig = require('../../webpack.config.js'); 9 | 10 | const taskName = require("../taskName"); 11 | 12 | const gulp = require("gulp"); 13 | const plumber = require("gulp-plumber"); 14 | const webpackStream = require("webpack-stream"); 15 | const webpack = require("webpack"); 16 | 17 | const sourcemaps = require("gulp-sourcemaps"); 18 | 19 | // TODO:webpak 2 fix 20 | 21 | gulp.task(taskName.tsCompile, () => { 22 | return sourcemaps.init() 23 | .pipe(plumber()) 24 | .pipe(webpackStream(webpackConfig)) 25 | .pipe(sourcemaps.write("./")) 26 | .pipe(gulp.dest(config.jsFolder)) 27 | }); 28 | -------------------------------------------------------------------------------- /multiple_render_targets/gulp/tasks/tsLint.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TypeScriptのLintチェック 3 | * 4 | * @author ICS-Kano 5 | */ 6 | const config = require("../../build_config"); 7 | const taskName = require("../taskName"); 8 | 9 | const gulp = require("gulp"); 10 | const tslint = require("gulp-tslint"); 11 | const notify = require("gulp-notify"); 12 | const plumber = require("gulp-plumber"); 13 | 14 | gulp.task(taskName.tsLint, () => { 15 | return gulp.src(`${config.tsFolder}**/*.ts`) 16 | .pipe(plumber({ 17 | errorHandler: function (err) { 18 | notify.onError(`ts Error:${err}`); 19 | this.emit("end"); 20 | } 21 | })) 22 | .pipe(tslint({ 23 | formatter: "verbose", 24 | configuration: "./tslint.json" 25 | })) 26 | .pipe(tslint.report()); 27 | }); 28 | -------------------------------------------------------------------------------- /multiple_render_targets/gulpfile.js: -------------------------------------------------------------------------------- 1 | const requireDir = require("require-dir"); 2 | requireDir("./gulp", {recurse: true}); 3 | -------------------------------------------------------------------------------- /multiple_render_targets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl2-demo-mrt", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "", 6 | "scripts": { 7 | "gulp": "gulp", 8 | "webpack": "webpack", 9 | "start": "gulp start", 10 | "tsc": "gulp tsCompile", 11 | "tslint": "gulp tsLint" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@types/dat-gui": "^0.6.2", 18 | "@types/tween.js": "16.9.0", 19 | "browser-sync": "^2.18.8", 20 | "gl-matrix": "^2.4.0", 21 | "gulp": "github:gulpjs/gulp#4.0", 22 | "gulp-notify": "^3.2.0", 23 | "gulp-plumber": "^1.1.0", 24 | "gulp-sourcemaps": "^2.4.0", 25 | "gulp-tslint": "^8.1.2", 26 | "require-dir": "^0.3.1", 27 | "ts-loader": "^3.4.0", 28 | "tslint": "^5.9.1", 29 | "typescript": "^2.2.1", 30 | "webpack": "^3.10.0", 31 | "webpack-stream": "^4.0.0" 32 | }, 33 | "dependencies": { 34 | "@tweenjs/tween.js": "^17.2.0", 35 | "@types/dat-gui": "^0.6.2", 36 | "@types/gl-matrix": "^2.4.0", 37 | "@types/stats.js": "^0.17.0", 38 | "@types/webgl2": "0.0.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /multiple_render_targets/src/css/style.css: -------------------------------------------------------------------------------- 1 | #container { 2 | position: relative; 3 | } 4 | .guiStyle { 5 | position: absolute; 6 | top: 0; 7 | right: 0; 8 | } 9 | -------------------------------------------------------------------------------- /multiple_render_targets/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL 2.0 demo - Multiple Render Targets 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 |
22 |

※このデモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。

23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /multiple_render_targets/src/js/stats.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global.Stats = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | /** 8 | * @author mrdoob / http://mrdoob.com/ 9 | */ 10 | 11 | var Stats = function () { 12 | 13 | var mode = 0; 14 | 15 | var container = document.createElement( 'div' ); 16 | container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; 17 | container.addEventListener( 'click', function ( event ) { 18 | 19 | event.preventDefault(); 20 | showPanel( ++ mode % container.children.length ); 21 | 22 | }, false ); 23 | 24 | // 25 | 26 | function addPanel( panel ) { 27 | 28 | container.appendChild( panel.dom ); 29 | return panel; 30 | 31 | } 32 | 33 | function showPanel( id ) { 34 | 35 | for ( var i = 0; i < container.children.length; i ++ ) { 36 | 37 | container.children[ i ].style.display = i === id ? 'block' : 'none'; 38 | 39 | } 40 | 41 | mode = id; 42 | 43 | } 44 | 45 | // 46 | 47 | var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0; 48 | 49 | var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) ); 50 | var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) ); 51 | 52 | if ( self.performance && self.performance.memory ) { 53 | 54 | var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) ); 55 | 56 | } 57 | 58 | showPanel( 0 ); 59 | 60 | return { 61 | 62 | REVISION: 16, 63 | 64 | dom: container, 65 | 66 | addPanel: addPanel, 67 | showPanel: showPanel, 68 | 69 | begin: function () { 70 | 71 | beginTime = ( performance || Date ).now(); 72 | 73 | }, 74 | 75 | end: function () { 76 | 77 | frames ++; 78 | 79 | var time = ( performance || Date ).now(); 80 | 81 | msPanel.update( time - beginTime, 200 ); 82 | 83 | if ( time > prevTime + 1000 ) { 84 | 85 | fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 ); 86 | 87 | prevTime = time; 88 | frames = 0; 89 | 90 | if ( memPanel ) { 91 | 92 | var memory = performance.memory; 93 | memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 ); 94 | 95 | } 96 | 97 | } 98 | 99 | return time; 100 | 101 | }, 102 | 103 | update: function () { 104 | 105 | beginTime = this.end(); 106 | 107 | }, 108 | 109 | // Backwards Compatibility 110 | 111 | domElement: container, 112 | setMode: showPanel 113 | 114 | }; 115 | 116 | }; 117 | 118 | Stats.Panel = function ( name, fg, bg ) { 119 | 120 | var min = Infinity, max = 0, round = Math.round; 121 | var PR = round( window.devicePixelRatio || 1 ); 122 | 123 | var WIDTH = 80 * PR, HEIGHT = 48 * PR, 124 | TEXT_X = 3 * PR, TEXT_Y = 2 * PR, 125 | GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, 126 | GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; 127 | 128 | var canvas = document.createElement( 'canvas' ); 129 | canvas.width = WIDTH; 130 | canvas.height = HEIGHT; 131 | canvas.style.cssText = 'width:80px;height:48px'; 132 | 133 | var context = canvas.getContext( '2d' ); 134 | context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif'; 135 | context.textBaseline = 'top'; 136 | 137 | context.fillStyle = bg; 138 | context.fillRect( 0, 0, WIDTH, HEIGHT ); 139 | 140 | context.fillStyle = fg; 141 | context.fillText( name, TEXT_X, TEXT_Y ); 142 | context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); 143 | 144 | context.fillStyle = bg; 145 | context.globalAlpha = 0.9; 146 | context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); 147 | 148 | return { 149 | 150 | dom: canvas, 151 | 152 | update: function ( value, maxValue ) { 153 | 154 | min = Math.min( min, value ); 155 | max = Math.max( max, value ); 156 | 157 | context.fillStyle = bg; 158 | context.globalAlpha = 1; 159 | context.fillRect( 0, 0, WIDTH, GRAPH_Y ); 160 | context.fillStyle = fg; 161 | context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y ); 162 | 163 | context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT ); 164 | 165 | context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT ); 166 | 167 | context.fillStyle = bg; 168 | context.globalAlpha = 0.9; 169 | context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) ); 170 | 171 | } 172 | 173 | }; 174 | 175 | }; 176 | 177 | return Stats; 178 | 179 | }))); 180 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/enum/EventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class EventName { 5 | static DOM_CONTENT_LOADED:string = "DOMContentLoaded" 6 | } 7 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/MyLib.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MyLib 5 | { 6 | constructor() 7 | { 8 | 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/enum/events/KeyboardEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class KeyboardEventName 5 | { 6 | public static KEY_DOWN:string = "keydown"; 7 | } 8 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/enum/events/MSGestureEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MSGestureEventName 5 | { 6 | public static GESTURE_START:string = "gesturestart"; 7 | public static GESTURE_CHANGE:string = "gesturechange"; 8 | public static GESTURE_END:string = "gestureend"; 9 | } 10 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/enum/events/MouseEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MouseEventName 5 | { 6 | public static MOUSE_DOWN:string = "mousedown"; 7 | public static MOUSE_UP:string = "mouseup"; 8 | public static MOUSE_MOVE:string = "mousemove"; 9 | public static MOUSE_WHEEL:string = "mousewheel"; 10 | } 11 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/enum/events/TouchEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class TouchEventName 5 | { 6 | public static TOUCH_START:string = "touchstart"; 7 | public static TOUCH_MOVE:string = "touchmove"; 8 | public static TOUCH_END:string = "touchend"; 9 | } 10 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/enum/ui/KeyCode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class KeyCode 5 | { 6 | public static UP:number = 38; 7 | public static DOWN:number = 40; 8 | } 9 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/controller/RoundCameraController.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import KeyboardEventName from "../../enum/events/KeyboardEventName"; 3 | import MouseEventName from "../../enum/events/MouseEventName"; 4 | import MSGestureEventName from "../../enum/events/MSGestureEventName"; 5 | import TouchEventName from "../../enum/events/TouchEventName"; 6 | import KeyCode from "../../enum/ui/KeyCode"; 7 | import {Camera} from "../engine/Camera"; 8 | /** 9 | * @author Kentaro Kawakatsu 10 | */ 11 | export class RoundCameraController 12 | { 13 | public static RAD:number = Math.PI / 180.0; 14 | 15 | // parameter 16 | public radiusMin:number = 1.0; 17 | public radiusOffset:number = 0.1; 18 | public gestureRadiusFactor:number = 20.0; 19 | 20 | // camera 21 | public radius:number = 2.0; 22 | private _camera:Camera; 23 | private _stage:HTMLCanvasElement; 24 | private _target:vec3; 25 | private _theta:number = 0.0; 26 | private _oldX:number = 0.0; 27 | private _phi:number = 90.0; 28 | private _oldY:number = 0.0; 29 | 30 | private _currentTheta:number = 0.0; 31 | private _currentPhi:number = 90.0; 32 | 33 | // for mouse 34 | public isMouseDown:Boolean; 35 | 36 | // for touch 37 | private _identifier:number; 38 | private _oldRadius:number; 39 | private _isGestureChange:Boolean; 40 | 41 | constructor(camera:Camera, stage:HTMLCanvasElement) 42 | { 43 | this._camera = camera; 44 | this._stage = stage; 45 | this._target = vec3.fromValues(0.0, 0.0, 0.0); 46 | this.enable(); 47 | this._updateCamera(); 48 | } 49 | 50 | public enable():void 51 | { 52 | document.addEventListener(KeyboardEventName.KEY_DOWN, (event:KeyboardEvent) => 53 | { 54 | this._keyHandler(event); 55 | }); 56 | document.addEventListener(MouseEventName.MOUSE_UP, (event:MouseEvent) => 57 | { 58 | this._upHandler(event); 59 | }); 60 | this._stage.addEventListener(MouseEventName.MOUSE_DOWN, (event:MouseEvent) => 61 | { 62 | this._downHandler(event); 63 | }); 64 | this._stage.addEventListener(MouseEventName.MOUSE_MOVE, (event:MouseEvent) => 65 | { 66 | this._moveHandler(event); 67 | }); 68 | this._stage.addEventListener(MouseEventName.MOUSE_WHEEL, (event:WheelEvent) => 69 | { 70 | this._wheelHandler(event); 71 | }); 72 | 73 | // touch 74 | if ("ontouchstart" in window) 75 | { 76 | this._stage.addEventListener(TouchEventName.TOUCH_START, (event:TouchEvent) => 77 | { 78 | this._touchStartHandler(event); 79 | }); 80 | this._stage.addEventListener(TouchEventName.TOUCH_MOVE, (event:TouchEvent) => 81 | { 82 | this._touchMoveHandler(event); 83 | }); 84 | document.addEventListener(TouchEventName.TOUCH_END, (event:TouchEvent) => 85 | { 86 | this._touchEndHandler(event); 87 | }); 88 | } 89 | if ("ongesturestart" in window) 90 | { 91 | this._stage.addEventListener(MSGestureEventName.GESTURE_START, (event:MSGestureEvent) => 92 | { 93 | this._gestureStartHandler(event); 94 | }); 95 | this._stage.addEventListener(MSGestureEventName.GESTURE_CHANGE, (event:MSGestureEvent) => 96 | { 97 | this._gestureChangeHandler(event); 98 | }); 99 | document.addEventListener(MSGestureEventName.GESTURE_END, (event:MSGestureEvent) => 100 | { 101 | this._gestureEndHandler(event); 102 | }); 103 | } 104 | } 105 | 106 | private _keyHandler(event:KeyboardEvent):void 107 | { 108 | switch (event.keyCode) 109 | { 110 | case KeyCode.UP: 111 | this.radius -= this.radiusOffset; 112 | if (this.radius < this.radiusMin) 113 | { 114 | this.radius = this.radiusMin; 115 | } 116 | break; 117 | case KeyCode.DOWN: 118 | this.radius += this.radiusOffset; 119 | break; 120 | default: 121 | break; 122 | } 123 | } 124 | 125 | private _upHandler(event:MouseEvent):void 126 | { 127 | this.isMouseDown = false; 128 | } 129 | 130 | private _downHandler(event:MouseEvent):void 131 | { 132 | this.isMouseDown = true; 133 | let rect:ClientRect = ( event.target).getBoundingClientRect(); 134 | this._oldX = event.clientX - rect.left; 135 | this._oldY = event.clientY - rect.top; 136 | } 137 | 138 | private _wheelHandler(event:MouseWheelEvent):void 139 | { 140 | if (event.wheelDelta > 0) 141 | { 142 | this.radius -= this.radiusOffset; 143 | if (this.radius < this.radiusMin) 144 | { 145 | this.radius = this.radiusMin; 146 | } 147 | } 148 | else 149 | { 150 | this.radius += this.radiusOffset; 151 | } 152 | } 153 | 154 | private _moveHandler(event:MouseEvent):void 155 | { 156 | if (this.isMouseDown) 157 | { 158 | let rect:ClientRect = ( event.target).getBoundingClientRect(); 159 | let stageX:number = event.clientX - rect.left; 160 | let stageY:number = event.clientY - rect.top; 161 | 162 | this.inputXY(stageX, stageY); 163 | } 164 | } 165 | 166 | private _touchStartHandler(event:TouchEvent):void 167 | { 168 | event.preventDefault(); 169 | if (!this.isMouseDown) 170 | { 171 | let touches:TouchList = event.changedTouches; 172 | let touch:Touch = touches[0]; 173 | this.isMouseDown = true; 174 | this._identifier = touch.identifier; 175 | let target:HTMLElement = touch.target; 176 | this._oldX = touch.pageX - target.offsetLeft; 177 | this._oldY = touch.pageY - target.offsetTop; 178 | } 179 | } 180 | 181 | private _touchMoveHandler(event:TouchEvent):void 182 | { 183 | event.preventDefault(); 184 | if (this._isGestureChange) 185 | { 186 | return; 187 | } 188 | let touches:TouchList = event.changedTouches; 189 | let touchLength:number = touches.length; 190 | for (let i:number = 0; i < touchLength; i++) 191 | { 192 | let touch:Touch = touches[i]; 193 | if (touch.identifier === this._identifier) 194 | { 195 | let target:HTMLElement = touch.target; 196 | let stageX:number = touch.pageX - target.offsetLeft; 197 | let stageY:number = touch.pageY - target.offsetTop; 198 | this.inputXY(stageX, stageY); 199 | break; 200 | } 201 | } 202 | } 203 | 204 | private _touchEndHandler(event:TouchEvent):void 205 | { 206 | if (this.isMouseDown) 207 | { 208 | event.preventDefault(); 209 | } 210 | this.isMouseDown = false; 211 | } 212 | 213 | private _gestureStartHandler(event:MSGestureEvent):void 214 | { 215 | this._isGestureChange = true; 216 | this.isMouseDown = true; 217 | this._oldRadius = this.radius; 218 | } 219 | 220 | private _gestureChangeHandler(event:MSGestureEvent):void 221 | { 222 | event.preventDefault(); 223 | event.stopImmediatePropagation(); 224 | this.radius = this._oldRadius + this.gestureRadiusFactor * this.radiusOffset * (1 - event.scale); 225 | if (this.radius < this.radiusMin) 226 | { 227 | this.radius = this.radiusMin; 228 | } 229 | } 230 | 231 | private _gestureEndHandler(event:MSGestureEvent):void 232 | { 233 | this._isGestureChange = false; 234 | this.isMouseDown = false; 235 | this._identifier = -1; 236 | } 237 | 238 | private inputXY(newX:number, newY:number):void 239 | { 240 | this._theta -= (newX - this._oldX) * 0.3; 241 | this._oldX = newX; 242 | this._phi -= (newY - this._oldY) * 0.3; 243 | this._oldY = newY; 244 | // 245 | if (this._phi < 20) 246 | { 247 | this._phi = 20; 248 | } 249 | else if (this._phi > 160) 250 | { 251 | this._phi = 160; 252 | } 253 | } 254 | 255 | private _updateCamera():void 256 | { 257 | let t:number = this._currentTheta * RoundCameraController.RAD; 258 | let p:number = this._currentPhi * RoundCameraController.RAD; 259 | 260 | let rsin:number = this.radius * Math.sin(p); 261 | this._camera.x = rsin * Math.sin(t) + this._target[0]; 262 | this._camera.z = rsin * Math.cos(t) + this._target[2]; 263 | this._camera.y = this.radius * Math.cos(p) + this._target[1]; 264 | 265 | this._camera.lookAt(this._target); 266 | } 267 | 268 | public upDate(factor:number = 0.1):void 269 | { 270 | this._currentTheta += (this._theta - this._currentTheta) * factor; 271 | this._currentPhi += (this._phi - this._currentPhi) * factor; 272 | 273 | this._updateCamera(); 274 | } 275 | 276 | public rotate(dTheta:number, dPhi:number):void 277 | { 278 | this._theta += dTheta; 279 | this._phi += dPhi; 280 | } 281 | 282 | public set(theta:number, phi:number):void 283 | { 284 | this._theta = theta; 285 | this._phi = phi; 286 | } 287 | } 288 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/Camera.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class Camera 6 | { 7 | public static DIRECTION:vec3 = vec3.fromValues(0.0, 0.0, 1.0); 8 | // 9 | private _cameraUP:vec3 = vec3.fromValues(0.0, 1.0, 0.0); 10 | // 11 | private _projectionMtx:mat4 = mat4.identity(mat4.create()); 12 | private _cameraMtx:mat4 = mat4.identity(mat4.create()); 13 | private _lookMtx:mat4 = mat4.identity(mat4.create()); 14 | // 15 | public x:number = 0.0; 16 | public y:number = 0.0; 17 | public z:number = 0.0; 18 | 19 | constructor(fov:number, aspect:number, zNear:number, zFar:number) 20 | { 21 | mat4.perspective(this._projectionMtx, fov, aspect, zNear, zFar); 22 | } 23 | 24 | public getCameraMtx():mat4 25 | { 26 | return this._cameraMtx; 27 | } 28 | 29 | public lookAt(point:vec3):void 30 | { 31 | mat4.identity(this._lookMtx); 32 | mat4.lookAt(this._lookMtx, vec3.fromValues(this.x, this.y, this.z), point, this._cameraUP); 33 | mat4.multiply(this._cameraMtx, this._projectionMtx, this._lookMtx); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/RenderingObject.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "./ShaderAttributeObject"; 2 | import {ShaderObject} from "./ShaderObject"; 3 | import {VertexAttributeObject} from "./VertexAttributeObject"; 4 | /** 5 | * @author Kentaro Kawakatsu 6 | */ 7 | export class RenderingObject 8 | { 9 | public context:WebGLRenderingContext; 10 | 11 | public vboList:VertexAttributeObject[]; 12 | public ibo:WebGLBuffer; 13 | 14 | public vboDataList:number[][]; 15 | public iboData:number[]; 16 | 17 | public shader:ShaderObject; 18 | 19 | constructor($context:WebGLRenderingContext) 20 | { 21 | this.context = $context; 22 | 23 | this.vboList = []; 24 | this.vboDataList = []; 25 | 26 | this.init(); 27 | } 28 | 29 | public init():void 30 | { 31 | } 32 | 33 | public attachShader($shader:ShaderObject):void 34 | { 35 | this.shader = $shader; 36 | } 37 | 38 | public bindVertexbuffer():void 39 | { 40 | const length:number = this.shader.attributeList.length; 41 | for (let i:number = 0; i < length; i++) 42 | { 43 | let attribute:ShaderAttributeObject = this.shader.attributeList[i]; 44 | if (attribute.location >= 0) 45 | { 46 | let vbo:VertexAttributeObject = this.getVertexBuffer(attribute.name); 47 | this.context.bindBuffer(this.context.ARRAY_BUFFER, vbo.buffer); 48 | this.context.enableVertexAttribArray(attribute.location); 49 | this.context.vertexAttribPointer(attribute.location, attribute.stride, this.context.FLOAT, false, vbo.byteStride, vbo.bufferOffset); 50 | } 51 | } 52 | } 53 | 54 | public getVertexBuffer(attributeName:string):VertexAttributeObject 55 | { 56 | const length:number = this.vboList.length; 57 | for (let i:number = 0; i < length; i++) 58 | { 59 | let attribute:VertexAttributeObject = this.vboList[i]; 60 | if (attribute.name === attributeName) 61 | { 62 | return attribute; 63 | } 64 | } 65 | return null; 66 | } 67 | 68 | public bindIndexbuffer():void 69 | { 70 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/RenderingTextureObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class RenderingTextureObject 5 | { 6 | public context:WebGLRenderingContext; 7 | 8 | public frameBuffer:WebGLFramebuffer; 9 | public renderBuffer:WebGLRenderbuffer; 10 | public texture:WebGLTexture; 11 | 12 | public width:number; 13 | public height:number; 14 | 15 | constructor($context:WebGLRenderingContext, $width:number, $height:number) 16 | { 17 | this.context = $context; 18 | this.width = $width; 19 | this.height = $height; 20 | this.init(); 21 | } 22 | 23 | public init():void 24 | { 25 | this.renderBuffer = this.context.createRenderbuffer(); 26 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, this.renderBuffer); 27 | this.context.renderbufferStorage(this.context.RENDERBUFFER, this.context.DEPTH_COMPONENT16, this.width, this.height); 28 | 29 | this.frameBuffer = this.context.createFramebuffer(); 30 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, this.frameBuffer); 31 | this.context.framebufferRenderbuffer(this.context.FRAMEBUFFER, this.context.DEPTH_ATTACHMENT, this.context.RENDERBUFFER, this.renderBuffer); 32 | 33 | this.texture = this.context.createTexture(); 34 | this.context.bindTexture(this.context.TEXTURE_2D, this.texture); 35 | this.context.texImage2D(this.context.TEXTURE_2D, 0, this.context.RGBA, this.width, this.height, 0, this.context.RGBA, this.context.UNSIGNED_BYTE, null); 36 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MAG_FILTER, this.context.LINEAR); 37 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MIN_FILTER, this.context.LINEAR); 38 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_S, this.context.CLAMP_TO_EDGE); 39 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_T, this.context.CLAMP_TO_EDGE); 40 | 41 | this.context.framebufferTexture2D(this.context.FRAMEBUFFER, this.context.COLOR_ATTACHMENT0, this.context.TEXTURE_2D, this.texture, 0); 42 | 43 | this.context.bindTexture(this.context.TEXTURE_2D, null); 44 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, null); 45 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, null); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/ShaderAttributeObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class ShaderAttributeObject 5 | { 6 | public name:string; 7 | public stride:number; 8 | public location:number; 9 | 10 | constructor($name:string, $stride:number) 11 | { 12 | this.name = $name; 13 | this.stride = $stride; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/ShaderObject.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "./ShaderAttributeObject"; 2 | import {UniformObject} from "./UniformObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class ShaderObject 7 | { 8 | public context:WebGLRenderingContext; 9 | 10 | public program:WebGLProgram; 11 | public vShader:WebGLShader; 12 | public fShader:WebGLShader; 13 | public uniformList:UniformObject[]; 14 | public attributeList:ShaderAttributeObject[]; 15 | 16 | public vShaderSource:string; 17 | public fShaderSource:string; 18 | 19 | constructor($context:WebGLRenderingContext) 20 | { 21 | this.context = $context; 22 | 23 | this.uniformList = []; 24 | this.attributeList = []; 25 | this.init(); 26 | } 27 | 28 | public init():void 29 | { 30 | 31 | } 32 | 33 | public createProgram():void 34 | { 35 | this.vShader = this.creatShader(this.vShaderSource, this.context.VERTEX_SHADER); 36 | this.fShader = this.creatShader(this.fShaderSource, this.context.FRAGMENT_SHADER); 37 | 38 | this.program = this.context.createProgram(); 39 | this.context.attachShader(this.program, this.vShader); 40 | this.context.attachShader(this.program, this.fShader); 41 | 42 | this.context.linkProgram(this.program); 43 | 44 | let i:number; 45 | let length:number; 46 | 47 | length = this.attributeList.length; 48 | for (i = 0; i < length; i++) 49 | { 50 | let attribute:ShaderAttributeObject = this.attributeList[i]; 51 | attribute.location = this.context.getAttribLocation(this.program, attribute.name); 52 | } 53 | 54 | length = this.uniformList.length; 55 | for (i = 0; i < length; i++) 56 | { 57 | let uniform:UniformObject = this.uniformList[i]; 58 | uniform.location = this.context.getUniformLocation(this.program, uniform.name); 59 | } 60 | } 61 | 62 | public bindShader():void 63 | { 64 | this.bindProgram(); 65 | this.bindUniform(); 66 | } 67 | 68 | public bindProgram():void 69 | { 70 | if (this.context.getProgramParameter(this.program, this.context.LINK_STATUS)) 71 | { 72 | this.context.useProgram(this.program); 73 | } 74 | else 75 | { 76 | console.log(this.context.getProgramInfoLog(this.program)); 77 | } 78 | } 79 | 80 | public bindUniform():void 81 | { 82 | const length:number = this.uniformList.length; 83 | for (let i:number = 0; i < length; i++) 84 | { 85 | let uniform:UniformObject = this.uniformList[i]; 86 | switch (uniform.type) 87 | { 88 | case UniformObject.TYPE_MATRIX: 89 | this.context.uniformMatrix4fv(uniform.location, false, uniform.matrix); 90 | break; 91 | case UniformObject.TYPE_VALUE: 92 | this.context.uniform1f(uniform.location, uniform.value); 93 | break; 94 | case UniformObject.TYPE_VECTOR3: 95 | this.context.uniform3fv(uniform.location, uniform.vector3); 96 | break; 97 | case UniformObject.TYPE_VECTOR4: 98 | this.context.uniform4fv(uniform.location, uniform.vector4); 99 | break; 100 | case UniformObject.TYPE_TEXTURE: 101 | this.context.uniform1i(uniform.location, uniform.value); 102 | this.context.activeTexture(this.context["TEXTURE" + uniform.value]); 103 | this.context.bindTexture(this.context.TEXTURE_2D, uniform.texture); 104 | break; 105 | default: 106 | break; 107 | } 108 | } 109 | } 110 | 111 | public creatShader(source:string, type:number):WebGLShader 112 | { 113 | let shader:WebGLShader = this.context.createShader(type); 114 | this.context.shaderSource(shader, source); 115 | this.context.compileShader(shader); 116 | 117 | if (this.context.getShaderParameter(shader, this.context.COMPILE_STATUS)) 118 | { 119 | return shader; 120 | } 121 | else 122 | { 123 | console.log(type === this.context.VERTEX_SHADER, this.context.getShaderInfoLog(shader)); 124 | return null; 125 | } 126 | } 127 | 128 | public getUniform(uniformName:string):UniformObject 129 | { 130 | const length:number = this.uniformList.length; 131 | for (let i:number = 0; i < length; i++) 132 | { 133 | let uniform:UniformObject = this.uniformList[i]; 134 | if (uniform.name === uniformName) 135 | { 136 | return uniform; 137 | } 138 | } 139 | return null; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/TextureObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class TextureObject 5 | { 6 | public context:WebGLRenderingContext; 7 | 8 | public texture:WebGLTexture; 9 | 10 | public image:HTMLImageElement; 11 | public height:number; 12 | 13 | constructor($context:WebGLRenderingContext) 14 | { 15 | this.context = $context; 16 | this.init(); 17 | } 18 | 19 | public init():void 20 | { 21 | this.texture = this.context.createTexture(); 22 | } 23 | 24 | public setImage(image:HTMLImageElement):void 25 | { 26 | this.image = image; 27 | this.context.bindTexture(this.context.TEXTURE_2D, this.texture); 28 | this.context.texImage2D(this.context.TEXTURE_2D, 0, this.context.RGBA, this.context.RGBA, this.context.UNSIGNED_BYTE, image); 29 | this.context.generateMipmap(this.context.TEXTURE_2D); 30 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MIN_FILTER, this.context.LINEAR_MIPMAP_LINEAR); 31 | this.context.bindTexture(this.context.TEXTURE_2D, null); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/UniformObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3, vec4} from "gl-matrix"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class UniformObject 6 | { 7 | public static TYPE_VALUE:number = 0; 8 | public static TYPE_VECTOR3:number = 1; 9 | public static TYPE_VECTOR4:number = 2; 10 | public static TYPE_MATRIX:number = 3; 11 | public static TYPE_TEXTURE:number = 4; 12 | 13 | public type:number; 14 | public name:string; 15 | public location:WebGLUniformLocation; 16 | public value:number; 17 | public vector3:vec3; 18 | public vector4:vec4; 19 | public matrix:mat4; 20 | public texture:WebGLTexture; 21 | 22 | constructor($type:number, $name:string) 23 | { 24 | this.name = $name; 25 | this.type = $type; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/engine/VertexAttributeObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class VertexAttributeObject 5 | { 6 | public name:string; 7 | public byteStride:number = 0; 8 | public bufferOffset:number = 0; 9 | public buffer:WebGLBuffer; 10 | 11 | constructor($name:string) 12 | { 13 | this.name = $name; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/object/OrthoScreenObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | import {RenderingObject} from "../engine/RenderingObject"; 3 | import {VertexAttributeObject} from "../engine/VertexAttributeObject"; 4 | /** 5 | * @author Kentaro Kawakatsu 6 | */ 7 | export class OrthoScreenObject extends RenderingObject 8 | { 9 | public screenMatrix:mat4; 10 | 11 | constructor($context:WebGLRenderingContext) 12 | { 13 | super($context); 14 | } 15 | 16 | public init():void 17 | { 18 | let vPosition:number[] = [ 19 | -1.0, 1.0, 0.0, 20 | 1.0, 1.0, 0.0, 21 | -1.0, -1.0, 0.0, 22 | 1.0, -1.0, 0.0 23 | ]; 24 | this.iboData = [ 25 | 0, 1, 2, 26 | 3, 2, 1 27 | ]; 28 | 29 | let attribute:VertexAttributeObject; 30 | let vbo:WebGLBuffer; 31 | 32 | vbo = this.context.createBuffer(); 33 | this.context.bindBuffer(this.context.ARRAY_BUFFER, vbo); 34 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(vPosition), this.context.STATIC_DRAW); 35 | this.vboDataList[0] = vPosition; 36 | attribute = new VertexAttributeObject("position"); 37 | attribute.buffer = vbo; 38 | this.vboList[0] = attribute; 39 | 40 | this.ibo = this.context.createBuffer(); 41 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 42 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 43 | 44 | // 45 | let viewMtx:mat4 = mat4.identity(mat4.create()); 46 | let projectionMtx:mat4 = mat4.identity(mat4.create()); 47 | this.screenMatrix = mat4.identity(mat4.create()); 48 | mat4.lookAt(viewMtx, vec3.fromValues(0.0, 0.0, 0.5), vec3.fromValues(0.0, 0.0, 0.0), vec3.fromValues(0.0, 1.0, 0.0)); 49 | mat4.ortho(projectionMtx, -1.0, 1.0, 1.0, -1.0, 0.1, 1); 50 | mat4.multiply(this.screenMatrix, projectionMtx, viewMtx); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/object/SceneObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | import {RenderingObject} from "../engine/RenderingObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class SceneObject extends RenderingObject 7 | { 8 | private _mMatrix:mat4 = mat4.identity(mat4.create()); 9 | private _translateVec:vec3 = vec3.create(); 10 | private _scaleVec:vec3 = vec3.create(); 11 | 12 | public x:number = 0.0; 13 | public y:number = 0.0; 14 | public z:number = 0.0; 15 | public scaleX:number = 1.0; 16 | public scaleY:number = 1.0; 17 | public scaleZ:number = 1.0; 18 | public rotationX:number = 0.0; 19 | public rotationY:number = 0.0; 20 | public rotationZ:number = 0.0; 21 | 22 | constructor($context:WebGLRenderingContext) 23 | { 24 | super($context); 25 | } 26 | 27 | public getModelMtx():mat4 28 | { 29 | mat4.identity(this._mMatrix); 30 | vec3.set(this._translateVec, this.x, this.y, this.z); 31 | mat4.translate(this._mMatrix, this._mMatrix, this._translateVec); 32 | mat4.rotateZ(this._mMatrix, this._mMatrix, this.rotationZ); 33 | mat4.rotateY(this._mMatrix, this._mMatrix, this.rotationY); 34 | mat4.rotateX(this._mMatrix, this._mMatrix, this.rotationX); 35 | vec3.set(this._scaleVec, this.scaleX, this.scaleY, this.scaleZ); 36 | mat4.scale(this._mMatrix, this._mMatrix, this._scaleVec); 37 | return this._mMatrix; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/primitive/Plane.ts: -------------------------------------------------------------------------------- 1 | import {Primitive} from "./Primitive"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class Plane extends Primitive 6 | { 7 | public width:number; 8 | public height:number; 9 | public segmentsW:number; 10 | public segmentsH:number; 11 | 12 | constructor($context:WebGLRenderingContext, width:number, height:number, segmentsW:number, segmentsH:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 13 | { 14 | super($context); 15 | 16 | this.width = width; 17 | this.height = height; 18 | this.segmentsW = segmentsW; 19 | this.segmentsH = segmentsH; 20 | this.useAttribute = useAttribute; 21 | 22 | this.setData(); 23 | } 24 | 25 | protected setData():void 26 | { 27 | let halfWidth:number = this.width / 2.0; 28 | let halfHeight:number = this.height / 2.0; 29 | 30 | let segmentWidth:number = this.width / this.segmentsW; 31 | let segmentHeight:number = this.height / this.segmentsH; 32 | 33 | let wVertices:number = this.segmentsW + 1; 34 | let hVertices:number = this.segmentsH + 1; 35 | 36 | let positionList:number[] = []; 37 | let normalList:number[] = []; 38 | let uvList:number[] = []; 39 | let indexList:number[] = []; 40 | 41 | for (let j:number = 0; j < hVertices; j++) 42 | { 43 | let posY:number = segmentHeight * j - halfHeight; 44 | let v:number = 1.0 - (j / this.segmentsH); 45 | 46 | for (let i:number = 0; i < wVertices; i++) 47 | { 48 | positionList.push(segmentWidth * i - halfWidth, -posY, 0.0); 49 | normalList.push(0.0, 0.0, 1.0); 50 | uvList.push(i / this.segmentsW, v); 51 | } 52 | } 53 | 54 | this.positionList = positionList; 55 | this.normalList = normalList; 56 | this.uvList = uvList; 57 | 58 | this.setAttribute(); 59 | 60 | for (let j:number = 0; j < this.segmentsH; j++) 61 | { 62 | let j0:number = wVertices * j; 63 | let j1:number = wVertices * (j + 1); 64 | 65 | for (let i:number = 0; i < this.segmentsW; i++) 66 | { 67 | let i0:number = i + j0; 68 | let i1:number = i + j1; 69 | let i2:number = i + 1 + j1; 70 | let i3:number = i + 1 + j0; 71 | 72 | indexList.push(i0, i1, i3); 73 | indexList.push(i1, i2, i3); 74 | } 75 | } 76 | 77 | this.iboData = indexList; 78 | 79 | this.ibo = this.context.createBuffer(); 80 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 81 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 82 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/primitive/Primitive.ts: -------------------------------------------------------------------------------- 1 | import {VertexAttributeObject} from "../engine/VertexAttributeObject"; 2 | import {SceneObject} from "../object/SceneObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Primitive extends SceneObject 7 | { 8 | public static ATTRIBUTE_USE_POSITION:number = 0x01; 9 | public static ATTRIBUTE_USE_NOMRAL:number = 0x02; 10 | public static ATTRIBUTE_USE_UV:number = 0x04; 11 | 12 | public numVertices:number; 13 | public numIndices:number; 14 | 15 | public positionList:number[]; 16 | public normalList:number[]; 17 | public uvList:number[]; 18 | 19 | public useAttribute:number; 20 | 21 | constructor($context:WebGLRenderingContext) 22 | { 23 | super($context); 24 | } 25 | 26 | public init():void 27 | { 28 | 29 | } 30 | 31 | protected setData():void 32 | { 33 | 34 | } 35 | 36 | public setAttribute():void 37 | { 38 | let usePosition:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_POSITION) !== 0x0; 39 | let useNormal:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_NOMRAL) !== 0x0; 40 | let useUV:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_UV) !== 0x0; 41 | 42 | let attribute:VertexAttributeObject; 43 | 44 | if (usePosition) 45 | { 46 | attribute = new VertexAttributeObject("position"); 47 | attribute.buffer = this.context.createBuffer(); 48 | this.vboList.push(attribute); 49 | 50 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 51 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.positionList), this.context.STATIC_DRAW); 52 | } 53 | 54 | if (useNormal) 55 | { 56 | attribute = new VertexAttributeObject("normal"); 57 | attribute.buffer = this.context.createBuffer(); 58 | this.vboList.push(attribute); 59 | 60 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 61 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.normalList), this.context.STATIC_DRAW); 62 | } 63 | 64 | if (useUV) 65 | { 66 | attribute = new VertexAttributeObject("uv"); 67 | attribute.buffer = this.context.createBuffer(); 68 | this.vboList.push(attribute); 69 | 70 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 71 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.uvList), this.context.STATIC_DRAW); 72 | } 73 | 74 | this.context.bindBuffer(this.context.ARRAY_BUFFER, null); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/primitive/Sphere.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import {Primitive} from "./Primitive"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Sphere extends Primitive 7 | { 8 | public radius:number; 9 | public segmentsW:number; 10 | public segmentsH:number; 11 | 12 | constructor($context:WebGLRenderingContext, radius:number, segmentsW:number, segmentsH:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 13 | { 14 | super($context); 15 | 16 | this.radius = radius; 17 | this.segmentsW = segmentsW; 18 | this.segmentsH = segmentsH; 19 | this.useAttribute = useAttribute; 20 | 21 | this.setData(); 22 | } 23 | 24 | protected setData():void 25 | { 26 | let vec:vec3 = vec3.create(); 27 | let grid:number[][] = []; 28 | let idx:number = 0; 29 | 30 | let positionList:number[] = []; 31 | let normalList:number[] = []; 32 | let uvList:number[] = []; 33 | 34 | for (let j:number = 0; j <= this.segmentsH; j++) 35 | { 36 | let verticesRow:number[] = []; 37 | 38 | let v:number = j / this.segmentsH; 39 | let theta:number = v * Math.PI; 40 | 41 | for (let i:number = 0; i <= this.segmentsW; i++) 42 | { 43 | let u:number = i / this.segmentsW; 44 | let phi:number = u * 2 * Math.PI; 45 | 46 | vec[0] = -this.radius * Math.cos(phi) * Math.sin(theta); 47 | vec[1] = this.radius * Math.cos(theta); 48 | vec[2] = this.radius * Math.sin(phi) * Math.sin(theta); 49 | 50 | positionList.push(vec[0], vec[1], vec[2]); 51 | vec3.normalize(vec, vec); 52 | normalList.push(vec[0], vec[1], vec[2]); 53 | uvList.push(u, 1 - v); 54 | 55 | verticesRow.push(idx); 56 | idx += 1; 57 | } 58 | grid.push(verticesRow); 59 | } 60 | 61 | this.positionList = positionList; 62 | this.normalList = normalList; 63 | this.uvList = uvList; 64 | 65 | this.setAttribute(); 66 | 67 | let indexList:number[] = []; 68 | 69 | for (let j:number = 0; j < this.segmentsH; j++) 70 | { 71 | for (let i:number = 0; i < this.segmentsW; i++) 72 | { 73 | let i0:number = grid[j][i + 1]; 74 | let i1:number = grid[j][i]; 75 | let i2:number = grid[j + 1][i]; 76 | let i3:number = grid[j + 1][i + 1]; 77 | 78 | if (j !== 0) 79 | { 80 | indexList.push(i0, i1, i3); 81 | } 82 | 83 | if (j !== this.segmentsH - 1) 84 | { 85 | indexList.push(i1, i2, i3); 86 | } 87 | } 88 | } 89 | 90 | this.iboData = indexList; 91 | 92 | this.ibo = this.context.createBuffer(); 93 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 94 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 95 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/primitive/Torus.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import {Primitive} from "./Primitive"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Torus extends Primitive 7 | { 8 | public radius:number; 9 | public tube:number; 10 | public segmentsR:number; 11 | public segmentsT:number; 12 | 13 | constructor($context:WebGLRenderingContext, radius:number, tube:number, segmentsR:number, segmentsT:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 14 | { 15 | super($context); 16 | 17 | this.radius = radius; 18 | this.tube = tube; 19 | this.segmentsR = segmentsR; 20 | this.segmentsT = segmentsT; 21 | this.useAttribute = useAttribute; 22 | 23 | this.setData(); 24 | } 25 | 26 | protected setData():void 27 | { 28 | let vec:vec3 = vec3.create(); 29 | 30 | let positionList:number[] = []; 31 | let normalList:number[] = []; 32 | let uvList:number[] = []; 33 | let indexList:number[] = []; 34 | 35 | for (let j:number = 0; j <= this.segmentsR; j++) 36 | { 37 | let vUnit:number = j / this.segmentsR; 38 | let v:number = vUnit * Math.PI * 2; 39 | 40 | for (let i:number = 0; i <= this.segmentsT; i++) 41 | { 42 | let uUnit:number = i / this.segmentsT; 43 | let u:number = uUnit * Math.PI * 2; 44 | 45 | let cosU:number = Math.cos(u); 46 | let sinU:number = Math.sin(u); 47 | let cosV:number = Math.cos(v); 48 | 49 | let rr:number = this.radius + this.tube * cosV; 50 | 51 | vec[0] = rr * cosU; 52 | vec[1] = rr * sinU; 53 | vec[2] = this.tube * Math.sin(v); 54 | 55 | positionList.push(vec[0], vec[1], vec[2]); 56 | 57 | vec[0] -= this.radius * cosU; 58 | vec[1] -= this.radius * sinU; 59 | vec3.normalize(vec, vec); 60 | normalList.push(vec[0], vec[1], vec[2]); 61 | 62 | uvList.push(uUnit, vUnit); 63 | } 64 | } 65 | 66 | this.positionList = positionList; 67 | this.normalList = normalList; 68 | this.uvList = uvList; 69 | 70 | this.setAttribute(); 71 | 72 | for (let j:number = 1; j <= this.segmentsR; j++) 73 | { 74 | for (let i:number = 1; i <= this.segmentsT; i++) 75 | { 76 | let seg:number = this.segmentsT + 1; 77 | 78 | let i0:number = seg * j + i - 1; 79 | let i1:number = seg * (j - 1) + i - 1; 80 | let i2:number = seg * (j - 1) + i; 81 | let i3:number = seg * j + i; 82 | 83 | indexList.push(i0, i1, i3); 84 | indexList.push(i1, i2, i3); 85 | } 86 | } 87 | 88 | this.iboData = indexList; 89 | 90 | this.ibo = this.context.createBuffer(); 91 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 92 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 93 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/myLib/webgl/utils/WebGLUtil.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class WebGLUtil 5 | { 6 | 7 | public static init():void 8 | { 9 | 10 | } 11 | 12 | public static supportsWebGL():boolean 13 | { 14 | try 15 | { 16 | return !!WebGLRenderingContext && (!!document.createElement("canvas").getContext("webgl") || !!document.createElement("canvas").getContext("experimental-webgl")); 17 | } catch (e) 18 | { 19 | return false; 20 | } 21 | } 22 | 23 | public static getPowerOf2(w:number, h:number):any 24 | { 25 | let ww:number = w; 26 | let hh:number = h; 27 | if (!WebGLUtil.isPowerOfTwo(w)) 28 | { 29 | ww = WebGLUtil.nextHighestPowerOfTwo(w); 30 | } 31 | if (!WebGLUtil.isPowerOfTwo(h)) 32 | { 33 | hh = WebGLUtil.nextHighestPowerOfTwo(h); 34 | } 35 | return {w:ww, h:hh}; 36 | } 37 | 38 | private static isPowerOfTwo(value:number):boolean 39 | { 40 | return (value & (value - 1)) === 0; 41 | } 42 | 43 | private static nextHighestPowerOfTwo(value:number):number 44 | { 45 | --value; 46 | for (let i:number = 1; i < 32; i <<= 1) 47 | { 48 | value = value | value >> i; 49 | } 50 | return value + 1; 51 | } 52 | 53 | constructor() 54 | { 55 | 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/DeferredAmbientLight.ts: -------------------------------------------------------------------------------- 1 | import {OrthoScreenObject} from "../myLib/webgl/object/OrthoScreenObject"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class DeferredAmbientLight 6 | { 7 | public static proxy:OrthoScreenObject; 8 | 9 | public static init($context:WebGLRenderingContext):void 10 | { 11 | DeferredAmbientLight.proxy = new OrthoScreenObject($context); 12 | } 13 | 14 | public color:number; 15 | public intensity:number; 16 | 17 | constructor(color:number, intensity:number) 18 | { 19 | this.color = color; 20 | this.intensity = intensity; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/DeferredAmbientLightPassShader.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "../myLib/webgl/engine/ShaderAttributeObject"; 2 | import {ShaderObject} from "../myLib/webgl/engine/ShaderObject"; 3 | import {UniformObject} from "../myLib/webgl/engine/UniformObject"; 4 | 5 | /** 6 | * @author Kentaro Kawakatsu 7 | */ 8 | export class DeferredAmbientLightPassShader extends ShaderObject 9 | { 10 | public init():void 11 | { 12 | // language=GLSL 13 | this.vShaderSource = `#version 300 es 14 | in vec3 position; 15 | uniform mat4 mvpMatrix; 16 | 17 | void main(void) 18 | { 19 | gl_Position = mvpMatrix * vec4(position, 1.0); 20 | } 21 | `; 22 | 23 | // language=GLSL 24 | this.fShaderSource = `#version 300 es 25 | precision mediump float; 26 | 27 | uniform vec4 screen; 28 | uniform sampler2D textureColor; 29 | uniform vec4 ambientColor; 30 | uniform float ambientIntensity; 31 | out vec4 fragColor; 32 | 33 | void main(void) 34 | { 35 | vec2 uv = gl_FragCoord.st * screen.xy; 36 | vec4 color = texture(textureColor, uv); 37 | 38 | fragColor = color * clamp(ambientColor * vec4(vec3(ambientIntensity), 1.0), 0.0, 1.0); 39 | } 40 | `; 41 | 42 | let uniform:UniformObject; 43 | uniform = new UniformObject(UniformObject.TYPE_MATRIX, "mvpMatrix"); 44 | this.uniformList[0] = uniform; 45 | 46 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureColor"); 47 | this.uniformList[1] = uniform; 48 | 49 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "screen"); 50 | this.uniformList[2] = uniform; 51 | 52 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "ambientColor"); 53 | this.uniformList[3] = uniform; 54 | 55 | uniform = new UniformObject(UniformObject.TYPE_VALUE, "ambientIntensity"); 56 | this.uniformList[4] = uniform; 57 | 58 | let attribute:ShaderAttributeObject; 59 | attribute = new ShaderAttributeObject("position", 3); 60 | this.attributeList[0] = attribute; 61 | 62 | this.createProgram(); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/DeferredGeometryPassShader.ts: -------------------------------------------------------------------------------- 1 | import {vec4} from "gl-matrix"; 2 | import {ShaderAttributeObject} from "../myLib/webgl/engine/ShaderAttributeObject"; 3 | import {ShaderObject} from "../myLib/webgl/engine/ShaderObject"; 4 | import {UniformObject} from "../myLib/webgl/engine/UniformObject"; 5 | /** 6 | * @author Kentaro Kawakatsu 7 | */ 8 | export class DeferredGeometryPassShader extends ShaderObject 9 | { 10 | private _color:number = 0x0; 11 | 12 | public set color(value:number) 13 | { 14 | if (value !== this._color) 15 | { 16 | this._color = value; 17 | 18 | let r:number = ((value >> 16) & 0xFF) / 255; 19 | let g:number = ((value >> 8) & 0xFF) / 255; 20 | let b:number = (value & 0xFF) / 255; 21 | vec4.set(this.uniformList[2].vector4, r, g, b, this._alpha); 22 | } 23 | } 24 | 25 | public get color():number 26 | { 27 | return this._color; 28 | } 29 | 30 | private _alpha:number = 1.0; 31 | 32 | public set alpha(value:number) 33 | { 34 | if (value !== this._alpha) 35 | { 36 | this._alpha = value; 37 | this.uniformList[2].vector4.set([value], 3); 38 | } 39 | } 40 | 41 | public get alpha():number 42 | { 43 | return this._alpha; 44 | } 45 | 46 | public init():void 47 | { 48 | // language=GLSL 49 | this.vShaderSource = `#version 300 es 50 | in vec3 position; 51 | in vec3 normal; 52 | uniform mat4 mvpMatrix; 53 | uniform mat4 modelMatrix; 54 | uniform vec4 color; 55 | out vec4 vPosition; 56 | out vec3 vNormal; 57 | out vec4 vColor; 58 | out float vDepth; 59 | 60 | void main(void) 61 | { 62 | vec4 position4 = vec4(position, 1.0); 63 | vPosition = modelMatrix * position4; 64 | vNormal = (modelMatrix * vec4(normal, 0.0)).xyz; 65 | vColor = color; 66 | gl_Position = mvpMatrix * position4; 67 | vDepth = gl_Position.z / gl_Position.w; 68 | } 69 | `; 70 | 71 | // language=GLSL 72 | this.fShaderSource = `#version 300 es 73 | precision mediump float; 74 | 75 | in vec4 vPosition; 76 | in vec3 vNormal; 77 | in vec4 vColor; 78 | in float vDepth; 79 | layout(location = 0) out vec4 outPosition; 80 | layout(location = 1) out vec4 outNormal; 81 | layout(location = 2) out vec4 outColor; 82 | layout(location = 3) out vec4 outDepth; 83 | 84 | void main(void) 85 | { 86 | outPosition = vPosition; 87 | outNormal = vec4(normalize(vNormal), 1.0); 88 | outColor = vColor; 89 | outDepth = vec4(vec3((vDepth + 1.0) * 0.5), 1.0); 90 | } 91 | `; 92 | 93 | let uniform:UniformObject; 94 | uniform = new UniformObject(UniformObject.TYPE_MATRIX, "mvpMatrix"); 95 | this.uniformList[0] = uniform; 96 | 97 | uniform = new UniformObject(UniformObject.TYPE_MATRIX, "modelMatrix"); 98 | this.uniformList[1] = uniform; 99 | 100 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "color"); 101 | uniform.vector4 = vec4.create(); 102 | this.uniformList[2] = uniform; 103 | 104 | let attribute:ShaderAttributeObject; 105 | attribute = new ShaderAttributeObject("position", 3); 106 | this.attributeList[0] = attribute; 107 | 108 | attribute = new ShaderAttributeObject("normal", 3); 109 | this.attributeList[1] = attribute; 110 | 111 | this.createProgram(); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/DeferredPointLight.ts: -------------------------------------------------------------------------------- 1 | import {vec4} from "gl-matrix"; 2 | import {Primitive} from "../myLib/webgl/primitive/Primitive"; 3 | import {Sphere} from "../myLib/webgl/primitive/Sphere"; 4 | /** 5 | * @author Kentaro Kawakatsu 6 | */ 7 | export class DeferredPointLight 8 | { 9 | public static proxy:Sphere; 10 | 11 | public static init($context:WebGLRenderingContext):void 12 | { 13 | // diffuse = ((1 - lightDistance / distance)^attenuation) * intensity * color 14 | DeferredPointLight.proxy = new Sphere($context, 1.0, 10, 10, Primitive.ATTRIBUTE_USE_POSITION); 15 | } 16 | 17 | public color:number; 18 | public colorVec:vec4; 19 | public data:any; 20 | public intensity:number; 21 | public distance:number; 22 | public attenuation:number; 23 | 24 | public x:number = 0.0; 25 | public y:number = 0.0; 26 | public z:number = 0.0; 27 | 28 | constructor(color:number, intensity:number, distance:number, attenuation:number, data:any) 29 | { 30 | this.color = color; 31 | this.intensity = intensity; 32 | this.distance = distance; 33 | this.attenuation = attenuation; 34 | this.colorVec = vec4.fromValues( 35 | ((color >> 16) & 0xFF) / 255, 36 | ((color >> 8) & 0xFF) / 255, 37 | (color & 0xFF) / 255, 38 | 1.0); 39 | this.data = data; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/DeferredPointLightPassShader.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "../myLib/webgl/engine/ShaderAttributeObject"; 2 | import {ShaderObject} from "../myLib/webgl/engine/ShaderObject"; 3 | import {UniformObject} from "../myLib/webgl/engine/UniformObject"; 4 | 5 | /** 6 | * @author Kentaro Kawakatsu 7 | */ 8 | export class DeferredPointLightPassShader extends ShaderObject 9 | { 10 | public init():void 11 | { 12 | // language=GLSL 13 | this.vShaderSource = `#version 300 es 14 | in vec3 position; 15 | uniform mat4 mvpMatrix; 16 | 17 | void main(void) 18 | { 19 | gl_Position = mvpMatrix * vec4(position, 1.0); 20 | } 21 | `; 22 | 23 | // language=GLSL 24 | this.fShaderSource = `#version 300 es 25 | precision mediump float; 26 | 27 | uniform vec4 screen; 28 | uniform sampler2D texturePosition; 29 | uniform sampler2D textureNormal; 30 | uniform sampler2D textureColor; 31 | uniform sampler2D textureDepth; 32 | uniform vec3 pointPosition; 33 | uniform vec4 pointColor; 34 | uniform float pointIntensity; 35 | uniform float pointDistance; 36 | uniform float pointAttenuation; 37 | out vec4 fragColor; 38 | 39 | void main(void) 40 | { 41 | vec4 destColor = vec4(0.0); 42 | vec2 uv = gl_FragCoord.st * screen.xy; 43 | vec3 pos = texture(texturePosition, uv).xyz; 44 | vec3 normal = normalize(texture(textureNormal, uv).xyz); 45 | vec4 color = texture(textureColor, uv); 46 | 47 | vec3 lightVector = pointPosition - pos; 48 | 49 | float diffuse = clamp(dot(normal, normalize(lightVector)), 0.0, 1.0); 50 | float attenuation = pow(clamp(1.0 - length(lightVector) / pointDistance, 0.0, 1.0), pointAttenuation); 51 | vec4 diffuseColor = color * pointColor * vec4(vec3(diffuse * attenuation * pointIntensity), 1.0); 52 | // diffuseColor = color; 53 | 54 | fragColor = diffuseColor; 55 | } 56 | `; 57 | 58 | let uniform:UniformObject; 59 | uniform = new UniformObject(UniformObject.TYPE_MATRIX, "mvpMatrix"); 60 | this.uniformList[0] = uniform; 61 | 62 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "texturePosition"); 63 | this.uniformList[1] = uniform; 64 | 65 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureNormal"); 66 | this.uniformList[2] = uniform; 67 | 68 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureColor"); 69 | this.uniformList[3] = uniform; 70 | 71 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureDepth"); 72 | this.uniformList[4] = uniform; 73 | 74 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "screen"); 75 | this.uniformList[5] = uniform; 76 | 77 | uniform = new UniformObject(UniformObject.TYPE_VECTOR3, "pointPosition"); 78 | this.uniformList[6] = uniform; 79 | 80 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "pointColor"); 81 | this.uniformList[7] = uniform; 82 | 83 | uniform = new UniformObject(UniformObject.TYPE_VALUE, "pointIntensity"); 84 | this.uniformList[8] = uniform; 85 | 86 | uniform = new UniformObject(UniformObject.TYPE_VALUE, "pointDistance"); 87 | this.uniformList[9] = uniform; 88 | 89 | uniform = new UniformObject(UniformObject.TYPE_VALUE, "pointAttenuation"); 90 | this.uniformList[10] = uniform; 91 | 92 | let attribute:ShaderAttributeObject; 93 | attribute = new ShaderAttributeObject("position", 3); 94 | this.attributeList[0] = attribute; 95 | 96 | this.createProgram(); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/GUIPanel.ts: -------------------------------------------------------------------------------- 1 | import {GUI} from "dat-gui"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class GUIPanel 6 | { 7 | public static MOVEMENT_TYPE_WAVE:string = "wave"; 8 | public static MOVEMENT_TYPE_SPIRAL:string = "spiral"; 9 | public static MOVEMENT_TYPE_RANDOM:string = "random"; 10 | public static MOVEMENT_TYPE_NONE:string = "none"; 11 | public static MOVEMENT_LIST:string[] = [ 12 | GUIPanel.MOVEMENT_TYPE_WAVE, 13 | GUIPanel.MOVEMENT_TYPE_SPIRAL, 14 | GUIPanel.MOVEMENT_TYPE_RANDOM, 15 | GUIPanel.MOVEMENT_TYPE_NONE]; 16 | 17 | public gbuffer:Boolean; 18 | public num:number; 19 | public helper:Boolean; 20 | public movement:string; 21 | 22 | constructor() 23 | { 24 | this.gbuffer = false; 25 | this.num = 10; 26 | this.helper = false; 27 | this.movement = GUIPanel.MOVEMENT_LIST[0]; 28 | } 29 | 30 | public setGUITitle(gui:GUI, propertyName:string, title:string) 31 | { 32 | let propertyList:NodeListOf = gui.domElement.getElementsByClassName("property-name"); 33 | let length:number = propertyList.length; 34 | for (let i:number = 0; i < length; i++) 35 | { 36 | let element:Element = propertyList[i]; 37 | if (element.innerHTML === propertyName) 38 | { 39 | element.innerHTML = title; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/MRTScreenShader.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "../myLib/webgl/engine/ShaderAttributeObject"; 2 | import {ShaderObject} from "../myLib/webgl/engine/ShaderObject"; 3 | import {UniformObject} from "../myLib/webgl/engine/UniformObject"; 4 | 5 | /** 6 | * @author Kentaro Kawakatsu 7 | */ 8 | export class MRTScreenShader extends ShaderObject 9 | { 10 | public init():void 11 | { 12 | // language=GLSL 13 | this.vShaderSource = `#version 300 es 14 | in vec3 position; 15 | uniform mat4 mvpMatrix; 16 | 17 | void main(void) 18 | { 19 | gl_Position = mvpMatrix * vec4(position, 1.0); 20 | } 21 | `; 22 | 23 | // language=GLSL 24 | this.fShaderSource = `#version 300 es 25 | precision mediump float; 26 | 27 | uniform vec4 screen; 28 | uniform sampler2D texturePosition; 29 | uniform sampler2D textureNormal; 30 | uniform sampler2D textureColor; 31 | uniform sampler2D textureDepth; 32 | out vec4 fragColor; 33 | 34 | void main(void) 35 | { 36 | vec4 destColor = vec4(0.0); 37 | vec2 uv = gl_FragCoord.st * screen.xy * vec2(2.0, 2.0); 38 | 39 | if(uv.x < 1.0 && uv.y >= 1.0) 40 | { 41 | vec3 pos = texture(texturePosition, uv + vec2(0.0, -1.0)).xyz; 42 | pos = (pos + vec3(4.0)) / 8.0; 43 | destColor += vec4(pos, 1.0); 44 | } 45 | 46 | if(uv.x >= 1.0 && uv.y >= 1.0) 47 | { 48 | vec3 normal = texture(textureNormal, uv + vec2(-1.0, -1.0)).xyz; 49 | normal = (normal + vec3(1.0)) / 2.0; 50 | destColor += vec4(normal, 1.0); 51 | } 52 | 53 | if(uv.x < 1.0 && uv.y < 1.0) 54 | { 55 | destColor += texture(textureColor, uv); 56 | } 57 | 58 | if(uv.x >= 1.0 && uv.y < 1.0) 59 | { 60 | destColor += texture(textureDepth, uv + vec2(-1.0, 0.0)); 61 | } 62 | 63 | fragColor = destColor; 64 | } 65 | `; 66 | 67 | let uniform:UniformObject; 68 | uniform = new UniformObject(UniformObject.TYPE_MATRIX, "mvpMatrix"); 69 | this.uniformList[0] = uniform; 70 | 71 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "texturePosition"); 72 | this.uniformList[1] = uniform; 73 | 74 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureNormal"); 75 | this.uniformList[2] = uniform; 76 | 77 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureColor"); 78 | this.uniformList[3] = uniform; 79 | 80 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureDepth"); 81 | this.uniformList[4] = uniform; 82 | 83 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "screen"); 84 | this.uniformList[5] = uniform; 85 | 86 | let attribute:ShaderAttributeObject; 87 | attribute = new ShaderAttributeObject("position", 3); 88 | this.attributeList[0] = attribute; 89 | 90 | this.createProgram(); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/MultiRenderingTextureObject.ts: -------------------------------------------------------------------------------- 1 | import {RenderingTextureObject} from "../myLib/webgl/engine/RenderingTextureObject"; 2 | import {TextureTypeObject} from "./TextureTypeObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class MultiRenderingTextureObject extends RenderingTextureObject 7 | { 8 | public context2:WebGL2RenderingContext; 9 | public textureList:WebGLTexture[]; 10 | 11 | public textureTypeList:TextureTypeObject[]; 12 | 13 | constructor($context:WebGL2RenderingContext, $width:number, $height:number, $textureTypeList:TextureTypeObject[]) 14 | { 15 | super($context, $width, $height); 16 | 17 | this.textureTypeList = $textureTypeList; 18 | 19 | this.initMulti(); 20 | } 21 | 22 | public init():void 23 | { 24 | // do nothing 25 | } 26 | 27 | public initMulti():void 28 | { 29 | this.context2 = this.context; 30 | 31 | this.renderBuffer = this.context.createRenderbuffer(); 32 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, this.renderBuffer); 33 | this.context.renderbufferStorage(this.context.RENDERBUFFER, this.context.DEPTH_COMPONENT16, this.width, this.height); 34 | 35 | this.frameBuffer = this.context.createFramebuffer(); 36 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, this.frameBuffer); 37 | this.context.framebufferRenderbuffer(this.context.FRAMEBUFFER, this.context.DEPTH_ATTACHMENT, this.context.RENDERBUFFER, this.renderBuffer); 38 | 39 | this.textureList = []; 40 | let drawBuffers:number[] = []; 41 | let length:number = this.textureTypeList.length; 42 | for (let i:number = 0; i < length; i++) 43 | { 44 | let textureType:TextureTypeObject = this.textureTypeList[i]; 45 | let texture:WebGLTexture = this.context.createTexture(); 46 | this.context.bindTexture(this.context.TEXTURE_2D, texture); 47 | this.context.pixelStorei(this.context.UNPACK_FLIP_Y_WEBGL, false); 48 | this.context.texImage2D(this.context.TEXTURE_2D, 0, textureType.internalformat, this.width, this.height, 0, textureType.format, textureType.type, null); 49 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MAG_FILTER, this.context.NEAREST); 50 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MIN_FILTER, this.context.NEAREST); 51 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_S, this.context.CLAMP_TO_EDGE); 52 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_T, this.context.CLAMP_TO_EDGE); 53 | 54 | this.context.framebufferTexture2D(this.context2.DRAW_FRAMEBUFFER, this.context2["COLOR_ATTACHMENT" + i], this.context.TEXTURE_2D, texture, 0); 55 | 56 | this.textureList[i] = texture; 57 | drawBuffers[i] = this.context2["COLOR_ATTACHMENT" + i]; 58 | } 59 | this.context2.drawBuffers(drawBuffers); 60 | 61 | this.context.bindTexture(this.context.TEXTURE_2D, null); 62 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, null); 63 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, null); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/PlainColorShader.ts: -------------------------------------------------------------------------------- 1 | import {vec4} from "gl-matrix"; 2 | import {ShaderAttributeObject} from "../myLib/webgl/engine/ShaderAttributeObject"; 3 | import {ShaderObject} from "../myLib/webgl/engine/ShaderObject"; 4 | import {UniformObject} from "../myLib/webgl/engine/UniformObject"; 5 | /** 6 | * @author Kentaro Kawakatsu 7 | */ 8 | export class PlainColorShader extends ShaderObject 9 | { 10 | public init():void 11 | { 12 | // language=GLSL 13 | this.vShaderSource = `#version 300 es 14 | in vec3 position; 15 | uniform mat4 mvpMatrix; 16 | uniform vec4 color; 17 | out float vDepth; 18 | out vec4 vColor; 19 | 20 | void main(void) 21 | { 22 | vColor = color; 23 | gl_Position = mvpMatrix * vec4(position, 1.0); 24 | vDepth = gl_Position.z / gl_Position.w; 25 | } 26 | `; 27 | 28 | // language=GLSL 29 | this.fShaderSource = `#version 300 es 30 | precision mediump float; 31 | 32 | uniform vec4 screen; 33 | uniform sampler2D textureDepth; 34 | in float vDepth; 35 | in vec4 vColor; 36 | out vec4 fragColor; 37 | 38 | void main(void) 39 | { 40 | vec2 uv = gl_FragCoord.st * screen.xy; 41 | vec4 depth = texture(textureDepth, uv); 42 | float targetDepth = (depth.r * 2.0) - 1.0; 43 | vec4 color = vec4(0.0); 44 | if(targetDepth <= 0.0 || vDepth < targetDepth) 45 | { 46 | fragColor = vColor; 47 | } 48 | else 49 | { 50 | discard; 51 | } 52 | } 53 | `; 54 | 55 | let uniform:UniformObject; 56 | uniform = new UniformObject(UniformObject.TYPE_MATRIX, "mvpMatrix"); 57 | this.uniformList[0] = uniform; 58 | 59 | uniform = new UniformObject(UniformObject.TYPE_TEXTURE, "textureDepth"); 60 | this.uniformList[1] = uniform; 61 | 62 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "screen"); 63 | this.uniformList[2] = uniform; 64 | 65 | uniform = new UniformObject(UniformObject.TYPE_VECTOR4, "color"); 66 | uniform.vector4 = vec4.create(); 67 | this.uniformList[3] = uniform; 68 | 69 | let attribute:ShaderAttributeObject; 70 | attribute = new ShaderAttributeObject("position", 3); 71 | this.attributeList[0] = attribute; 72 | 73 | this.createProgram(); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/RGB.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class RGB 5 | { 6 | public r:number = 0; 7 | public g:number = 0; 8 | public b:number = 0; 9 | 10 | constructor(r:number, g:number, b:number) 11 | { 12 | this.r = r; 13 | this.g = g; 14 | this.b = b; 15 | } 16 | 17 | public static getValue(rgb:RGB):number 18 | { 19 | return (rgb.r * 0xFF << 16) | (rgb.g * 0xFF << 8) | (rgb.b * 0xFF << 0); 20 | } 21 | 22 | public static createFromHSV(h:number, s:number, v:number):RGB 23 | { 24 | if (s > 1.0) 25 | { 26 | s = 1.0; 27 | } 28 | 29 | if (v > 1.0) 30 | { 31 | v = 1.0; 32 | } 33 | 34 | let th:number = h % 360; 35 | let i:number = Math.floor(th / 60); 36 | let f:number = th / 60 - i; 37 | let m:number = v * (1 - s); 38 | let n:number = v * (1 - s * f); 39 | let k:number = v * (1 - s * (1 - f)); 40 | 41 | let color:RGB; 42 | if (s === 0) 43 | { 44 | color = new RGB(v, v, v); 45 | } 46 | else 47 | { 48 | switch (i) 49 | { 50 | case 0: 51 | { 52 | color = new RGB(v, k, m); 53 | break; 54 | } 55 | case 1: 56 | { 57 | color = new RGB(n, v, m); 58 | break; 59 | } 60 | case 2: 61 | { 62 | color = new RGB(m, v, k); 63 | break; 64 | } 65 | case 3: 66 | { 67 | color = new RGB(m, n, v); 68 | break; 69 | } 70 | case 4: 71 | { 72 | color = new RGB(k, m, v); 73 | break; 74 | } 75 | case 5: 76 | { 77 | color = new RGB(v, m, n); 78 | break; 79 | } 80 | } 81 | } 82 | return color; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /multiple_render_targets/src/ts/project/TextureTypeObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class TextureTypeObject 5 | { 6 | public internalformat:number = 0; 7 | public format:number = 0; 8 | public type:number = 0; 9 | 10 | constructor(internalformat:number, format:number, type:number) 11 | { 12 | this.internalformat = internalformat; 13 | this.format = format; 14 | this.type = type; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /multiple_render_targets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "lib": [ 5 | "dom", 6 | "es2015.promise", 7 | "es5" 8 | ], 9 | "target": "es5", 10 | "noImplicitAny": false, 11 | "sourceMap": false 12 | } 13 | } -------------------------------------------------------------------------------- /multiple_render_targets/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "indent": [ 9 | true, 10 | "spaces" 11 | ], 12 | "align": [ 13 | true, 14 | "parameters", 15 | "statements" 16 | ], 17 | "semicolon": true, 18 | "no-consecutive-blank-lines": true, 19 | "no-duplicate-variable": true, 20 | "no-eval": true, 21 | "member-access": true, 22 | "curly": true, 23 | "jsdoc-format": true, 24 | "no-internal-module": true, 25 | "no-string-literal": true, 26 | "no-trailing-whitespace": true, 27 | "no-var-requires": true, 28 | "no-var-keyword": true, 29 | "one-line": [ 30 | true, 31 | "check-whitespace" 32 | ], 33 | "quotemark": [ 34 | true, 35 | "double" 36 | ], 37 | "triple-equals": [ 38 | true, 39 | "allow-null-check" 40 | ], 41 | "typedef": [ 42 | true, 43 | "call-signature", 44 | "parameter", 45 | "property-declaration", 46 | "variable-declaration", 47 | "member-variable-declaration" 48 | ], 49 | "typedef-whitespace": [ 50 | true, 51 | { 52 | "call-signature": "nospace", 53 | "index-signature": "nospace", 54 | "parameter": "nospace", 55 | "property-declaration": "nospace", 56 | "variable-declaration": "nospace" 57 | }, 58 | { 59 | "call-signature": "nospace", 60 | "index-signature": "nospace", 61 | "parameter": "nospace", 62 | "property-declaration": "nospace", 63 | "variable-declaration": "nospace" 64 | } 65 | ], 66 | "variable-name": [ 67 | true, 68 | "ban-keywords" 69 | ], 70 | "whitespace": [ 71 | true, 72 | "check-branch", 73 | "check-decl", 74 | "check-operator", 75 | "check-separator", 76 | "check-typecast" 77 | ] 78 | } 79 | } -------------------------------------------------------------------------------- /multiple_render_targets/webpack.config.js: -------------------------------------------------------------------------------- 1 | // ビルド設定ファイル 2 | const buidConfig = require("./build_config"); 3 | 4 | const entry = {}; 5 | 6 | /** webpackの設定ファイルです。 */ 7 | let webpackConfig = { 8 | entry: buidConfig.tsEntryFiles, 9 | output: { 10 | filename: "[name].js" 11 | }, 12 | devtool: "source-map", 13 | resolve: { 14 | extensions: ["*", ".ts", ".js"] 15 | }, 16 | module: { 17 | loaders: [ 18 | {test: /\.ts$/, loader: 'ts-loader'} 19 | ] 20 | } 21 | }; 22 | 23 | module.exports = webpackConfig; 24 | -------------------------------------------------------------------------------- /transform_feedback/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /transform_feedback/build_config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ビルドの設定ファイル 3 | * 4 | * @author ICS-Kano 5 | */ 6 | /** ソースフォルダ */ 7 | const SRC_FOLDER = "./src"; 8 | 9 | /** TypeScriptフォルダ */ 10 | const TS_FOLDER = `${SRC_FOLDER}/ts`; 11 | /** TypeScriptファイルのエントリーファイル */ 12 | const TS_ENTRY_FILES_NAME = { 13 | "script": "Main.ts" 14 | }; 15 | 16 | /** 変換後のJS格納フォルダ */ 17 | const JS_FOLDER = `${SRC_FOLDER}/js`; 18 | 19 | /** リリースファイルの格納フォルダ */ 20 | const DIST_FOLDER = "dist"; 21 | 22 | /** リリース対象ファイルファイルの格納フォルダ */ 23 | const DIST_FILES = [ 24 | `${SRC_FOLDER}/**/*.html`, 25 | `${JS_FOLDER}/**/*.js` 26 | ]; 27 | 28 | // TypeScrptのエントリーファイルの作成 29 | let tsEntryFiles = {}; 30 | for (let tsKey in TS_ENTRY_FILES_NAME) { 31 | const key = tsKey; 32 | const tsFile = `${TS_FOLDER}/${TS_ENTRY_FILES_NAME[tsKey]}`; 33 | tsEntryFiles[key] = tsFile; 34 | } 35 | 36 | // moduleとしてexportする 37 | module.exports = { 38 | srcFolder: SRC_FOLDER, 39 | tsFolder: TS_FOLDER, 40 | tsEntryFiles: tsEntryFiles, 41 | jsFolder: JS_FOLDER, 42 | distFolder: DIST_FOLDER, 43 | distFiles: DIST_FILES 44 | }; -------------------------------------------------------------------------------- /transform_feedback/gulp/taskName.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Gulpのタスク名 3 | * 4 | * @author ICS-Kano 5 | */ 6 | module.exports = { 7 | "start": "start", 8 | "tsCompile": "tsCompile", 9 | "tsLint": "tsLint" 10 | }; 11 | -------------------------------------------------------------------------------- /transform_feedback/gulp/tasks/start.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ローカルサーバーの起動、ファイルウォッチ用のタスク 3 | * 4 | * @author ICS-Kano 5 | */ 6 | // 設定ファイル 7 | const config = require("../../build_config"); 8 | const taskName = require("../taskName"); 9 | const browserSync = require("browser-sync"); 10 | 11 | require("./tsCompile"); 12 | require("./tsLint"); 13 | 14 | const gulp = require("gulp"); 15 | 16 | /** 17 | * ローカルサーバーのタスク設定 18 | */ 19 | gulp.task(taskName.start, 20 | gulp.series( 21 | gulp.parallel( 22 | taskName.tsLint, 23 | taskName.tsCompile 24 | ), 25 | () => { 26 | startWatchTasks() 27 | } 28 | ) 29 | ); 30 | 31 | /** 32 | * ウォッチタスクを開始します。 33 | */ 34 | function startWatchTasks() { 35 | browserSync({ 36 | server: { 37 | baseDir: "src" // ルートとなるディレクトリを指定 38 | } 39 | }); 40 | 41 | // jsファイルを監視 42 | gulp.watch(`${config.jsFolder}/**/*.js`, (done) => { 43 | // ファイルに変更があれば同期しているブラウザをリロード 44 | browserSync.reload(); 45 | // リロード終了時に実行 46 | done() 47 | }); 48 | 49 | // TypeScriptファイルのウォッチ 50 | gulp.watch(`${config.tsFolder}/**/*.ts`, 51 | gulp.parallel( 52 | taskName.tsLint, // Lint 53 | taskName.tsCompile // コンパイル 54 | ) 55 | ) 56 | } 57 | -------------------------------------------------------------------------------- /transform_feedback/gulp/tasks/tsCompile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TypeScriptのコンパイルタスク 3 | * 4 | * @author ICS-Kano 5 | */ 6 | 7 | const config = require("../../build_config"); 8 | const webpackConfig = require('../../webpack.config.js'); 9 | 10 | const taskName = require("../taskName"); 11 | 12 | const gulp = require("gulp"); 13 | const plumber = require("gulp-plumber"); 14 | const webpackStream = require("webpack-stream"); 15 | const webpack = require("webpack"); 16 | 17 | const sourcemaps = require("gulp-sourcemaps"); 18 | 19 | // TODO:webpak 2 fix 20 | 21 | gulp.task(taskName.tsCompile, () => { 22 | return sourcemaps.init() 23 | .pipe(plumber()) 24 | .pipe(webpackStream(webpackConfig)) 25 | .pipe(sourcemaps.write("./")) 26 | .pipe(gulp.dest(config.jsFolder)) 27 | }); 28 | -------------------------------------------------------------------------------- /transform_feedback/gulp/tasks/tsLint.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TypeScriptのLintチェック 3 | * 4 | * @author ICS-Kano 5 | */ 6 | const config = require("../../build_config"); 7 | const taskName = require("../taskName"); 8 | 9 | const gulp = require("gulp"); 10 | const tslint = require("gulp-tslint"); 11 | const notify = require("gulp-notify"); 12 | const plumber = require("gulp-plumber"); 13 | 14 | gulp.task(taskName.tsLint, () => { 15 | return gulp.src(`${config.tsFolder}**/*.ts`) 16 | .pipe(plumber({ 17 | errorHandler: function (err) { 18 | notify.onError(`ts Error:${err}`); 19 | this.emit("end") 20 | } 21 | })) 22 | .pipe(tslint({ 23 | formatter: "verbose", 24 | configuration: "./tslint.json" 25 | })) 26 | .pipe(tslint.report()) 27 | }); 28 | -------------------------------------------------------------------------------- /transform_feedback/gulpfile.js: -------------------------------------------------------------------------------- 1 | const requireDir = require("require-dir"); 2 | requireDir("./gulp", {recurse: true}); 3 | -------------------------------------------------------------------------------- /transform_feedback/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl2-demo-transformfeedback", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "", 6 | "scripts": { 7 | "gulp": "gulp", 8 | "webpack": "webpack", 9 | "start": "gulp start", 10 | "tsc": "gulp tsCompile", 11 | "tslint": "gulp tsLint" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "browser-sync": "^2.18.8", 18 | "gl-matrix": "^2.4.0", 19 | "gulp": "github:gulpjs/gulp#4.0", 20 | "gulp-notify": "^3.2.0", 21 | "gulp-plumber": "^1.1.0", 22 | "gulp-sourcemaps": "^2.4.0", 23 | "gulp-tslint": "^8.1.2", 24 | "require-dir": "^0.3.1", 25 | "ts-loader": "^3.4.0", 26 | "tslint": "^5.9.1", 27 | "typescript": "^2.2.1", 28 | "webpack": "^3.10.0", 29 | "webpack-stream": "^4.0.0" 30 | }, 31 | "dependencies": { 32 | "@types/gl-matrix": "^2.4.0", 33 | "@types/stats.js": "^0.17.0", 34 | "@types/webgl2": "0.0.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /transform_feedback/src/css/style.css: -------------------------------------------------------------------------------- 1 | #container { 2 | position: relative; 3 | } 4 | .guiStyle { 5 | position: absolute; 6 | top: 0; 7 | right: 0; 8 | } 9 | -------------------------------------------------------------------------------- /transform_feedback/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL 2.0 demo - Transform Feedback 8 | 9 | 10 | 11 | 18 | 19 | 20 |
21 |

※このデモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。

22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /transform_feedback/src/js/stats.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global.Stats = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | /** 8 | * @author mrdoob / http://mrdoob.com/ 9 | */ 10 | 11 | var Stats = function () { 12 | 13 | var mode = 0; 14 | 15 | var container = document.createElement( 'div' ); 16 | container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; 17 | container.addEventListener( 'click', function ( event ) { 18 | 19 | event.preventDefault(); 20 | showPanel( ++ mode % container.children.length ); 21 | 22 | }, false ); 23 | 24 | // 25 | 26 | function addPanel( panel ) { 27 | 28 | container.appendChild( panel.dom ); 29 | return panel; 30 | 31 | } 32 | 33 | function showPanel( id ) { 34 | 35 | for ( var i = 0; i < container.children.length; i ++ ) { 36 | 37 | container.children[ i ].style.display = i === id ? 'block' : 'none'; 38 | 39 | } 40 | 41 | mode = id; 42 | 43 | } 44 | 45 | // 46 | 47 | var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0; 48 | 49 | var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) ); 50 | var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) ); 51 | 52 | if ( self.performance && self.performance.memory ) { 53 | 54 | var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) ); 55 | 56 | } 57 | 58 | showPanel( 0 ); 59 | 60 | return { 61 | 62 | REVISION: 16, 63 | 64 | dom: container, 65 | 66 | addPanel: addPanel, 67 | showPanel: showPanel, 68 | 69 | begin: function () { 70 | 71 | beginTime = ( performance || Date ).now(); 72 | 73 | }, 74 | 75 | end: function () { 76 | 77 | frames ++; 78 | 79 | var time = ( performance || Date ).now(); 80 | 81 | msPanel.update( time - beginTime, 200 ); 82 | 83 | if ( time > prevTime + 1000 ) { 84 | 85 | fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 ); 86 | 87 | prevTime = time; 88 | frames = 0; 89 | 90 | if ( memPanel ) { 91 | 92 | var memory = performance.memory; 93 | memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 ); 94 | 95 | } 96 | 97 | } 98 | 99 | return time; 100 | 101 | }, 102 | 103 | update: function () { 104 | 105 | beginTime = this.end(); 106 | 107 | }, 108 | 109 | // Backwards Compatibility 110 | 111 | domElement: container, 112 | setMode: showPanel 113 | 114 | }; 115 | 116 | }; 117 | 118 | Stats.Panel = function ( name, fg, bg ) { 119 | 120 | var min = Infinity, max = 0, round = Math.round; 121 | var PR = round( window.devicePixelRatio || 1 ); 122 | 123 | var WIDTH = 80 * PR, HEIGHT = 48 * PR, 124 | TEXT_X = 3 * PR, TEXT_Y = 2 * PR, 125 | GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, 126 | GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; 127 | 128 | var canvas = document.createElement( 'canvas' ); 129 | canvas.width = WIDTH; 130 | canvas.height = HEIGHT; 131 | canvas.style.cssText = 'width:80px;height:48px'; 132 | 133 | var context = canvas.getContext( '2d' ); 134 | context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif'; 135 | context.textBaseline = 'top'; 136 | 137 | context.fillStyle = bg; 138 | context.fillRect( 0, 0, WIDTH, HEIGHT ); 139 | 140 | context.fillStyle = fg; 141 | context.fillText( name, TEXT_X, TEXT_Y ); 142 | context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); 143 | 144 | context.fillStyle = bg; 145 | context.globalAlpha = 0.9; 146 | context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); 147 | 148 | return { 149 | 150 | dom: canvas, 151 | 152 | update: function ( value, maxValue ) { 153 | 154 | min = Math.min( min, value ); 155 | max = Math.max( max, value ); 156 | 157 | context.fillStyle = bg; 158 | context.globalAlpha = 1; 159 | context.fillRect( 0, 0, WIDTH, GRAPH_Y ); 160 | context.fillStyle = fg; 161 | context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y ); 162 | 163 | context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT ); 164 | 165 | context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT ); 166 | 167 | context.fillStyle = bg; 168 | context.globalAlpha = 0.9; 169 | context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) ); 170 | 171 | } 172 | 173 | }; 174 | 175 | }; 176 | 177 | return Stats; 178 | 179 | }))); 180 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/Main.ts: -------------------------------------------------------------------------------- 1 | import EventName from "./enum/EventName"; 2 | import {RoundCameraController} from "./myLib/webgl/controller/RoundCameraController"; 3 | import {Camera} from "./myLib/webgl/engine/Camera"; 4 | import {TransformFeedbackShader} from "./project/TransformFeedbackShader"; 5 | import {TransformFeedbackVertex} from "./project/TransformFeedbackVertex"; 6 | import MouseEventName from "./myLib/enum/events/MouseEventName"; 7 | import {vec4} from "gl-matrix"; 8 | 9 | /** 10 | * @author Kentaro Kawakatsu 11 | */ 12 | class Main 13 | { 14 | private static RAD:number = Math.PI / 180; 15 | 16 | private static CANVAS_WIDTH:number = 960; 17 | private static CANVAS_HEIGHT:number = 540; 18 | 19 | private stats:Stats; 20 | 21 | private canvas:HTMLCanvasElement; 22 | private context:WebGL2RenderingContext; 23 | 24 | private controller:RoundCameraController; 25 | private camera:Camera; 26 | 27 | private numParticles:number = 100000; 28 | 29 | private transformFeedback:WebGLTransformFeedback; 30 | private transformFeedbackVertex1:TransformFeedbackVertex; 31 | private transformFeedbackVertex2:TransformFeedbackVertex; 32 | private transformFeedbackShader:TransformFeedbackShader; 33 | 34 | private time:number = 0; 35 | private mouseX:number = 0; 36 | private mouseY:number = 0; 37 | 38 | constructor() 39 | { 40 | console.log(new Date()); 41 | 42 | this.canvas = document.getElementById(("myCanvas")); 43 | this.canvas.width = Main.CANVAS_WIDTH; 44 | this.canvas.height = Main.CANVAS_HEIGHT; 45 | this.context = this.canvas.getContext("webgl2"); 46 | 47 | if (!this.context) 48 | { 49 | // WebGL2 is not supported 50 | this.canvas.style.display = "none"; 51 | return; 52 | } 53 | ( document.getElementById(("notSupportedDescription"))).style.display = "none"; 54 | 55 | // Stats 56 | this.stats = new Stats(); 57 | document.body.appendChild(this.stats.dom); 58 | 59 | this.context.clearColor(0.0, 0.0, 0.0, 1.0); 60 | this.context.clearDepth(1.0); 61 | this.context.enable(this.context.BLEND); 62 | this.context.blendEquation(this.context.FUNC_ADD); 63 | this.context.blendFunc(this.context.ONE, this.context.ONE); 64 | // 65 | this.transformFeedback = this.context.createTransformFeedback(); 66 | this.transformFeedbackShader = new TransformFeedbackShader(this.context); 67 | this.transformFeedbackVertex1 = new TransformFeedbackVertex(this.context, this.numParticles); 68 | this.transformFeedbackVertex1.attachShader(this.transformFeedbackShader); 69 | this.transformFeedbackVertex2 = new TransformFeedbackVertex(this.context, this.numParticles); 70 | this.transformFeedbackVertex2.attachShader(this.transformFeedbackShader); 71 | // 72 | this.canvas.addEventListener(MouseEventName.MOUSE_MOVE, (event:MouseEvent) => 73 | { 74 | let rect:ClientRect = ( event.target).getBoundingClientRect(); 75 | this.mouseX = (event.clientX - rect.left) / Main.CANVAS_WIDTH; 76 | this.mouseY = (event.clientY - rect.top) / Main.CANVAS_HEIGHT; 77 | }); 78 | // 79 | this.camera = new Camera(60 * Main.RAD, Main.CANVAS_WIDTH / Main.CANVAS_HEIGHT, 0.1, 1000.0); 80 | this.controller = new RoundCameraController(this.camera, this.canvas); 81 | this.canvas.style.cursor = "move"; 82 | this.controller.radius = 80; 83 | this.controller.radiusOffset = 1; 84 | this.controller.rotate(0, 0); 85 | 86 | this.render(); 87 | } 88 | 89 | private render():void 90 | { 91 | this.stats.begin(); 92 | 93 | this.controller.upDate(0.1); 94 | // 95 | this.context.clear(this.context.COLOR_BUFFER_BIT | this.context.DEPTH_BUFFER_BIT); 96 | // 97 | this.transformFeedbackShader.getUniform("mvpMatrix").matrix = this.camera.getCameraMtx(); 98 | this.transformFeedbackShader.getUniform("mouse").vector4 = vec4.fromValues(1 / (40.0 + this.mouseX * 20.0), 1 / (1.0 + this.mouseY * 20.0), 0, 0); 99 | this.transformFeedbackShader.getUniform("time").value = this.time; 100 | this.context.bindTransformFeedback(this.context.TRANSFORM_FEEDBACK, this.transformFeedback); 101 | // this.context.enable(this.context.RASTERIZER_DISCARD); 102 | this.transformFeedbackShader.bindShader(); 103 | this.transformFeedbackVertex1.bindVertexbuffer(); 104 | this.transformFeedbackVertex2.bindBufferBase(); 105 | this.context.beginTransformFeedback(this.context.POINTS); 106 | this.context.drawArrays(this.context.POINTS, 0, this.numParticles); 107 | this.context.endTransformFeedback(); 108 | this.transformFeedbackVertex2.unbindBufferBase(); 109 | this.context.bindTransformFeedback(this.context.TRANSFORM_FEEDBACK, null); 110 | // this.context.disable(this.context.RASTERIZER_DISCARD); 111 | let tmp:TransformFeedbackVertex = this.transformFeedbackVertex2; 112 | this.transformFeedbackVertex2 = this.transformFeedbackVertex1; 113 | this.transformFeedbackVertex1 = tmp; 114 | // 115 | this.context.flush(); 116 | 117 | this.time += 1; 118 | 119 | this.stats.end(); 120 | 121 | requestAnimationFrame(() => this.render()); 122 | } 123 | } 124 | 125 | window.addEventListener(EventName.DOM_CONTENT_LOADED, () => new Main()); 126 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/enum/EventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class EventName { 5 | static DOM_CONTENT_LOADED:string = "DOMContentLoaded" 6 | } 7 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/MyLib.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MyLib 5 | { 6 | constructor() 7 | { 8 | 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/enum/events/KeyboardEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class KeyboardEventName 5 | { 6 | public static KEY_DOWN:string = "keydown"; 7 | } 8 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/enum/events/MSGestureEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MSGestureEventName 5 | { 6 | public static GESTURE_START:string = "gesturestart"; 7 | public static GESTURE_CHANGE:string = "gesturechange"; 8 | public static GESTURE_END:string = "gestureend"; 9 | } 10 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/enum/events/MouseEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class MouseEventName 5 | { 6 | public static MOUSE_DOWN:string = "mousedown"; 7 | public static MOUSE_UP:string = "mouseup"; 8 | public static MOUSE_MOVE:string = "mousemove"; 9 | public static MOUSE_WHEEL:string = "mousewheel"; 10 | } 11 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/enum/events/TouchEventName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class TouchEventName 5 | { 6 | public static TOUCH_START:string = "touchstart"; 7 | public static TOUCH_MOVE:string = "touchmove"; 8 | public static TOUCH_END:string = "touchend"; 9 | } 10 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/enum/ui/KeyCode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export default class KeyCode 5 | { 6 | public static UP:number = 38; 7 | public static DOWN:number = 40; 8 | } 9 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/controller/RoundCameraController.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import KeyboardEventName from "../../enum/events/KeyboardEventName"; 3 | import MouseEventName from "../../enum/events/MouseEventName"; 4 | import MSGestureEventName from "../../enum/events/MSGestureEventName"; 5 | import TouchEventName from "../../enum/events/TouchEventName"; 6 | import KeyCode from "../../enum/ui/KeyCode"; 7 | import {Camera} from "../engine/Camera"; 8 | /** 9 | * @author Kentaro Kawakatsu 10 | */ 11 | export class RoundCameraController 12 | { 13 | public static RAD:number = Math.PI / 180.0; 14 | 15 | // parameter 16 | public radiusMin:number = 1.0; 17 | public radiusOffset:number = 0.1; 18 | public gestureRadiusFactor:number = 20.0; 19 | 20 | // camera 21 | public radius:number = 2.0; 22 | private _camera:Camera; 23 | private _stage:HTMLCanvasElement; 24 | private _target:vec3; 25 | private _theta:number = 0.0; 26 | private _oldX:number = 0.0; 27 | private _phi:number = 90.0; 28 | private _oldY:number = 0.0; 29 | 30 | private _currentTheta:number = 0.0; 31 | private _currentPhi:number = 90.0; 32 | 33 | // for mouse 34 | public isMouseDown:Boolean; 35 | 36 | // for touch 37 | private _identifier:number; 38 | private _oldRadius:number; 39 | private _isGestureChange:Boolean; 40 | 41 | constructor(camera:Camera, stage:HTMLCanvasElement) 42 | { 43 | this._camera = camera; 44 | this._stage = stage; 45 | this._target = vec3.fromValues(0.0, 0.0, 0.0); 46 | this.enable(); 47 | this._updateCamera(); 48 | } 49 | 50 | public enable():void 51 | { 52 | document.addEventListener(KeyboardEventName.KEY_DOWN, (event:KeyboardEvent) => 53 | { 54 | this._keyHandler(event); 55 | }); 56 | document.addEventListener(MouseEventName.MOUSE_UP, (event:MouseEvent) => 57 | { 58 | this._upHandler(event); 59 | }); 60 | this._stage.addEventListener(MouseEventName.MOUSE_DOWN, (event:MouseEvent) => 61 | { 62 | this._downHandler(event); 63 | }); 64 | this._stage.addEventListener(MouseEventName.MOUSE_MOVE, (event:MouseEvent) => 65 | { 66 | this._moveHandler(event); 67 | }); 68 | this._stage.addEventListener(MouseEventName.MOUSE_WHEEL, (event:WheelEvent) => 69 | { 70 | this._wheelHandler(event); 71 | }); 72 | 73 | // touch 74 | if ("ontouchstart" in window) 75 | { 76 | this._stage.addEventListener(TouchEventName.TOUCH_START, (event:TouchEvent) => 77 | { 78 | this._touchStartHandler(event); 79 | }); 80 | this._stage.addEventListener(TouchEventName.TOUCH_MOVE, (event:TouchEvent) => 81 | { 82 | this._touchMoveHandler(event); 83 | }); 84 | document.addEventListener(TouchEventName.TOUCH_END, (event:TouchEvent) => 85 | { 86 | this._touchEndHandler(event); 87 | }); 88 | } 89 | if ("ongesturestart" in window) 90 | { 91 | this._stage.addEventListener(MSGestureEventName.GESTURE_START, (event:MSGestureEvent) => 92 | { 93 | this._gestureStartHandler(event); 94 | }); 95 | this._stage.addEventListener(MSGestureEventName.GESTURE_CHANGE, (event:MSGestureEvent) => 96 | { 97 | this._gestureChangeHandler(event); 98 | }); 99 | document.addEventListener(MSGestureEventName.GESTURE_END, (event:MSGestureEvent) => 100 | { 101 | this._gestureEndHandler(event); 102 | }); 103 | } 104 | } 105 | 106 | private _keyHandler(event:KeyboardEvent):void 107 | { 108 | switch (event.keyCode) 109 | { 110 | case KeyCode.UP: 111 | this.radius -= this.radiusOffset; 112 | if (this.radius < this.radiusMin) 113 | { 114 | this.radius = this.radiusMin; 115 | } 116 | break; 117 | case KeyCode.DOWN: 118 | this.radius += this.radiusOffset; 119 | break; 120 | default: 121 | break; 122 | } 123 | } 124 | 125 | private _upHandler(event:MouseEvent):void 126 | { 127 | this.isMouseDown = false; 128 | } 129 | 130 | private _downHandler(event:MouseEvent):void 131 | { 132 | this.isMouseDown = true; 133 | let rect:ClientRect = ( event.target).getBoundingClientRect(); 134 | this._oldX = event.clientX - rect.left; 135 | this._oldY = event.clientY - rect.top; 136 | } 137 | 138 | private _wheelHandler(event:MouseWheelEvent):void 139 | { 140 | if (event.wheelDelta > 0) 141 | { 142 | this.radius -= this.radiusOffset; 143 | if (this.radius < this.radiusMin) 144 | { 145 | this.radius = this.radiusMin; 146 | } 147 | } 148 | else 149 | { 150 | this.radius += this.radiusOffset; 151 | } 152 | } 153 | 154 | private _moveHandler(event:MouseEvent):void 155 | { 156 | if (this.isMouseDown) 157 | { 158 | let rect:ClientRect = ( event.target).getBoundingClientRect(); 159 | let stageX:number = event.clientX - rect.left; 160 | let stageY:number = event.clientY - rect.top; 161 | 162 | this.inputXY(stageX, stageY); 163 | } 164 | } 165 | 166 | private _touchStartHandler(event:TouchEvent):void 167 | { 168 | event.preventDefault(); 169 | if (!this.isMouseDown) 170 | { 171 | let touches:TouchList = event.changedTouches; 172 | let touch:Touch = touches[0]; 173 | this.isMouseDown = true; 174 | this._identifier = touch.identifier; 175 | let target:HTMLElement = touch.target; 176 | this._oldX = touch.pageX - target.offsetLeft; 177 | this._oldY = touch.pageY - target.offsetTop; 178 | } 179 | } 180 | 181 | private _touchMoveHandler(event:TouchEvent):void 182 | { 183 | event.preventDefault(); 184 | if (this._isGestureChange) 185 | { 186 | return; 187 | } 188 | let touches:TouchList = event.changedTouches; 189 | let touchLength:number = touches.length; 190 | for (let i:number = 0; i < touchLength; i++) 191 | { 192 | let touch:Touch = touches[i]; 193 | if (touch.identifier === this._identifier) 194 | { 195 | let target:HTMLElement = touch.target; 196 | let stageX:number = touch.pageX - target.offsetLeft; 197 | let stageY:number = touch.pageY - target.offsetTop; 198 | this.inputXY(stageX, stageY); 199 | break; 200 | } 201 | } 202 | } 203 | 204 | private _touchEndHandler(event:TouchEvent):void 205 | { 206 | if (this.isMouseDown) 207 | { 208 | event.preventDefault(); 209 | } 210 | this.isMouseDown = false; 211 | } 212 | 213 | private _gestureStartHandler(event:MSGestureEvent):void 214 | { 215 | this._isGestureChange = true; 216 | this.isMouseDown = true; 217 | this._oldRadius = this.radius; 218 | } 219 | 220 | private _gestureChangeHandler(event:MSGestureEvent):void 221 | { 222 | event.preventDefault(); 223 | event.stopImmediatePropagation(); 224 | this.radius = this._oldRadius + this.gestureRadiusFactor * this.radiusOffset * (1 - event.scale); 225 | if (this.radius < this.radiusMin) 226 | { 227 | this.radius = this.radiusMin; 228 | } 229 | } 230 | 231 | private _gestureEndHandler(event:MSGestureEvent):void 232 | { 233 | this._isGestureChange = false; 234 | this.isMouseDown = false; 235 | this._identifier = -1; 236 | } 237 | 238 | private inputXY(newX:number, newY:number):void 239 | { 240 | this._theta -= (newX - this._oldX) * 0.3; 241 | this._oldX = newX; 242 | this._phi -= (newY - this._oldY) * 0.3; 243 | this._oldY = newY; 244 | // 245 | if (this._phi < 20) 246 | { 247 | this._phi = 20; 248 | } 249 | else if (this._phi > 160) 250 | { 251 | this._phi = 160; 252 | } 253 | } 254 | 255 | private _updateCamera():void 256 | { 257 | let t:number = this._currentTheta * RoundCameraController.RAD; 258 | let p:number = this._currentPhi * RoundCameraController.RAD; 259 | 260 | let rsin:number = this.radius * Math.sin(p); 261 | this._camera.x = rsin * Math.sin(t) + this._target[0]; 262 | this._camera.z = rsin * Math.cos(t) + this._target[2]; 263 | this._camera.y = this.radius * Math.cos(p) + this._target[1]; 264 | 265 | this._camera.lookAt(this._target); 266 | } 267 | 268 | public upDate(factor:number = 0.1):void 269 | { 270 | this._currentTheta += (this._theta - this._currentTheta) * factor; 271 | this._currentPhi += (this._phi - this._currentPhi) * factor; 272 | 273 | this._updateCamera(); 274 | } 275 | 276 | public rotate(dTheta:number, dPhi:number):void 277 | { 278 | this._theta += dTheta; 279 | this._phi += dPhi; 280 | } 281 | 282 | public set(theta:number, phi:number):void 283 | { 284 | this._theta = theta; 285 | this._phi = phi; 286 | } 287 | } 288 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/Camera.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class Camera 6 | { 7 | public static DIRECTION:vec3 = vec3.fromValues(0.0, 0.0, 1.0); 8 | // 9 | private _cameraUP:vec3 = vec3.fromValues(0.0, 1.0, 0.0); 10 | // 11 | private _projectionMtx:mat4 = mat4.identity(mat4.create()); 12 | private _cameraMtx:mat4 = mat4.identity(mat4.create()); 13 | private _lookMtx:mat4 = mat4.identity(mat4.create()); 14 | // 15 | public x:number = 0.0; 16 | public y:number = 0.0; 17 | public z:number = 0.0; 18 | 19 | constructor(fov:number, aspect:number, zNear:number, zFar:number) 20 | { 21 | mat4.perspective(this._projectionMtx, fov, aspect, zNear, zFar); 22 | } 23 | 24 | public getCameraMtx():mat4 25 | { 26 | return this._cameraMtx; 27 | } 28 | 29 | public lookAt(point:vec3):void 30 | { 31 | mat4.identity(this._lookMtx); 32 | mat4.lookAt(this._lookMtx, vec3.fromValues(this.x, this.y, this.z), point, this._cameraUP); 33 | mat4.multiply(this._cameraMtx, this._projectionMtx, this._lookMtx); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/RenderingObject.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "./ShaderAttributeObject"; 2 | import {ShaderObject} from "./ShaderObject"; 3 | import {VertexAttributeObject} from "./VertexAttributeObject"; 4 | /** 5 | * @author Kentaro Kawakatsu 6 | */ 7 | export class RenderingObject 8 | { 9 | public context:WebGLRenderingContext; 10 | 11 | public vboList:VertexAttributeObject[]; 12 | public ibo:WebGLBuffer; 13 | 14 | public vboDataList:number[][]; 15 | public iboData:number[]; 16 | 17 | public shader:ShaderObject; 18 | 19 | constructor($context:WebGLRenderingContext) 20 | { 21 | this.context = $context; 22 | 23 | this.vboList = []; 24 | this.vboDataList = []; 25 | 26 | this.init(); 27 | } 28 | 29 | public init():void 30 | { 31 | } 32 | 33 | public attachShader($shader:ShaderObject):void 34 | { 35 | this.shader = $shader; 36 | } 37 | 38 | public bindVertexbuffer():void 39 | { 40 | const length:number = this.shader.attributeList.length; 41 | for (let i:number = 0; i < length; i++) 42 | { 43 | let attribute:ShaderAttributeObject = this.shader.attributeList[i]; 44 | if (attribute.location >= 0) 45 | { 46 | let vbo:VertexAttributeObject = this.getVertexBuffer(attribute.name); 47 | this.context.bindBuffer(this.context.ARRAY_BUFFER, vbo.buffer); 48 | this.context.enableVertexAttribArray(attribute.location); 49 | this.context.vertexAttribPointer(attribute.location, attribute.stride, this.context.FLOAT, false, vbo.byteStride, vbo.bufferOffset); 50 | } 51 | } 52 | } 53 | 54 | public getVertexBuffer(attributeName:string):VertexAttributeObject 55 | { 56 | const length:number = this.vboList.length; 57 | for (let i:number = 0; i < length; i++) 58 | { 59 | let attribute:VertexAttributeObject = this.vboList[i]; 60 | if (attribute.name === attributeName) 61 | { 62 | return attribute; 63 | } 64 | } 65 | return null; 66 | } 67 | 68 | public bindIndexbuffer():void 69 | { 70 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/RenderingTextureObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class RenderingTextureObject 5 | { 6 | public context:WebGLRenderingContext; 7 | 8 | public frameBuffer:WebGLFramebuffer; 9 | public renderBuffer:WebGLRenderbuffer; 10 | public texture:WebGLTexture; 11 | 12 | public width:number; 13 | public height:number; 14 | 15 | constructor($context:WebGLRenderingContext, $width:number, $height:number) 16 | { 17 | this.context = $context; 18 | this.width = $width; 19 | this.height = $height; 20 | this.init(); 21 | } 22 | 23 | public init():void 24 | { 25 | this.renderBuffer = this.context.createRenderbuffer(); 26 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, this.renderBuffer); 27 | this.context.renderbufferStorage(this.context.RENDERBUFFER, this.context.DEPTH_COMPONENT16, this.width, this.height); 28 | 29 | this.frameBuffer = this.context.createFramebuffer(); 30 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, this.frameBuffer); 31 | this.context.framebufferRenderbuffer(this.context.FRAMEBUFFER, this.context.DEPTH_ATTACHMENT, this.context.RENDERBUFFER, this.renderBuffer); 32 | 33 | this.texture = this.context.createTexture(); 34 | this.context.bindTexture(this.context.TEXTURE_2D, this.texture); 35 | this.context.texImage2D(this.context.TEXTURE_2D, 0, this.context.RGBA, this.width, this.height, 0, this.context.RGBA, this.context.UNSIGNED_BYTE, null); 36 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MAG_FILTER, this.context.LINEAR); 37 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MIN_FILTER, this.context.LINEAR); 38 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_S, this.context.CLAMP_TO_EDGE); 39 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_WRAP_T, this.context.CLAMP_TO_EDGE); 40 | 41 | this.context.framebufferTexture2D(this.context.FRAMEBUFFER, this.context.COLOR_ATTACHMENT0, this.context.TEXTURE_2D, this.texture, 0); 42 | 43 | this.context.bindTexture(this.context.TEXTURE_2D, null); 44 | this.context.bindRenderbuffer(this.context.RENDERBUFFER, null); 45 | this.context.bindFramebuffer(this.context.FRAMEBUFFER, null); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/ShaderAttributeObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class ShaderAttributeObject 5 | { 6 | public name:string; 7 | public stride:number; 8 | public location:number; 9 | 10 | constructor($name:string, $stride:number) 11 | { 12 | this.name = $name; 13 | this.stride = $stride; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/ShaderObject.ts: -------------------------------------------------------------------------------- 1 | import {ShaderAttributeObject} from "./ShaderAttributeObject"; 2 | import {UniformObject} from "./UniformObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class ShaderObject 7 | { 8 | public context:WebGLRenderingContext; 9 | 10 | public program:WebGLProgram; 11 | public vShader:WebGLShader; 12 | public fShader:WebGLShader; 13 | public uniformList:UniformObject[]; 14 | public attributeList:ShaderAttributeObject[]; 15 | 16 | public vShaderSource:string; 17 | public fShaderSource:string; 18 | 19 | constructor($context:WebGLRenderingContext) 20 | { 21 | this.context = $context; 22 | 23 | this.uniformList = []; 24 | this.attributeList = []; 25 | this.init(); 26 | } 27 | 28 | public init():void 29 | { 30 | 31 | } 32 | 33 | public createProgram():void 34 | { 35 | this.vShader = this.creatShader(this.vShaderSource, this.context.VERTEX_SHADER); 36 | this.fShader = this.creatShader(this.fShaderSource, this.context.FRAGMENT_SHADER); 37 | 38 | this.program = this.context.createProgram(); 39 | this.context.attachShader(this.program, this.vShader); 40 | this.context.attachShader(this.program, this.fShader); 41 | 42 | this.context.linkProgram(this.program); 43 | 44 | let i:number; 45 | let length:number; 46 | 47 | length = this.attributeList.length; 48 | for (i = 0; i < length; i++) 49 | { 50 | let attribute:ShaderAttributeObject = this.attributeList[i]; 51 | attribute.location = this.context.getAttribLocation(this.program, attribute.name); 52 | } 53 | 54 | length = this.uniformList.length; 55 | for (i = 0; i < length; i++) 56 | { 57 | let uniform:UniformObject = this.uniformList[i]; 58 | uniform.location = this.context.getUniformLocation(this.program, uniform.name); 59 | } 60 | } 61 | 62 | public bindShader():void 63 | { 64 | this.bindProgram(); 65 | this.bindUniform(); 66 | } 67 | 68 | public bindProgram():void 69 | { 70 | if (this.context.getProgramParameter(this.program, this.context.LINK_STATUS)) 71 | { 72 | this.context.useProgram(this.program); 73 | } 74 | else 75 | { 76 | console.log(this.context.getProgramInfoLog(this.program)); 77 | } 78 | } 79 | 80 | public bindUniform():void 81 | { 82 | const length:number = this.uniformList.length; 83 | for (let i:number = 0; i < length; i++) 84 | { 85 | let uniform:UniformObject = this.uniformList[i]; 86 | switch (uniform.type) 87 | { 88 | case UniformObject.TYPE_MATRIX: 89 | this.context.uniformMatrix4fv(uniform.location, false, uniform.matrix); 90 | break; 91 | case UniformObject.TYPE_VALUE: 92 | this.context.uniform1f(uniform.location, uniform.value); 93 | break; 94 | case UniformObject.TYPE_VECTOR3: 95 | this.context.uniform3fv(uniform.location, uniform.vector3); 96 | break; 97 | case UniformObject.TYPE_VECTOR4: 98 | this.context.uniform4fv(uniform.location, uniform.vector4); 99 | break; 100 | case UniformObject.TYPE_TEXTURE: 101 | this.context.uniform1i(uniform.location, uniform.value); 102 | this.context.activeTexture(this.context["TEXTURE" + uniform.value]); 103 | this.context.bindTexture(this.context.TEXTURE_2D, uniform.texture); 104 | break; 105 | default: 106 | break; 107 | } 108 | } 109 | } 110 | 111 | public creatShader(source:string, type:number):WebGLShader 112 | { 113 | let shader:WebGLShader = this.context.createShader(type); 114 | this.context.shaderSource(shader, source); 115 | this.context.compileShader(shader); 116 | 117 | if (this.context.getShaderParameter(shader, this.context.COMPILE_STATUS)) 118 | { 119 | return shader; 120 | } 121 | else 122 | { 123 | console.log(type === this.context.VERTEX_SHADER, this.context.getShaderInfoLog(shader)); 124 | return null; 125 | } 126 | } 127 | 128 | public getUniform(uniformName:string):UniformObject 129 | { 130 | const length:number = this.uniformList.length; 131 | for (let i:number = 0; i < length; i++) 132 | { 133 | let uniform:UniformObject = this.uniformList[i]; 134 | if (uniform.name === uniformName) 135 | { 136 | return uniform; 137 | } 138 | } 139 | return null; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/TextureObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class TextureObject 5 | { 6 | public context:WebGLRenderingContext; 7 | 8 | public texture:WebGLTexture; 9 | 10 | public image:HTMLImageElement; 11 | public height:number; 12 | 13 | constructor($context:WebGLRenderingContext) 14 | { 15 | this.context = $context; 16 | this.init(); 17 | } 18 | 19 | public init():void 20 | { 21 | this.texture = this.context.createTexture(); 22 | } 23 | 24 | public setImage(image:HTMLImageElement):void 25 | { 26 | this.image = image; 27 | this.context.bindTexture(this.context.TEXTURE_2D, this.texture); 28 | this.context.texImage2D(this.context.TEXTURE_2D, 0, this.context.RGBA, this.context.RGBA, this.context.UNSIGNED_BYTE, image); 29 | this.context.generateMipmap(this.context.TEXTURE_2D); 30 | this.context.texParameteri(this.context.TEXTURE_2D, this.context.TEXTURE_MIN_FILTER, this.context.LINEAR_MIPMAP_LINEAR); 31 | this.context.bindTexture(this.context.TEXTURE_2D, null); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/UniformObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3, vec4} from "gl-matrix"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class UniformObject 6 | { 7 | public static TYPE_VALUE:number = 0; 8 | public static TYPE_VECTOR3:number = 1; 9 | public static TYPE_VECTOR4:number = 2; 10 | public static TYPE_MATRIX:number = 3; 11 | public static TYPE_TEXTURE:number = 4; 12 | 13 | public type:number; 14 | public name:string; 15 | public location:WebGLUniformLocation; 16 | public value:number; 17 | public vector3:vec3; 18 | public vector4:vec4; 19 | public matrix:mat4; 20 | public texture:WebGLTexture; 21 | 22 | constructor($type:number, $name:string) 23 | { 24 | this.name = $name; 25 | this.type = $type; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/engine/VertexAttributeObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class VertexAttributeObject 5 | { 6 | public name:string; 7 | public byteStride:number = 0; 8 | public bufferOffset:number = 0; 9 | public buffer:WebGLBuffer; 10 | 11 | constructor($name:string) 12 | { 13 | this.name = $name; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/object/OrthoScreenObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | import {RenderingObject} from "../engine/RenderingObject"; 3 | import {VertexAttributeObject} from "../engine/VertexAttributeObject"; 4 | /** 5 | * @author Kentaro Kawakatsu 6 | */ 7 | export class OrthoScreenObject extends RenderingObject 8 | { 9 | public screenMatrix:mat4; 10 | 11 | constructor($context:WebGLRenderingContext) 12 | { 13 | super($context); 14 | } 15 | 16 | public init():void 17 | { 18 | let vPosition:number[] = [ 19 | -1.0, 1.0, 0.0, 20 | 1.0, 1.0, 0.0, 21 | -1.0, -1.0, 0.0, 22 | 1.0, -1.0, 0.0 23 | ]; 24 | this.iboData = [ 25 | 0, 1, 2, 26 | 3, 2, 1 27 | ]; 28 | 29 | let attribute:VertexAttributeObject; 30 | let vbo:WebGLBuffer; 31 | 32 | vbo = this.context.createBuffer(); 33 | this.context.bindBuffer(this.context.ARRAY_BUFFER, vbo); 34 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(vPosition), this.context.STATIC_DRAW); 35 | this.vboDataList[0] = vPosition; 36 | attribute = new VertexAttributeObject("position"); 37 | attribute.buffer = vbo; 38 | this.vboList[0] = attribute; 39 | 40 | this.ibo = this.context.createBuffer(); 41 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 42 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 43 | 44 | // 45 | let viewMtx:mat4 = mat4.identity(mat4.create()); 46 | let projectionMtx:mat4 = mat4.identity(mat4.create()); 47 | this.screenMatrix = mat4.identity(mat4.create()); 48 | mat4.lookAt(viewMtx, vec3.fromValues(0.0, 0.0, 0.5), vec3.fromValues(0.0, 0.0, 0.0), vec3.fromValues(0.0, 1.0, 0.0)); 49 | mat4.ortho(projectionMtx, -1.0, 1.0, 1.0, -1.0, 0.1, 1); 50 | mat4.multiply(this.screenMatrix, projectionMtx, viewMtx); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/object/SceneObject.ts: -------------------------------------------------------------------------------- 1 | import {mat4, vec3} from "gl-matrix"; 2 | import {RenderingObject} from "../engine/RenderingObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class SceneObject extends RenderingObject 7 | { 8 | private _mMatrix:mat4 = mat4.identity(mat4.create()); 9 | private _translateVec:vec3 = vec3.create(); 10 | private _scaleVec:vec3 = vec3.create(); 11 | 12 | public x:number = 0.0; 13 | public y:number = 0.0; 14 | public z:number = 0.0; 15 | public scaleX:number = 1.0; 16 | public scaleY:number = 1.0; 17 | public scaleZ:number = 1.0; 18 | public rotationX:number = 0.0; 19 | public rotationY:number = 0.0; 20 | public rotationZ:number = 0.0; 21 | 22 | constructor($context:WebGLRenderingContext) 23 | { 24 | super($context); 25 | } 26 | 27 | public getModelMtx():mat4 28 | { 29 | mat4.identity(this._mMatrix); 30 | vec3.set(this._translateVec, this.x, this.y, this.z); 31 | mat4.translate(this._mMatrix, this._mMatrix, this._translateVec); 32 | mat4.rotateZ(this._mMatrix, this._mMatrix, this.rotationZ); 33 | mat4.rotateY(this._mMatrix, this._mMatrix, this.rotationY); 34 | mat4.rotateX(this._mMatrix, this._mMatrix, this.rotationX); 35 | vec3.set(this._scaleVec, this.scaleX, this.scaleY, this.scaleZ); 36 | mat4.scale(this._mMatrix, this._mMatrix, this._scaleVec); 37 | return this._mMatrix; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/primitive/Plane.ts: -------------------------------------------------------------------------------- 1 | import {Primitive} from "./Primitive"; 2 | /** 3 | * @author Kentaro Kawakatsu 4 | */ 5 | export class Plane extends Primitive 6 | { 7 | public width:number; 8 | public height:number; 9 | public segmentsW:number; 10 | public segmentsH:number; 11 | 12 | constructor($context:WebGLRenderingContext, width:number, height:number, segmentsW:number, segmentsH:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 13 | { 14 | super($context); 15 | 16 | this.width = width; 17 | this.height = height; 18 | this.segmentsW = segmentsW; 19 | this.segmentsH = segmentsH; 20 | this.useAttribute = useAttribute; 21 | 22 | this.setData(); 23 | } 24 | 25 | protected setData():void 26 | { 27 | let halfWidth:number = this.width / 2.0; 28 | let halfHeight:number = this.height / 2.0; 29 | 30 | let segmentWidth:number = this.width / this.segmentsW; 31 | let segmentHeight:number = this.height / this.segmentsH; 32 | 33 | let wVertices:number = this.segmentsW + 1; 34 | let hVertices:number = this.segmentsH + 1; 35 | 36 | let positionList:number[] = []; 37 | let normalList:number[] = []; 38 | let uvList:number[] = []; 39 | let indexList:number[] = []; 40 | 41 | for (let j:number = 0; j < hVertices; j++) 42 | { 43 | let posY:number = segmentHeight * j - halfHeight; 44 | let v:number = 1.0 - (j / this.segmentsH); 45 | 46 | for (let i:number = 0; i < wVertices; i++) 47 | { 48 | positionList.push(segmentWidth * i - halfWidth, -posY, 0.0); 49 | normalList.push(0.0, 0.0, 1.0); 50 | uvList.push(i / this.segmentsW, v); 51 | } 52 | } 53 | 54 | this.positionList = positionList; 55 | this.normalList = normalList; 56 | this.uvList = uvList; 57 | 58 | this.setAttribute(); 59 | 60 | for (let j:number = 0; j < this.segmentsH; j++) 61 | { 62 | let j0:number = wVertices * j; 63 | let j1:number = wVertices * (j + 1); 64 | 65 | for (let i:number = 0; i < this.segmentsW; i++) 66 | { 67 | let i0:number = i + j0; 68 | let i1:number = i + j1; 69 | let i2:number = i + 1 + j1; 70 | let i3:number = i + 1 + j0; 71 | 72 | indexList.push(i0, i1, i3); 73 | indexList.push(i1, i2, i3); 74 | } 75 | } 76 | 77 | this.iboData = indexList; 78 | 79 | this.ibo = this.context.createBuffer(); 80 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 81 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 82 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/primitive/Primitive.ts: -------------------------------------------------------------------------------- 1 | import {VertexAttributeObject} from "../engine/VertexAttributeObject"; 2 | import {SceneObject} from "../object/SceneObject"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Primitive extends SceneObject 7 | { 8 | public static ATTRIBUTE_USE_POSITION:number = 0x01; 9 | public static ATTRIBUTE_USE_NOMRAL:number = 0x02; 10 | public static ATTRIBUTE_USE_UV:number = 0x04; 11 | 12 | public numVertices:number; 13 | public numIndices:number; 14 | 15 | public positionList:number[]; 16 | public normalList:number[]; 17 | public uvList:number[]; 18 | 19 | public useAttribute:number; 20 | 21 | constructor($context:WebGLRenderingContext) 22 | { 23 | super($context); 24 | } 25 | 26 | public init():void 27 | { 28 | 29 | } 30 | 31 | protected setData():void 32 | { 33 | 34 | } 35 | 36 | public setAttribute():void 37 | { 38 | let usePosition:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_POSITION) !== 0x0; 39 | let useNormal:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_NOMRAL) !== 0x0; 40 | let useUV:boolean = (this.useAttribute & Primitive.ATTRIBUTE_USE_UV) !== 0x0; 41 | 42 | let attribute:VertexAttributeObject; 43 | 44 | if (usePosition) 45 | { 46 | attribute = new VertexAttributeObject("position"); 47 | attribute.buffer = this.context.createBuffer(); 48 | this.vboList.push(attribute); 49 | 50 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 51 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.positionList), this.context.STATIC_DRAW); 52 | } 53 | 54 | if (useNormal) 55 | { 56 | attribute = new VertexAttributeObject("normal"); 57 | attribute.buffer = this.context.createBuffer(); 58 | this.vboList.push(attribute); 59 | 60 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 61 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.normalList), this.context.STATIC_DRAW); 62 | } 63 | 64 | if (useUV) 65 | { 66 | attribute = new VertexAttributeObject("uv"); 67 | attribute.buffer = this.context.createBuffer(); 68 | this.vboList.push(attribute); 69 | 70 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 71 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.uvList), this.context.STATIC_DRAW); 72 | } 73 | 74 | this.context.bindBuffer(this.context.ARRAY_BUFFER, null); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/primitive/Sphere.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import {Primitive} from "./Primitive"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Sphere extends Primitive 7 | { 8 | public radius:number; 9 | public segmentsW:number; 10 | public segmentsH:number; 11 | 12 | constructor($context:WebGLRenderingContext, radius:number, segmentsW:number, segmentsH:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 13 | { 14 | super($context); 15 | 16 | this.radius = radius; 17 | this.segmentsW = segmentsW; 18 | this.segmentsH = segmentsH; 19 | this.useAttribute = useAttribute; 20 | 21 | this.setData(); 22 | } 23 | 24 | protected setData():void 25 | { 26 | let vec:vec3 = vec3.create(); 27 | let grid:number[][] = []; 28 | let idx:number = 0; 29 | 30 | let positionList:number[] = []; 31 | let normalList:number[] = []; 32 | let uvList:number[] = []; 33 | 34 | for (let j:number = 0; j <= this.segmentsH; j++) 35 | { 36 | let verticesRow:number[] = []; 37 | 38 | let v:number = j / this.segmentsH; 39 | let theta:number = v * Math.PI; 40 | 41 | for (let i:number = 0; i <= this.segmentsW; i++) 42 | { 43 | let u:number = i / this.segmentsW; 44 | let phi:number = u * 2 * Math.PI; 45 | 46 | vec[0] = -this.radius * Math.cos(phi) * Math.sin(theta); 47 | vec[1] = this.radius * Math.cos(theta); 48 | vec[2] = this.radius * Math.sin(phi) * Math.sin(theta); 49 | 50 | positionList.push(vec[0], vec[1], vec[2]); 51 | vec3.normalize(vec, vec); 52 | normalList.push(vec[0], vec[1], vec[2]); 53 | uvList.push(u, 1 - v); 54 | 55 | verticesRow.push(idx); 56 | idx += 1; 57 | } 58 | grid.push(verticesRow); 59 | } 60 | 61 | this.positionList = positionList; 62 | this.normalList = normalList; 63 | this.uvList = uvList; 64 | 65 | this.setAttribute(); 66 | 67 | let indexList:number[] = []; 68 | 69 | for (let j:number = 0; j < this.segmentsH; j++) 70 | { 71 | for (let i:number = 0; i < this.segmentsW; i++) 72 | { 73 | let i0:number = grid[j][i + 1]; 74 | let i1:number = grid[j][i]; 75 | let i2:number = grid[j + 1][i]; 76 | let i3:number = grid[j + 1][i + 1]; 77 | 78 | if (j !== 0) 79 | { 80 | indexList.push(i0, i1, i3); 81 | } 82 | 83 | if (j !== this.segmentsH - 1) 84 | { 85 | indexList.push(i1, i2, i3); 86 | } 87 | } 88 | } 89 | 90 | this.iboData = indexList; 91 | 92 | this.ibo = this.context.createBuffer(); 93 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 94 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 95 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/primitive/Torus.ts: -------------------------------------------------------------------------------- 1 | import {vec3} from "gl-matrix"; 2 | import {Primitive} from "./Primitive"; 3 | /** 4 | * @author Kentaro Kawakatsu 5 | */ 6 | export class Torus extends Primitive 7 | { 8 | public radius:number; 9 | public tube:number; 10 | public segmentsR:number; 11 | public segmentsT:number; 12 | 13 | constructor($context:WebGLRenderingContext, radius:number, tube:number, segmentsR:number, segmentsT:number, useAttribute:number = Primitive.ATTRIBUTE_USE_POSITION) 14 | { 15 | super($context); 16 | 17 | this.radius = radius; 18 | this.tube = tube; 19 | this.segmentsR = segmentsR; 20 | this.segmentsT = segmentsT; 21 | this.useAttribute = useAttribute; 22 | 23 | this.setData(); 24 | } 25 | 26 | protected setData():void 27 | { 28 | let vec:vec3 = vec3.create(); 29 | 30 | let positionList:number[] = []; 31 | let normalList:number[] = []; 32 | let uvList:number[] = []; 33 | let indexList:number[] = []; 34 | 35 | for (let j:number = 0; j <= this.segmentsR; j++) 36 | { 37 | let vUnit:number = j / this.segmentsR; 38 | let v:number = vUnit * Math.PI * 2; 39 | 40 | for (let i:number = 0; i <= this.segmentsT; i++) 41 | { 42 | let uUnit:number = i / this.segmentsT; 43 | let u:number = uUnit * Math.PI * 2; 44 | 45 | let cosU:number = Math.cos(u); 46 | let sinU:number = Math.sin(u); 47 | let cosV:number = Math.cos(v); 48 | 49 | let rr:number = this.radius + this.tube * cosV; 50 | 51 | vec[0] = rr * cosU; 52 | vec[1] = rr * sinU; 53 | vec[2] = this.tube * Math.sin(v); 54 | 55 | positionList.push(vec[0], vec[1], vec[2]); 56 | 57 | vec[0] -= this.radius * cosU; 58 | vec[1] -= this.radius * sinU; 59 | vec3.normalize(vec, vec); 60 | normalList.push(vec[0], vec[1], vec[2]); 61 | 62 | uvList.push(uUnit, vUnit); 63 | } 64 | } 65 | 66 | this.positionList = positionList; 67 | this.normalList = normalList; 68 | this.uvList = uvList; 69 | 70 | this.setAttribute(); 71 | 72 | for (let j:number = 1; j <= this.segmentsR; j++) 73 | { 74 | for (let i:number = 1; i <= this.segmentsT; i++) 75 | { 76 | let seg:number = this.segmentsT + 1; 77 | 78 | let i0:number = seg * j + i - 1; 79 | let i1:number = seg * (j - 1) + i - 1; 80 | let i2:number = seg * (j - 1) + i; 81 | let i3:number = seg * j + i; 82 | 83 | indexList.push(i0, i1, i3); 84 | indexList.push(i1, i2, i3); 85 | } 86 | } 87 | 88 | this.iboData = indexList; 89 | 90 | this.ibo = this.context.createBuffer(); 91 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, this.ibo); 92 | this.context.bufferData(this.context.ELEMENT_ARRAY_BUFFER, new Int16Array(this.iboData), this.context.STATIC_DRAW); 93 | this.context.bindBuffer(this.context.ELEMENT_ARRAY_BUFFER, null); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/myLib/webgl/utils/WebGLUtil.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class WebGLUtil 5 | { 6 | 7 | public static init():void 8 | { 9 | 10 | } 11 | 12 | public static supportsWebGL():boolean 13 | { 14 | try 15 | { 16 | return !!WebGLRenderingContext && (!!document.createElement("canvas").getContext("webgl") || !!document.createElement("canvas").getContext("experimental-webgl")); 17 | } catch (e) 18 | { 19 | return false; 20 | } 21 | } 22 | 23 | public static getPowerOf2(w:number, h:number):any 24 | { 25 | let ww:number = w; 26 | let hh:number = h; 27 | if (!WebGLUtil.isPowerOfTwo(w)) 28 | { 29 | ww = WebGLUtil.nextHighestPowerOfTwo(w); 30 | } 31 | if (!WebGLUtil.isPowerOfTwo(h)) 32 | { 33 | hh = WebGLUtil.nextHighestPowerOfTwo(h); 34 | } 35 | return {w:ww, h:hh}; 36 | } 37 | 38 | private static isPowerOfTwo(value:number):boolean 39 | { 40 | return (value & (value - 1)) === 0; 41 | } 42 | 43 | private static nextHighestPowerOfTwo(value:number):number 44 | { 45 | --value; 46 | for (let i:number = 1; i < 32; i <<= 1) 47 | { 48 | value = value | value >> i; 49 | } 50 | return value + 1; 51 | } 52 | 53 | constructor() 54 | { 55 | 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/project/TransformFeedbackVaryingObject.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kentaro Kawakatsu 3 | */ 4 | export class TransformFeedbackVaryingObject 5 | { 6 | public name:string; 7 | public location:number; 8 | 9 | constructor($name:string, $location:number) 10 | { 11 | this.name = $name; 12 | this.location = $location; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /transform_feedback/src/ts/project/TransformFeedbackVertex.ts: -------------------------------------------------------------------------------- 1 | import {RenderingObject} from "../myLib/webgl/engine/RenderingObject"; 2 | import {VertexAttributeObject} from "../myLib/webgl/engine/VertexAttributeObject"; 3 | import {TransformFeedbackShader} from "./TransformFeedbackShader"; 4 | import {TransformFeedbackVaryingObject} from "./TransformFeedbackVaryingObject"; 5 | /** 6 | * @author Kentaro Kawakatsu 7 | */ 8 | export class TransformFeedbackVertex extends RenderingObject 9 | { 10 | private context2:WebGL2RenderingContext; 11 | 12 | public numParticles:number; 13 | public vertexIDList:number[]; 14 | public positionList:number[]; 15 | public velocityList:number[]; 16 | public birthList:number[]; 17 | 18 | constructor($context:WebGLRenderingContext, $numParticles:number) 19 | { 20 | super($context); 21 | 22 | this.context2 = $context; 23 | this.numParticles = $numParticles; 24 | 25 | this.setData(); 26 | } 27 | 28 | protected setData():void 29 | { 30 | let vertexIDList:number[] = []; 31 | let positionList:number[] = []; 32 | let velocityList:number[] = []; 33 | let birthList:number[] = []; 34 | 35 | for (let i:number = 0; i < this.numParticles; i++) 36 | { 37 | vertexIDList[i] = i; 38 | 39 | positionList[i * 3] = 0; 40 | positionList[i * 3 + 1] = 0; 41 | positionList[i * 3 + 2] = 0; 42 | 43 | velocityList[i * 3] = 0; 44 | velocityList[i * 3 + 1] = 0; 45 | velocityList[i * 3 + 2] = 0; 46 | 47 | birthList[i] = 0; 48 | } 49 | this.positionList = positionList; 50 | this.velocityList = velocityList; 51 | this.vertexIDList = vertexIDList; 52 | this.birthList = birthList; 53 | 54 | let attribute:VertexAttributeObject; 55 | 56 | attribute = new VertexAttributeObject("vertexID"); 57 | attribute.buffer = this.context.createBuffer(); 58 | this.vboList.push(attribute); 59 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 60 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(vertexIDList), this.context.STATIC_DRAW); 61 | 62 | attribute = new VertexAttributeObject("position"); 63 | attribute.buffer = this.context.createBuffer(); 64 | this.vboList.push(attribute); 65 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 66 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(positionList), this.context2.STREAM_COPY); 67 | 68 | attribute = new VertexAttributeObject("velocityTotal"); 69 | attribute.buffer = this.context.createBuffer(); 70 | this.vboList.push(attribute); 71 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 72 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(velocityList), this.context2.STREAM_COPY); 73 | 74 | attribute = new VertexAttributeObject("birth"); 75 | attribute.buffer = this.context.createBuffer(); 76 | this.vboList.push(attribute); 77 | this.context.bindBuffer(this.context.ARRAY_BUFFER, attribute.buffer); 78 | this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(birthList), this.context2.STREAM_COPY); 79 | 80 | this.context.bindBuffer(this.context.ARRAY_BUFFER, null); 81 | } 82 | 83 | public bindBufferBase():void 84 | { 85 | let context2:WebGL2RenderingContext = this.context; 86 | let shader2:TransformFeedbackShader = this.shader; 87 | 88 | const length:number = shader2.transformFeedbackVaryingList.length; 89 | for (let i:number = 0; i < length; i++) 90 | { 91 | let varying:TransformFeedbackVaryingObject = shader2.transformFeedbackVaryingList[i]; 92 | let vbo:VertexAttributeObject = this.getTransformFeedbackVertexBuffer(varying.name); 93 | context2.bindBufferBase(context2.TRANSFORM_FEEDBACK_BUFFER, varying.location, vbo.buffer); 94 | } 95 | } 96 | 97 | public unbindBufferBase():void 98 | { 99 | let shader2:TransformFeedbackShader = this.shader; 100 | 101 | const length:number = shader2.transformFeedbackVaryingList.length; 102 | for (let i:number = 0; i < length; i++) 103 | { 104 | let varying:TransformFeedbackVaryingObject = shader2.transformFeedbackVaryingList[i]; 105 | this.context2.bindBufferBase(this.context2.TRANSFORM_FEEDBACK_BUFFER, varying.location, null); 106 | } 107 | } 108 | 109 | public getTransformFeedbackVertexBuffer(varyingName:string):VertexAttributeObject 110 | { 111 | let attribute:VertexAttributeObject; 112 | if (varyingName === "vPosition") 113 | { 114 | attribute = this.getVertexBuffer("position"); 115 | } 116 | else if (varyingName === "vVelocityTotal") 117 | { 118 | attribute = this.getVertexBuffer("velocityTotal"); 119 | } 120 | else if (varyingName === "vBirth") 121 | { 122 | attribute = this.getVertexBuffer("birth"); 123 | } 124 | return attribute; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /transform_feedback/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "lib": [ 5 | "dom", 6 | "es2015.promise", 7 | "es5" 8 | ], 9 | "target": "es5", 10 | "noImplicitAny": false, 11 | "sourceMap": false 12 | } 13 | } -------------------------------------------------------------------------------- /transform_feedback/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "indent": [ 9 | true, 10 | "spaces" 11 | ], 12 | "align": [ 13 | true, 14 | "parameters", 15 | "statements" 16 | ], 17 | "semicolon": true, 18 | "no-consecutive-blank-lines": true, 19 | "no-duplicate-variable": true, 20 | "no-eval": true, 21 | "member-access": true, 22 | "curly": true, 23 | "jsdoc-format": true, 24 | "no-internal-module": true, 25 | "no-string-literal": true, 26 | "no-trailing-whitespace": true, 27 | "no-var-requires": true, 28 | "no-var-keyword": true, 29 | "one-line": [ 30 | true, 31 | "check-whitespace" 32 | ], 33 | "quotemark": [ 34 | true, 35 | "double" 36 | ], 37 | "triple-equals": [ 38 | true, 39 | "allow-null-check" 40 | ], 41 | "typedef": [ 42 | true, 43 | "call-signature", 44 | "parameter", 45 | "property-declaration", 46 | "variable-declaration", 47 | "member-variable-declaration" 48 | ], 49 | "typedef-whitespace": [ 50 | true, 51 | { 52 | "call-signature": "nospace", 53 | "index-signature": "nospace", 54 | "parameter": "nospace", 55 | "property-declaration": "nospace", 56 | "variable-declaration": "nospace" 57 | }, 58 | { 59 | "call-signature": "nospace", 60 | "index-signature": "nospace", 61 | "parameter": "nospace", 62 | "property-declaration": "nospace", 63 | "variable-declaration": "nospace" 64 | } 65 | ], 66 | "variable-name": [ 67 | true, 68 | "ban-keywords" 69 | ], 70 | "whitespace": [ 71 | true, 72 | "check-branch", 73 | "check-decl", 74 | "check-operator", 75 | "check-separator", 76 | "check-typecast" 77 | ] 78 | } 79 | } -------------------------------------------------------------------------------- /transform_feedback/webpack.config.js: -------------------------------------------------------------------------------- 1 | // ビルド設定ファイル 2 | const buidConfig = require("./build_config"); 3 | 4 | const entry = {}; 5 | 6 | /** webpackの設定ファイルです。 */ 7 | let webpackConfig = { 8 | entry: buidConfig.tsEntryFiles, 9 | output: { 10 | filename: "[name].js" 11 | }, 12 | devtool: "source-map", 13 | resolve: { 14 | extensions: ["*", ".js", ".ts"] 15 | }, 16 | module: { 17 | loaders: [ 18 | {test: /\.ts$/, loader: 'ts-loader'} 19 | ] 20 | } 21 | }; 22 | 23 | module.exports = webpackConfig; 24 | --------------------------------------------------------------------------------