Skip to content

Commit d3dc0ee

Browse files
redcamelredcamel
authored
Merge pull request #686 from redcamel/dev
master_V7.0
2 parents 3b184b3 + ddbc83c commit d3dc0ee

File tree

72 files changed

+9293
-301
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+9293
-301
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ This project is maintained by [RedCamel](mailto:[email protected])
77

88
### Release Notes ###
99
- [Releases](https://github.com/redcamel/RedGL2/releases)
10+
- [Release Note V6.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V6.0)
1011
- [Release Note V5.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V5.0)
1112
- [Release Note V4.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V4.0)
1213
- [Release Note V3.0](https://github.com/redcamel/RedGL2/releases/tag/Master_V3.0)

‎example/baseTestUI.js

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/*
2-
* RedGL - MIT License
3-
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
4-
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5-
* Last modification time of this file - 2019.7.5 11:56
2+
* RedGL - MIT License
3+
* Copyright (c) 2018 - 2019 By RedCamel( [email protected] )
4+
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5+
* Last modification time of this file - 2019.8.7 11:52:14
6+
*
67
*/
78

89
var baseTestUI = function (redGL, width) {
@@ -252,6 +253,22 @@ baseTestUI.exampleList = [
252253
{
253254
key: 'object3D pivotTest',
254255
href: 'object3D/pivotTest.html'
256+
},
257+
{
258+
key: 'object3D pivotTest 2D Mode',
259+
href: 'object3D/pivotTest_2dMode.html'
260+
},
261+
{
262+
key: 'object3D outline(2D mode)',
263+
href: 'object3D/object3D_outline.html'
264+
},
265+
{
266+
key: 'object3D outline(3D mode)',
267+
href: 'object3D/object3D_outline_3dMode.html'
268+
},
269+
{
270+
key: 'object3D outline skin',
271+
href: 'object3D/object3D_outline_skin.html'
255272
}
256273
]
257274
},
@@ -320,6 +337,28 @@ baseTestUI.exampleList = [
320337
}
321338
]
322339
},
340+
{
341+
key: 'Mesh Filter',
342+
list: [
343+
{
344+
key: 'filterTest(2D Mode)',
345+
href: 'filter/filterTest_2dMode.html'
346+
},
347+
{
348+
key: 'filterTest(3D Mode)',
349+
href: 'filter/filterTest_3dMode.html'
350+
},
351+
{
352+
key: 'filters',
353+
href: 'filter/RedFilters.html'
354+
},
355+
{
356+
key: 'Mesh filter + PostEffect',
357+
href: 'filter/filterWithPostEffect.html'
358+
}
359+
360+
]
361+
},
323362
{
324363
key: 'Texture',
325364
list: [

‎example/filter/RedFilters.html

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!--
2+
~ RedGL - MIT License
3+
~ Copyright (c) 2018 - 2019 By RedCamel( [email protected] )
4+
~ https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5+
~ Last modification time of this file - 2019.8.7 11:32:13
6+
~
7+
-->
8+
9+
<!DOCTYPE html>
10+
<html lang="ko">
11+
12+
<head>
13+
<meta charset="UTF-8">
14+
<meta name="keywords" content="RedGL,webgl,demo">
15+
<title>RedGL - Filters</title>
16+
<meta name="apple-mobile-web-app-capable" content="yes"/>
17+
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
18+
<meta name="viewport"
19+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"
20+
/>
21+
<link rel="stylesheet" href="../example.css">
22+
23+
<script src="../dat.gui.min.js"></script>
24+
<script src="../baseTestUI.js"></script>
25+
<script src="../../release/RedGL.min.js"></script>
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
27+
</head>
28+
29+
<body>
30+
31+
<script id='testSource'>
32+
var testUI;
33+
var canvas;
34+
var assetPath = '../../asset/'
35+
canvas = document.createElement('canvas');
36+
document.body.appendChild(canvas);
37+
var testTween = function (redGL, target) {
38+
var tScale = Math.random() * 50 + 35
39+
TweenMax.to(target, Math.random() * 2 + 1, {
40+
x: Math.random() * redGL._viewRect[2],
41+
y: Math.random() * redGL._viewRect[3],
42+
scaleX: tScale,
43+
scaleY: tScale,
44+
rotationZ: Math.random() * 360,
45+
ease: Ease.QuintInOut,
46+
onComplete: function () {
47+
testTween(redGL, this.target)
48+
}
49+
})
50+
}
51+
RedGL(canvas, function (v) {
52+
if (v) {
53+
var tWorld, tView, tView_FilterTest, tScene, tController, tRenderer, tLight;
54+
var setBase = function (redGL) {
55+
// 월드 생성
56+
redGL['world'] = tWorld = RedWorld();
57+
// 씬 생성
58+
tScene = RedScene(redGL);
59+
// 카메라 생성
60+
tController = RedCamera();
61+
tController.mode2DYn = true
62+
// 렌더러 생성
63+
tRenderer = RedRenderer();
64+
// 뷰생성 및 적용
65+
tView = RedView(redGL, tScene, tController);
66+
67+
tWorld.addView(tView);
68+
69+
// 렌더시작
70+
tRenderer.start(redGL, function (time) {
71+
});
72+
// 렌더 디버거 활성화
73+
tRenderer.setDebugButton();
74+
};
75+
setBase(this);
76+
//
77+
var tMesh;
78+
var tMaterial = RedBitmapMaterial(this, RedBitmapTexture(this, assetPath + 'crate.png'))
79+
var i = 100
80+
while (i--) {
81+
tMesh = RedMesh(this, RedPlane(this), tMaterial)
82+
tMesh.useCullFace = false
83+
tMesh.x = Math.random() * 1000
84+
tMesh.y = Math.random() * 800
85+
tMesh.scaleX = tMesh.scaleY = tMesh.scaleZ = 100
86+
tScene.addChild(tMesh)
87+
testTween(this, tMesh)
88+
}
89+
testUI(this, tScene, tView_FilterTest)
90+
} else {
91+
console.log('초기화 실패!')
92+
}
93+
})
94+
testUI = function (redGL, tScene) {
95+
var effectList;
96+
effectList = {
97+
RedFilter_Invert: RedFilter_Invert(redGL),
98+
RedFilter_Gray: RedFilter_Gray(redGL),
99+
RedFilter_Convolution: RedFilter_Convolution(redGL, RedFilter_Convolution['EMBOSS']),
100+
RedFilter_HueSaturation: RedFilter_HueSaturation(redGL),
101+
RedFilter_BrightnessContrast: RedFilter_BrightnessContrast(redGL),
102+
RedFilter_Threshold : RedFilter_Threshold(redGL),
103+
RedFilter_Pixelize: RedFilter_Pixelize(redGL),
104+
RedFilter_HalfTone: RedFilter_HalfTone(redGL),
105+
RedFilter_Bloom: RedFilter_Bloom(redGL),
106+
RedFilter_Blur: RedFilter_Blur(redGL),
107+
RedFilter_BlurX: RedFilter_BlurX(redGL),
108+
RedFilter_BlurY: RedFilter_BlurY(redGL),
109+
RedFilter_GaussianBlur: RedFilter_GaussianBlur(redGL),
110+
RedFilter_Film: RedFilter_Film(redGL)
111+
}
112+
effectList['RedFilter_GaussianBlur'].radius = 30
113+
effectList['RedFilter_HueSaturation'].hue = 100
114+
effectList['RedFilter_BlurX'].size = 20
115+
effectList['RedFilter_BlurY'].size = 20
116+
effectList['RedFilter_BrightnessContrast'].contrast = 100
117+
var gui = new baseTestUI(redGL)
118+
gui.initRedGL()
119+
var testData = function () {
120+
for (var k in effectList) this[k] = false
121+
}
122+
testData = new testData()
123+
for (var k in testData) {
124+
(function () {
125+
var tFolder = gui.initPostEffect(k, effectList[k], true);
126+
console.log(tFolder)
127+
tFolder.add(testData, k).name('use ' + k.replace('RedFilter_', '')).onChange((function () {
128+
var tEffect = effectList[k]
129+
return function (v) {
130+
tScene['children'].forEach(function (tMesh) {
131+
if (v) tMesh.addFilter(tEffect)
132+
else tMesh.removeFilter(tEffect)
133+
})
134+
console.log(tScene['children'][0]['_filterList'])
135+
}
136+
})());
137+
console.log(k)
138+
switch (k) {
139+
case 'RedFilter_Convolution':
140+
var convolution_testData = {
141+
list : 'EMBOSS'
142+
}
143+
var tEffect = effectList[k]
144+
tFolder.add(convolution_testData, 'list', [
145+
'NORMAL',
146+
'SHARPEN',
147+
'BLUR',
148+
'EDGE',
149+
'EMBOSS'
150+
]).onChange(function (v) {
151+
tEffect['kernel'] = RedFilter_Convolution[v]
152+
});
153+
break;
154+
case 'RedFilter_Threshold':
155+
tFolder.add(effectList[k], 'threshold', 1, 255);
156+
break;
157+
case 'RedFilter_Film':
158+
tFolder.add(effectList[k], 'scanlineIntensity', -1, 1, 0.01);
159+
tFolder.add(effectList[k], 'noiseIntensity', 0, 1, 0.01);
160+
tFolder.add(effectList[k], 'scanlineCount', 0, 4096);
161+
tFolder.add(effectList[k], 'grayMode');
162+
break;
163+
case 'RedFilter_BlurX' :
164+
case 'RedFilter_BlurY' :
165+
tFolder.add(effectList[k], 'size', 0, 50)
166+
break
167+
case 'RedFilter_GaussianBlur' :
168+
tFolder.add(effectList[k], 'radius', 0, 50)
169+
break
170+
case 'RedFilter_Pixelize' :
171+
tFolder.add(effectList[k], 'width', 0, 50)
172+
tFolder.add(effectList[k], 'height', 0, 50)
173+
break
174+
case 'RedFilter_HueSaturation' :
175+
tFolder.add(effectList[k], 'hue', -180, 180)
176+
tFolder.add(effectList[k], 'saturation', -100, 100)
177+
break
178+
case 'RedFilter_BrightnessContrast' :
179+
tFolder.add(effectList[k], 'contrast', -50, 100)
180+
tFolder.add(effectList[k], 'brightness', -150, 150)
181+
break
182+
case 'RedFilter_HalfTone' :
183+
tFolder.add(effectList[k], 'centerX', -1, 1, 0.01);
184+
tFolder.add(effectList[k], 'centerY', -1, 1, 0.01);
185+
tFolder.add(effectList[k], 'radius', 0, 25, 0.01);
186+
tFolder.add(effectList[k], 'angle', 0, 360, 0.01);
187+
tFolder.add(effectList[k], 'grayMode')
188+
break
189+
case 'RedFilter_Bloom':
190+
tFolder.add(effectList[k], 'blur', 0, 100);
191+
tFolder.add(effectList[k], 'exposure', 0, 5);
192+
tFolder.add(effectList[k], 'bloomStrength', 0, 5);
193+
tFolder.add(effectList[k], 'threshold', 1, 255);
194+
break;
195+
}
196+
})();
197+
198+
}
199+
}
200+
</script>
201+
</body>
202+
203+
</html>

0 commit comments

Comments
 (0)