Merge pull request #686 from redcamel/dev

master_V7.0
redcamel · Aug 7, 2019 · d3dc0ee · d3dc0ee
2 parents 3b184b3 + ddbc83c
commit d3dc0ee
Show file tree

Hide file tree

Showing 72 changed files with 9,293 additions and 301 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@ This project is maintained by [RedCamel](mailto:webseon@gmail.com)
 
 ### Release Notes ###
 - [Releases](https://github.com/redcamel/RedGL2/releases)
+- [Release Note V6.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V6.0)
 - [Release Note V5.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V5.0)
 - [Release Note V4.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V4.0)
 - [Release Note V3.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V3.0)

diff --git a/example/baseTestUI.js b/example/baseTestUI.js
@@ -1,8 +1,9 @@
 /*
- * RedGL - MIT License
- * Copyright (c) 2018 - 2019 By RedCamel(webseon@gmail.com)
- * https://github.com/redcamel/RedGL2/blob/dev/LICENSE
- * Last modification time of this file - 2019.7.5 11:56
+ *   RedGL - MIT License
+ *   Copyright (c) 2018 - 2019 By RedCamel( webseon@gmail.com )
+ *   https://github.com/redcamel/RedGL2/blob/dev/LICENSE
+ *   Last modification time of this file - 2019.8.7 11:52:14
+ *
  */
 
 var baseTestUI = function (redGL, width) {
@@ -252,6 +253,22 @@ baseTestUI.exampleList = [
 			{
 				key: 'object3D pivotTest',
 				href: 'object3D/pivotTest.html'
+			},
+			{
+				key: 'object3D pivotTest 2D Mode',
+				href: 'object3D/pivotTest_2dMode.html'
+			},
+			{
+				key: 'object3D outline(2D mode)',
+				href: 'object3D/object3D_outline.html'
+			},
+			{
+				key: 'object3D outline(3D mode)',
+				href: 'object3D/object3D_outline_3dMode.html'
+			},
+			{
+				key: 'object3D outline skin',
+				href: 'object3D/object3D_outline_skin.html'
 			}
 		]
 	},
@@ -320,6 +337,28 @@ baseTestUI.exampleList = [
 			}
 		]
 	},
