Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
W
WebGL Tutorial
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
KimKwangho
WebGL Tutorial
Commits
f9a7f8cf
Commit
f9a7f8cf
authored
6 years ago
by
KimKwangho
Browse files
Options
Downloads
Patches
Plain Diff
.
parent
3051ac0a
No related branches found
No related tags found
No related merge requests found
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
WebGL.html
+15
-13
15 additions, 13 deletions
WebGL.html
readme.md
+3
-2
3 additions, 2 deletions
readme.md
with
18 additions
and
15 deletions
WebGL.html
+
15
−
13
View file @
f9a7f8cf
...
...
@@ -77,7 +77,7 @@
'
vColor = color;
'
+
'
}
'
;
var
fragCode
=
'
precision
medium
p float;
'
+
var
fragCode
=
'
precision
high
p float;
'
+
'
varying vec3 vColor;
'
+
'
void main(void) {
'
+
'
gl_FragColor = vec4(vColor, 1.);
'
+
...
...
@@ -86,10 +86,12 @@
var
vertShader
=
gl
.
createShader
(
gl
.
VERTEX_SHADER
);
gl
.
shaderSource
(
vertShader
,
vertCode
);
gl
.
compileShader
(
vertShader
);
//make fragment shader and compile
var
fragShader
=
gl
.
createShader
(
gl
.
FRAGMENT_SHADER
);
gl
.
shaderSource
(
fragShader
,
fragCode
);
gl
.
compileShader
(
fragShader
);
//attach these 2 shader to shader program and link.
var
shaderprogram
=
gl
.
createProgram
();
gl
.
attachShader
(
shaderprogram
,
vertShader
);
...
...
@@ -117,12 +119,11 @@
glMatrix
.
mat4
.
perspective
(
proj_matrix
,
40
/
180
*
Math
.
PI
,
canvas
.
width
/
canvas
.
height
,
1
,
100
);
var
mo_matrix
=
glMatrix
.
mat4
.
create
();
var
view_matrix
=
glMatrix
.
mat4
.
create
();
console
.
log
(
view_matrix
);
view_matrix
[
14
]
=
view_matrix
[
14
]
-
8
;
/*================= Mouse events ======================*/
var
AMORTIZATION
=
0.9
5
;
var
reduce
=
0.9
8
;
var
drag
=
false
;
var
old_x
,
old_y
;
var
dX
=
0
,
dY
=
0
,
mX
=
0.0
,
mY
=
0.0
;
...
...
@@ -139,6 +140,7 @@
drag
=
false
;
};
//when mouse is moving while mouse is pressed.
var
move
=
0
;
var
mouseMove
=
function
(
e
)
{
if
(
!
drag
)
return
false
;
...
...
@@ -146,8 +148,8 @@
//when m is not pressed.
dX
=
(
e
.
pageX
-
old_x
)
*
2
*
Math
.
PI
/
canvas
.
width
,
dY
=
(
e
.
pageY
-
old_y
)
*
2
*
Math
.
PI
/
canvas
.
height
;
THETA
+=
dX
;
PHI
+=
dY
;
RotX
+=
dX
;
RotY
+=
dY
;
old_x
=
e
.
pageX
,
old_y
=
e
.
pageY
;
e
.
preventDefault
();
}
...
...
@@ -204,21 +206,21 @@
window
.
addEventListener
(
"
keyup
"
,
onKeyUp
,
false
);
//key is released.
/*=================== Drawing =================== */
var
THETA
=
0
,
//variable for rotate y-axis
PHI
=
0
;
//variabe for rotate x-axis
var
RotX
=
0
,
//variable for rotate y-axis
RotY
=
0
;
//variabe for rotate x-axis
var
time_old
=
0
;
var
animate
=
function
(
time
)
{
var
dt
=
time
-
time_old
;
if
(
!
drag
)
{
dX
*=
AMORTIZATION
,
dY
*=
AMORTIZATION
;
THETA
+=
dX
,
PHI
+=
dY
;
dX
*=
reduce
,
dY
*=
reduce
;
RotX
+=
dX
,
RotY
+=
dY
;
}
glMatrix
.
mat4
.
identity
(
mo_matrix
);
//before drawing, model matrix is being identity matrix
glMatrix
.
mat4
.
rotateY
(
mo_matrix
,
mo_matrix
,
THETA
);
//
glMatrix
.
mat4
.
rotateX
(
mo_matrix
,
mo_matrix
,
PHI
);
//
glMatrix
.
mat4
.
rotateY
(
mo_matrix
,
mo_matrix
,
RotX
);
glMatrix
.
mat4
.
rotateX
(
mo_matrix
,
mo_matrix
,
RotY
);
time_old
=
time
;
gl
.
enable
(
gl
.
DEPTH_TEST
);
//DEPTH_TEST is enabled.
...
...
This diff is collapsed.
Click to expand it.
readme.md
+
3
−
2
View file @
f9a7f8cf
# WebGL Tutorial with Mouse and Keyboard Interaction
## Manifest
##
File
Manifest
-
WebGL.html
-
gl-matrix.js
...
...
@@ -131,7 +131,8 @@ move=0;
```
## Copyright
(CC-NC-BY) Kim Kwangho 2019
## References
-
https://www.tutorialspoint.com/webgl/webgl_interactive_cube.htm
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment