Skip to content

Commit b38a3c9

Browse files
redcamelredcamel
committed
1 parent 28f1cc2 commit b38a3c9

File tree

7 files changed

+170
-50
lines changed

7 files changed

+170
-50
lines changed

‎example/baseTestUI.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* RedGL - MIT License
33
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
44
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5-
* Last modification time of this file - 2019.4.30 19:0
5+
* Last modification time of this file - 2019.4.30 19:52
66
*/
77

88
var baseTestUI = function (redGL, width) {
@@ -556,6 +556,10 @@ baseTestUI.exampleList = [
556556
{
557557
key: 'calPoint',
558558
href: 'etc/calPoint.html'
559+
},
560+
{
561+
key: 'screenToWorld',
562+
href: 'etc/screenToWorld.html'
559563
}
560564
]
561565
},

‎example/etc/calPoint.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
~ RedGL - MIT License
33
~ Copyright (c) 2018 - 2019 By RedCamel([email protected])
44
~ https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5-
~ Last modification time of this file - 2019.4.30 18:52
5+
~ Last modification time of this file - 2019.4.30 19:43
66
-->
77

88
<!DOCTYPE html>
@@ -125,13 +125,13 @@
125125
testMesh2.rotationZ += 0.2
126126
////////////////////////////////////////////////////////////////////////////////////
127127
var testPoint = testMesh.getScreenPoint(RedView('HelloRedGL'))
128-
getScreenPointBox.style.top = testPoint[1]
129-
getScreenPointBox.style.left = testPoint[0]
128+
getScreenPointBox.style.top = testPoint[1]+'px'
129+
getScreenPointBox.style.left = testPoint[0]+'px'
130130
getScreenPointBox.innerHTML = 'testMesh / getScreenPointBox Test<br>screen X : ' + testPoint[0] + '<br>' + 'screen Y : ' + testPoint[1]
131131
////////////////////////////////////////////////////////////////////////////////////
132132
var testPoint2 = testMesh2.getScreenPoint(RedView('HelloRedGL'))
133-
getScreenPointBox2.style.top = testPoint2[1]
134-
getScreenPointBox2.style.left = testPoint2[0]
133+
getScreenPointBox2.style.top = testPoint2[1]+'px'
134+
getScreenPointBox2.style.left = testPoint2[0]+'px'
135135
getScreenPointBox2.innerHTML = 'testMesh2 / getScreenPointBox2 Test<br>screen X : ' + testPoint2[0] + '<br>' + 'screen Y : ' + testPoint2[1]
136136
////////////////////////////////////////////////////////////////////////////////////
137137
var testLocalInput3 = [-1, 1, 0]
@@ -140,8 +140,8 @@
140140
testMesh3.x = testLocalToWorld3[0]
141141
testMesh3.y = testLocalToWorld3[1]
142142
testMesh3.z = testLocalToWorld3[2]
143-
localToWorldBox3.style.top = testPoint3[1]
144-
localToWorldBox3.style.left = testPoint3[0]
143+
localToWorldBox3.style.top = testPoint3[1]+'px'
144+
localToWorldBox3.style.left = testPoint3[0]+'px'
145145
localToWorldBox3.innerHTML = 'tesMesh3 / localToWorldBox3 Test<br>testMesh2.localToWorld(-1,1,0)<br>'
146146
+ '<br>world X : ' + testLocalToWorld3[0] + '<br>' + 'world Y : ' + testLocalToWorld3[1] + '<br>' + 'world Z : ' + testLocalToWorld3[2]
147147
+ '<br>screen X : ' + testPoint3[0] + '<br>' + 'screen Y : ' + testPoint3[1]
@@ -152,8 +152,8 @@
152152
testMesh4.x = testWorldToLocal4[0]
153153
testMesh4.y = testWorldToLocal4[1]
154154
testMesh4.z = testWorldToLocal4[2]
155-
worldToLocalBox4.style.top = testPoint4[1]
156-
worldToLocalBox4.style.left = testPoint4[0]
155+
worldToLocalBox4.style.top = testPoint4[1]+'px'
156+
worldToLocalBox4.style.left = testPoint4[0]+'px'
157157
worldToLocalBox4.innerHTML = 'testMesh4 / worldToLocalBox4 Test<br>input world X: ' + testWolrdInput4[0] + '<br>' + 'input world Y : ' + testWolrdInput4[1] + '<br>' + 'input world Z : ' + testWolrdInput4[2]
158158
+ '<br>local X: ' + testWorldToLocal4[0] + '<br>' + 'local Y : ' + testWorldToLocal4[1] + '<br>' + 'local Z : ' + testWorldToLocal4[2]
159159
////////////////////////////////////////////////////////////////////////////////////