+	{
+		key: 'Mesh Filter',
+		list: [
+			{
+				key: 'filterTest(2D Mode)',
+				href: 'filter/filterTest_2dMode.html'
+			},
+			{
+				key: 'filterTest(3D Mode)',
+				href: 'filter/filterTest_3dMode.html'
+			},
+			{
+				key: 'filters',
+				href: 'filter/RedFilters.html'
+			},
+			{
+				key: 'Mesh filter + PostEffect',
+				href: 'filter/filterWithPostEffect.html'
+			}
+
+		]
+	},
 	{
 		key: 'Texture',
 		list: [

diff --git a/example/filter/RedFilters.html b/example/filter/RedFilters.html
@@ -0,0 +1,203 @@
+<!--
+  ~   RedGL - MIT License
+  ~   Copyright (c) 2018 - 2019 By RedCamel( webseon@gmail.com )
+  ~   https://github.com/redcamel/RedGL2/blob/dev/LICENSE
+  ~   Last modification time of this file - 2019.8.7 11:32:13
+  ~
+  -->
+
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="keywords" content="RedGL,webgl,demo">
+    <title>RedGL - Filters</title>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"
+    />
+    <link rel="stylesheet" href="../example.css">
+
+    <script src="../dat.gui.min.js"></script>
+    <script src="../baseTestUI.js"></script>
+    <script src="../../release/RedGL.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
+</head>
+
+<body>
+
+<script id='testSource'>
+	var testUI;
+	var canvas;
+	var assetPath = '../../asset/'
+	canvas = document.createElement('canvas');
+	document.body.appendChild(canvas);
+	var testTween = function (redGL, target) {
+		var tScale = Math.random() * 50 + 35
+		TweenMax.to(target, Math.random() * 2 + 1, {
+			x: Math.random() * redGL._viewRect[2],
+			y: Math.random() * redGL._viewRect[3],
+			scaleX: tScale,
+			scaleY: tScale,
+			rotationZ: Math.random() * 360,
+			ease: Ease.QuintInOut,
+			onComplete: function () {
+				testTween(redGL, this.target)
+			}
+		})
+	}
+	RedGL(canvas, function (v) {
+		if (v) {
+			var tWorld, tView, tView_FilterTest, tScene, tController, tRenderer, tLight;
+			var setBase = function (redGL) {
+				// 월드 생성
+				redGL['world'] = tWorld = RedWorld();
+				// 씬 생성
+				tScene = RedScene(redGL);
+				// 카메라 생성
+				tController = RedCamera();
+				tController.mode2DYn = true
+				// 렌더러 생성
+				tRenderer = RedRenderer();
+				// 뷰생성 및 적용
+				tView = RedView(redGL, tScene, tController);
+
+				tWorld.addView(tView);
+
+				// 렌더시작
+				tRenderer.start(redGL, function (time) {
+				});
+				// 렌더 디버거 활성화
+				tRenderer.setDebugButton();
+			};
+			setBase(this);
+			//
+			var tMesh;
+			var tMaterial = RedBitmapMaterial(this, RedBitmapTexture(this, assetPath + 'crate.png'))
+			var i = 100
+			while (i--) {
+				tMesh = RedMesh(this, RedPlane(this), tMaterial)
+				tMesh.useCullFace = false
+				tMesh.x = Math.random() * 1000
+				tMesh.y = Math.random() * 800
+				tMesh.scaleX = tMesh.scaleY = tMesh.scaleZ = 100
+				tScene.addChild(tMesh)
+				testTween(this, tMesh)
+			}
+			testUI(this, tScene, tView_FilterTest)
+		} else {
+			console.log('초기화 실패!')
+		}
+	})
+	testUI = function (redGL, tScene) {
+		var effectList;
+		effectList = {
+			RedFilter_Invert: RedFilter_Invert(redGL),
+			RedFilter_Gray: RedFilter_Gray(redGL),
+			RedFilter_Convolution: RedFilter_Convolution(redGL, RedFilter_Convolution['EMBOSS']),
+			RedFilter_HueSaturation: RedFilter_HueSaturation(redGL),
+			RedFilter_BrightnessContrast: RedFilter_BrightnessContrast(redGL),
+			RedFilter_Threshold : RedFilter_Threshold(redGL),
+			RedFilter_Pixelize: RedFilter_Pixelize(redGL),
+			RedFilter_HalfTone: RedFilter_HalfTone(redGL),
+			RedFilter_Bloom: RedFilter_Bloom(redGL),
+			RedFilter_Blur: RedFilter_Blur(redGL),
+			RedFilter_BlurX: RedFilter_BlurX(redGL),
+			RedFilter_BlurY: RedFilter_BlurY(redGL),
+			RedFilter_GaussianBlur: RedFilter_GaussianBlur(redGL),
+			RedFilter_Film: RedFilter_Film(redGL)
+		}
+		effectList['RedFilter_GaussianBlur'].radius = 30
+		effectList['RedFilter_HueSaturation'].hue = 100
+		effectList['RedFilter_BlurX'].size = 20
+		effectList['RedFilter_BlurY'].size = 20
+		effectList['RedFilter_BrightnessContrast'].contrast = 100
+		var gui = new baseTestUI(redGL)
+		gui.initRedGL()
+		var testData = function () {
+			for (var k in effectList) this[k] = false
+		}
+		testData = new testData()
+		for (var k in testData) {
+			(function () {
+				var tFolder = gui.initPostEffect(k, effectList[k], true);
+				console.log(tFolder)
+				tFolder.add(testData, k).name('use ' + k.replace('RedFilter_', '')).onChange((function () {
+					var tEffect = effectList[k]
+					return function (v) {
+						tScene['children'].forEach(function (tMesh) {
+							if (v) tMesh.addFilter(tEffect)
+							else tMesh.removeFilter(tEffect)
+						})
+						console.log(tScene['children'][0]['_filterList'])
+					}
+				})());
+				console.log(k)
+				switch (k) {
+					case 'RedFilter_Convolution':
+						var convolution_testData = {
+							list : 'EMBOSS'
+                        }
+                        var tEffect = effectList[k]
+						tFolder.add(convolution_testData, 'list', [
+							'NORMAL',
+							'SHARPEN',
+							'BLUR',
+							'EDGE',
+							'EMBOSS'
+						]).onChange(function (v) {
+							tEffect['kernel'] = RedFilter_Convolution[v]
+						});
+						break;
+					case 'RedFilter_Threshold':
+						tFolder.add(effectList[k], 'threshold', 1, 255);
+						break;
+					case 'RedFilter_Film':
+						tFolder.add(effectList[k], 'scanlineIntensity', -1, 1, 0.01);
+						tFolder.add(effectList[k], 'noiseIntensity', 0, 1, 0.01);
+						tFolder.add(effectList[k], 'scanlineCount', 0, 4096);
+						tFolder.add(effectList[k], 'grayMode');
+						break;
+					case 'RedFilter_BlurX' :
+					case 'RedFilter_BlurY' :
+						tFolder.add(effectList[k], 'size', 0, 50)
+						break
+					case 'RedFilter_GaussianBlur' :
+						tFolder.add(effectList[k], 'radius', 0, 50)
+						break
+					case 'RedFilter_Pixelize' :
+						tFolder.add(effectList[k], 'width', 0, 50)
+						tFolder.add(effectList[k], 'height', 0, 50)
+						break
+					case 'RedFilter_HueSaturation' :
+						tFolder.add(effectList[k], 'hue', -180, 180)
+						tFolder.add(effectList[k], 'saturation', -100, 100)
+						break
+					case 'RedFilter_BrightnessContrast' :
+						tFolder.add(effectList[k], 'contrast', -50, 100)
+						tFolder.add(effectList[k], 'brightness', -150, 150)
+						break
+					case 'RedFilter_HalfTone' :
+						tFolder.add(effectList[k], 'centerX', -1, 1, 0.01);
+						tFolder.add(effectList[k], 'centerY', -1, 1, 0.01);
+						tFolder.add(effectList[k], 'radius', 0, 25, 0.01);
+						tFolder.add(effectList[k], 'angle', 0, 360, 0.01);
+						tFolder.add(effectList[k], 'grayMode')
+						break
+					case 'RedFilter_Bloom':
+						tFolder.add(effectList[k], 'blur', 0, 100);
+						tFolder.add(effectList[k], 'exposure', 0, 5);
+						tFolder.add(effectList[k], 'bloomStrength', 0, 5);
+						tFolder.add(effectList[k], 'threshold', 1, 255);
+						break;
+				}
+			})();
+
+		}
+	}
+</script>
+</body>
+
+</html>