‎example/etc/screenToWorld.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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.4.30 19:54
6+
-->
7+
8+
<!DOCTYPE html>
9+
<html lang="ko">
10+
11+
<head>
12+
<meta charset="UTF-8">
13+
<meta name="keywords" content="RedGL,webgl,demo">
14+
<title>RedGL - localToWorld, worldToLocal, getScreenPoint</title>
15+
<meta name="apple-mobile-web-app-capable" content="yes"/>
16+
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
17+
<meta name="viewport"
18+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"
19+
/>
20+
<link rel="stylesheet" href="../example.css">
21+
<script src="../dat.gui.min.js"></script>
22+
<script src="../baseTestUI.js"></script>
23+
<script src="../../release/RedGL.min.js"></script>
24+
</head>
25+
26+
<body>
27+
<script id='testSource'>
28+
var testUI;
29+
var canvas;
30+
var assetPath = '../../asset/'
31+
canvas = document.createElement('canvas');
32+
document.body.appendChild(canvas);
33+
RedGL(canvas, function (v) {
34+
if (v) {
35+
//TODO 코드정리
36+
console.log('초기화 성공!');
37+
var tWorld, tView, tScene, tController, tRenderer;
38+
var setBase = function (redGL) {
39+
// 월드 생성
40+
redGL['world'] = tWorld = RedWorld();
41+
// 씬 생성
42+
tScene = RedScene(redGL);
43+
// 카메라 생성
44+
tController = RedObitController(redGL);
45+
tController.pan = 0;
46+
tController.tilt = -45;
47+
// 렌더러 생성
48+
tRenderer = RedRenderer();
49+
// 뷰생성 및 적용
50+
tView = RedView('HelloRedGL', redGL, tScene, tController);
51+
tWorld.addView(tView);
52+
// 그리드 설정
53+
tScene['grid'] = RedGrid(redGL);
54+
// 스카이박스 설정
55+
tScene.skyBox =
56+
RedSkyBox(redGL, [
57+
assetPath + 'cubemap/SwedishRoyalCastle/px.jpg',
58+
assetPath + 'cubemap/SwedishRoyalCastle/nx.jpg',
59+
assetPath + 'cubemap/SwedishRoyalCastle/py.jpg',
60+
assetPath + 'cubemap/SwedishRoyalCastle/ny.jpg',
61+
assetPath + 'cubemap/SwedishRoyalCastle/pz.jpg',
62+
assetPath + 'cubemap/SwedishRoyalCastle/nz.jpg'
63+
]
64+
);
65+
// 렌더시작
66+
tRenderer.start(redGL, function (time) {
67+
});
68+
// 렌더 디버거 활성화
69+
tRenderer.setDebugButton();
70+
// testUI 호출
71+
testUI(redGL, tScene);
72+
console.log(redGL);
73+
};
74+
setBase(this);
75+
//////////////////////////////////////
76+
var tMesh = RedMesh(this, RedBox(this), RedColorMaterial(this));
77+
tScene.addChild(tMesh);
78+
var tText = RedText(this, 500)
79+
tText.color = '#fff'
80+
tText.background = 'rgba(0,0,0,0.0)'
81+
tText.textAlign = 'center'
82+
tText.fontSize = 34;
83+
tText.sprite3DYn = true;
84+
tText.perspectiveScale = false;
85+
tText.useDepthTest = false;
86+
tText.y = 2;
87+
tMesh.addChild(tText);
88+
document.body.addEventListener(
89+
'mousemove', function (e) {
90+
var currentPosition = RedGLUtil.screenToWorld(
91+
[
92+
e.layerX, e.layerY,
93+
tView['_viewRect'][2], tView['_viewRect'][3]
94+
],
95+
tController
96+
);
97+
tMesh.x = currentPosition[0];
98+
tMesh.y = currentPosition[1];
99+
tMesh.z = currentPosition[2];
100+
tText.text = 'x : ' + currentPosition[0].toFixed(2) + ' / y : ' + currentPosition[1].toFixed(2) + ' / z : ' + currentPosition[2].toFixed(2);
101+
}
102+
);
103+
} else {
104+
console.log('초기화 실패!')
105+
}
106+
});
107+
testUI = function (redGL, tScene) {
108+
var gui = new baseTestUI(redGL)
109+
gui.initRedGL()
110+
}
111+
</script>
112+
</body>
113+
114+
</html>

‎example/thumb/screenToWorld.png

38.2 KB
Loading

‎release/RedGL.js

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* RedGL - MIT License
33
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
44
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
5-
* Last modification time of this file - 2019.4.30 19:11
5+
* Last modification time of this file - 2019.4.30 19:55
66
*/
77

88
/**DOC:
@@ -1860,7 +1860,7 @@ var RedGLUtil;
18601860
},
18611861
isUint: function (v, title) {
18621862
(typeof v == 'number' && v >= 0) || RedGLUtil.throwFunc(title, '입력값 : ' + v);
1863-
Math.floor(v) == v || RedGLUtil.throwFunc(title, '입력값 : ' + v);
1863+
Math.floor(v) === v || RedGLUtil.throwFunc(title, '입력값 : ' + v);
18641864
return true
18651865
},
18661866
/**DOC:
@@ -1886,7 +1886,7 @@ var RedGLUtil;
18861886
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
18871887
t1 = [];
18881888
t0 = hex.substring(1).split('');
1889-
if (t0.length == 3) t0 = [t0[0], t0[0], t0[1], t0[1], t0[2], t0[2]];
1889+
if (t0.length === 3) t0 = [t0[0], t0[0], t0[1], t0[1], t0[2], t0[2]];
18901890
t0 = '0x' + t0.join('');
18911891
t1[0] = ((t0 >> 16) & 255) / 255;
18921892
t1[1] = ((t0 >> 8) & 255) / 255;
@@ -1986,7 +1986,7 @@ var RedGLUtil;
19861986
}
19871987
:DOC*/
19881988
isPowerOf2: function (v) {
1989-
return (v & (v - 1)) == 0;
1989+
return (v & (v - 1)) === 0;
19901990
},
19911991
/**DOC:
19921992
{
@@ -2119,7 +2119,7 @@ var RedGLUtil;
21192119
nn[y] = result[i + y];
21202120
nn[z] = result[i + z];
21212121
var len = Math.sqrt((nn[x] * nn[x]) + (nn[y] * nn[y]) + (nn[z] * nn[z]));
2122-
if (len == 0) len = 1.0;
2122+
if (len === 0) len = 1.0;
21232123
nn[x] = nn[x] / len;
21242124
nn[y] = nn[y] / len;
21252125
nn[z] = nn[z] / len;
@@ -2369,11 +2369,11 @@ var RedGLUtil;
23692369
return dest;
23702370
},
23712371
screenToWorld: (function () {
2372-
var x,y,z, w;
2373-
var invW
2372+
var x, y, z, w;
2373+
var invW;
23742374
var point = [0, 0, 0];
2375-
var pointMTX = mat4.create()
2376-
var invViewProjection = mat4.create()
2375+
var pointMTX = mat4.create();
2376+
var invViewProjection = mat4.create();
23772377
var resultMTX;
23782378
return function (rect, tCamera) {
23792379
x = 2.0 * rect[0] / rect[2] - 1;
@@ -2383,27 +2383,28 @@ var RedGLUtil;
23832383
mat4.multiply(invViewProjection, tCamera.perspectiveMTX, tCamera.matrix);
23842384
resultMTX = mat4.clone(invViewProjection);
23852385

2386-
mat4.invert(resultMTX, resultMTX)
2387-
point = [x, y, z]
2386+
mat4.invert(resultMTX, resultMTX);
2387+
point = [x, y, z];
23882388
mat4.identity(pointMTX);
2389-
mat4.translate(pointMTX, pointMTX, point)
2389+
mat4.translate(pointMTX, pointMTX, point);
23902390
mat4.multiply(resultMTX, resultMTX, pointMTX);
23912391

23922392
point[0] = resultMTX[12];
23932393
point[1] = resultMTX[13];
23942394
point[2] = resultMTX[14];
23952395

2396-
w = invViewProjection[12] * x + invViewProjection[13] * y + invViewProjection[14] * 0 + invViewProjection[15]; // required for perspective divide
2396+
// w = invViewProjection[12] * x + invViewProjection[13] * y + invViewProjection[14] * 0 + invViewProjection[15]; // required for perspective divide
2397+
w = invViewProjection[12] * x + invViewProjection[13] * y + invViewProjection[15]; // required for perspective divide
23972398
if (w !== 0) {
23982399
invW = 1 / w;
23992400
point[0] /= invW;
24002401
point[1] /= invW;
24012402
point[2] /= invW;
2402-
point[0] = point[0] + (tCamera.x)
2403-
point[1] = point[1] + (tCamera.y)
2404-
point[2] = point[2] + (tCamera.z)
2403+
point[0] = point[0] + (tCamera.x);
2404+
point[1] = point[1] + (tCamera.y);
2405+
point[2] = point[2] + (tCamera.z);
24052406
}
2406-
console.log(point)
2407+
console.log(point);
24072408
return point
24082409
}
24092410
})()
@@ -2798,7 +2799,7 @@ var RedGL;
27982799
* RedGL - MIT License
27992800
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
28002801
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
2801-
* Last modification time of this file - 2019.4.30 18:53
2802+
* Last modification time of this file - 2019.4.30 19:6
28022803
*/
28032804
"use strict";
28042805
var RedBoxSelection;
@@ -16470,7 +16471,7 @@ var RedSprite3D;
1647016471
* RedGL - MIT License
1647116472
* Copyright (c) 2018 - 2019 By RedCamel([email protected])
1647216473
* https://github.com/redcamel/RedGL2/blob/dev/LICENSE
16473-
* Last modification time of this file - 2019.4.30 18:53
16474+
* Last modification time of this file - 2019.4.30 19:11
1647416475
*/
1647516476

1647616477
"use strict";
@@ -27306,4 +27307,4 @@ var RedGLOffScreen;
2730627307
};
2730727308
RedWorkerCode = RedWorkerCode.toString().replace(/^function ?. ?\) ?\{|\}\;?$/g, '');
2730827309
})();
27309-
})();var RedGL_VERSION = {version : 'RedGL Release. last update( 2019-04-30 19:11:40)' };console.log(RedGL_VERSION);
27310+
})();var RedGL_VERSION = {version : 'RedGL Release. last update( 2019-04-30 19:55:25)' };console.log(RedGL_VERSION);

‎release/RedGL.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)