Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
L
labs_ihm_2020
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
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
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
housseme.chaibi
labs_ihm_2020
Commits
ef65033e
Commit
ef65033e
authored
4 years ago
by
housseme.chaibi
Browse files
Options
Downloads
Patches
Plain Diff
lab3 modification
parent
da1eb1f2
No related branches found
No related tags found
No related merge requests found
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
lab3/.DS_Store
+0
-0
0 additions, 0 deletions
lab3/.DS_Store
lab3/src/lab3.html
+2
-1
2 additions, 1 deletion
lab3/src/lab3.html
lab3/src/lab3.js
+121
-46
121 additions, 46 deletions
lab3/src/lab3.js
with
123 additions
and
47 deletions
lab3/.DS_Store
+
0
−
0
View file @
ef65033e
No preview for this file type
This diff is collapsed.
Click to expand it.
lab3/src/lab3.html
+
2
−
1
View file @
ef65033e
...
...
@@ -7,8 +7,9 @@
<body
onload=
"main()"
>
<input
type=
"radio"
name=
"myRadios"
onclick=
"handleClick(this);"
value=
"0"
checked
/>
Directionnelle
<input
type=
"radio"
name=
"myRadios"
onclick=
"handleClick(this);"
value=
"0"
/>
Directionnelle
<input
type=
"radio"
name=
"myRadios"
onclick=
"handleClick(this);"
value=
"1"
/>
Ponctuelle
<br/>
<input
type=
"radio"
name=
"myRadios"
onclick=
"handleClick(this);"
value=
"2"
checked
/>
Directionnelle sans effect spectaculaire
<br/>
<input
type=
"checkbox"
id=
"camx"
name=
"camx"
onclick=
"getCamera();"
value=
"camx"
/>
Cam X
<input
type=
"checkbox"
id=
"camy"
name=
"camy"
...
...
This diff is collapsed.
Click to expand it.
lab3/src/lab3.js
+
121
−
46
View file @
ef65033e
...
...
@@ -5,14 +5,54 @@ var VSHADER_SOURCE =
'
attribute vec4 a_Color;
\n
'
+
'
attribute vec4 a_Normal;
\n
'
+
'
uniform mat4 u_MvpMatrix;
\n
'
+
'
uniform mat4 u_PlanMatrix;
\n
'
+
'
uniform mat4 u_NormalMatrix;
\n
'
+
'
uniform vec3 u_LightDirection;
\n
'
+
'
varying vec4 v_Color;
\n
'
+
'
void main() {
\n
'
+
'
vec3 to_light;
\n
'
+
'
vec3 vertex_normal;
\n
'
+
'
vec3 reflection;
\n
'
+
'
float cos_angle;
\n
'
+
'
vec3 specular_color;
\n
'
+
'
vec3 object_color;
\n
'
+
'
gl_Position = u_MvpMatrix * a_Position ;
\n
'
+
'
vec4 normal = u_NormalMatrix * a_Normal;
\n
'
+
'
float nDotL = max(dot(u_LightDirection, normalize(normal.xyz)), 0.0);
\n
'
+
'
vec3 lightDirection = normalize (vec3(u_LightDirection));
\n
'
+
'
vec3 normalref = normalize(vec3(u_NormalMatrix * a_Normal));
\n
'
+
'
reflection =2.0 * dot(normalref,lightDirection) * normalref - lightDirection;
\n
'
+
'
reflection=normalize(reflection);
\n
'
+
'
cos_angle=dot(reflection,lightDirection);
\n
'
+
'
cos_angle=clamp(cos_angle,0.0,1.0);
\n
'
+
'
if (cos_angle > 0.0) {
\n
'
+
'
specular_color=vec3(1.0,1.0,1.0) * cos_angle;
\n
'
+
'
} else {
\n
'
+
'
specular_color=vec3(0.0,0.0,0.0); }
\n
'
+
'
v_Color = vec4(a_Color.xyz * nDotL +specular_color , a_Color.a);
\n
'
+
'
}
\n
'
;
var
VSHADER_D
=
'
attribute vec4 a_Position;
\n
'
+
'
attribute vec4 a_Color;
\n
'
+
'
attribute vec4 a_Normal;
\n
'
+
'
uniform mat4 u_MvpMatrix;
\n
'
+
'
uniform mat4 u_NormalMatrix;
\n
'
+
'
uniform vec3 u_LightDirection;
\n
'
+
'
varying vec4 v_Color;
\n
'
+
'
void main() {
\n
'
+
'
gl_Position = u_MvpMatrix * a_Position ;
\n
'
+
'
vec4 normal = u_NormalMatrix * a_Normal;
\n
'
+
'
float nDotL = max(dot(u_LightDirection, normalize(normal.xyz)), 0.0);
\n
'
+
'
vec3 lightDirection = normalize (vec3(u_LightDirection));
\n
'
+
'
vec3 normalref = normalize(vec3(u_NormalMatrix * a_Normal));
\n
'
+
'
v_Color = vec4(a_Color.xyz * nDotL, a_Color.a);
\n
'
+
'
}
\n
'
;
...
...
@@ -57,21 +97,38 @@ var PONCTVERT =
'
uniform vec3 u_AmbientLight;
\n
'
+
// Ambient light color
'
varying vec4 v_Color;
\n
'
+
'
void main() {
\n
'
+
'
vec3 to_light;
\n
'
+
'
vec3 vertex_normal;
\n
'
+
'
vec3 reflection;
\n
'
+
'
float cos_angle;
\n
'
+
'
vec3 specular_color;
\n
'
+
'
vec3 object_color;
\n
'
+
'
gl_Position = u_MvpMatrix * a_Position;
\n
'
+
// Recalculate the normal based on the model matrix and make its length 1.
'
vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));
\n
'
+
// Calculate world coordinate of vertex
'
vec4 vertexPosition = u_ModelMatrix * a_Position;
\n
'
+
// Calculate the light direction and make it 1.0 in length
'
vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));
\n
'
+
// Calculate the dot product of the normal and light direction
'
float nDotL = max(dot(normal, lightDirection), 0.0);
\n
'
+
// Calculate the color due to diffuse reflection
'
vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;
\n
'
+
// Calculate the color due to ambient reflection
'
vec3 ambient = u_AmbientLight * a_Color.rgb;
\n
'
+
// Add the surface colors due to diffuse reflection and ambient reflection
'
v_Color = vec4(diffuse + ambient, a_Color.a);
\n
'
+
'
reflection =2.0 * dot(normal,lightDirection) * normal - lightDirection;
\n
'
+
'
reflection=normalize(reflection);
\n
'
+
'
cos_angle=dot(reflection,lightDirection);
\n
'
+
'
cos_angle=clamp(cos_angle,0.0,1.0);
\n
'
+
'
if (cos_angle > 0.0) {
\n
'
+
'
specular_color=u_LightColor * cos_angle;
\n
'
+
'
diffuse=diffuse * (1.0 -cos_angle );
\n
'
+
'
} else {
\n
'
+
'
specular_color=vec3(0.0,0.0,0.0); }
\n
'
+
'
v_Color = vec4(diffuse + ambient + specular_color , a_Color.a);
\n
'
+
'
}
\n
'
;
// Fragment shader program
...
...
@@ -79,27 +136,35 @@ var PONCFRAG =
'
#ifdef GL_ES
\n
'
+
'
precision mediump float;
\n
'
+
'
#endif
\n
'
+
'
uniform vec3 u_Light_position;
\n
'
+
'
uniform vec3 u_Light_color;
\n
'
+
'
uniform float u_Shininess;
\n
'
+
'
varying vec3 v_Vertex;
\n
'
+
'
varying vec3 v_Normal;
\n
'
+
'
varying vec4 v_Color;
\n
'
+
'
void main() {
\n
'
+
'
gl_FragColor = v_Color;
\n
'
+
'
}
\n
'
;
var
normalsBas
=
new
Float32Array
([
// Normal Bas
0.
0
,
0.
0
,
1.0
,
0.
0
,
0.
0
,
1.0
,
0.
0
,
0
.0
,
1.0
,
0.0
,
0
.0
,
1.0
,
//
v0-v1-v2-v3 fr
ont
1.0
,
0.
0
,
0.
0
,
1.0
,
0
.0
,
0
.0
,
1.0
,
0
.0
,
0.
0
,
1.0
,
0.
0
,
0
.0
,
// v0-v3-v4-v5
right
0.
0
,
1.0
,
0.
0
,
0.
0
,
1.0
,
0.
0
,
0.
0
,
1.
0
,
0.
0
,
0
.0
,
1.0
,
0.0
,
// v0-v5-v6-v1
up
-
1.0
,
0.
0
,
0.
0
,
-
1
.0
,
0.
0
,
0.0
,
-
1.0
,
0.
0
,
0.
0
,
-
1.0
,
0
.0
,
0.0
,
// v1-v6-v7-v2
left
0.
0
,
-
1.0
,
0.0
,
0
.0
,
-
1.0
,
0.
0
,
0
.0
,
-
1.0
,
0
.0
,
0.
0
,
-
1.0
,
0
.0
,
//
v7-v4-v3-v2
down
0
.0
,
0
.0
,
-
1.0
,
0.
0
,
0.
0
,
-
1.0
,
0.
0
,
0.
0
,
-
1.0
,
0.
0
,
0.
0
,
-
1.0
//
v4-v7-v6-v5
back
0.
5
,
0.
2
,
0.5
,
0
,
0.
2
,
0.5
,
-
0.
5
,
-
1.0
,
1
.0
,
1.0
,
-
1
.0
,
1.0
,
//
f
ont
0.5
,
0.
2
,
0.
5
,
1.0
,
-
1
.0
,
1
.0
,
1.0
,
-
1
.0
,
-
0.
5
,
0.5
,
0.
2
,
0
,
//
right
0.
5
,
0.2
,
0.
5
,
0.
5
,
0.
2
,
0
,
0
,
0.
2
,
0
,
0
,
0.2
,
0.5
,
//
up
-
0.5
,
0.
2
,
0.
5
,
-
1
,
0.
2
,
0
,
-
1
,
-
1.0
,
-
0.
5
,
-
0.
5
,
-
1.0
,
1
.0
,
//
left
-
0.
5
,
-
1.0
,
-
1
,
1
.0
,
-
1.0
,
-
0.
5
,
1
.0
,
-
1.0
,
1
.0
,
-
0.
5
,
-
1.0
,
1
.0
,
//down
1
.0
,
-
1
.0
,
-
0.5
,
-
0.
5
,
-
0.
5
,
-
0.5
,
0
,
0.
1
,
-
1.0
,
0.
5
,
0.
2
,
-
1.0
//back
]);
var
normalsHaut
=
new
Float32Array
([
// Normal Haut
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
// v0-v1-v2-v3 front
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
// v0-v3-v4-v5 right
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
// v0-v5-v6-v1 up
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
1.0
,
0.0
,
0.0
,
// v1-v6-v7-v2 left
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
// v7-v4-v3-v2 down
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
,
0.0
,
0.0
,
-
1.0
// v4-v7-v6-v5 back
0.5
,
0.2
,
0.5
,
0
,
0.2
,
0.5
,
-
0.5
,
-
1.0
,
1.0
,
1.0
,
-
1.0
,
1.0
,
//font
0.5
,
0.2
,
0.5
,
1.0
,
-
1.0
,
1.0
,
1.0
,
-
1.0
,
-
0.5
,
0.5
,
0.2
,
0
,
//right
-
0.5
,
-
1.0
,
-
1
,
1.0
,
-
1.0
,
-
0.5
,
1.0
,
-
1.0
,
1.0
,
-
0.5
,
-
1.0
,
1.0
,
//down
-
0.5
,
0.2
,
0.5
,
-
1
,
0.2
,
0
,
-
1
,
-
1.0
,
-
0.5
,
-
0.5
,
-
1.0
,
1.0
,
//left
0.5
,
0.2
,
0.5
,
0.5
,
0.2
,
0
,
0
,
0.2
,
0
,
0
,
0.2
,
0.5
,
//up
1.0
,
-
1.0
,
-
0.5
,
-
0.5
,
-
0.5
,
-
0.5
,
0
,
0.1
,
-
1.0
,
0.5
,
0.2
,
-
1.0
//back
]);
// Retrieve <canvas> element
...
...
@@ -110,7 +175,7 @@ var camZ = 0;
var
lumPosX
=
0
;
var
lumPosY
=
0
;
var
lumPosZ
=
1
;
var
mode
=
0
;
var
mode
=
2
;
function
main
()
{
handleClick
;
draw
();
...
...
@@ -118,8 +183,11 @@ function main() {
}
function
draw
()
{
// Get the rendering context for WebGL
var
gl
=
getWebGLContext
(
canvas
);
if
(
!
gl
)
{
...
...
@@ -137,6 +205,7 @@ function draw() {
return
;
}
// dicrectionnelle
var
sabProgram
=
createProgram
(
gl
,
VSHADER_SOURCE
,
FSHADER_SOURCE
);
sabProgram
.
a_Position
=
gl
.
getAttribLocation
(
sabProgram
,
'
a_Position
'
);
sabProgram
.
a_Color
=
gl
.
getAttribLocation
(
sabProgram
,
'
a_Color
'
);
...
...
@@ -145,6 +214,15 @@ function draw() {
sabProgram
.
u_LightDirection
=
gl
.
getUniformLocation
(
sabProgram
,
'
u_LightDirection
'
);
// directionnelle sans effect spectaculaire
var
sabSanSpect
=
createProgram
(
gl
,
VSHADER_D
,
FSHADER_SOURCE
);
sabSanSpect
.
a_Position
=
gl
.
getAttribLocation
(
sabSanSpect
,
'
a_Position
'
);
sabSanSpect
.
a_Color
=
gl
.
getAttribLocation
(
sabSanSpect
,
'
a_Color
'
);
sabSanSpect
.
u_MvpMatrix
=
gl
.
getUniformLocation
(
sabSanSpect
,
'
u_MvpMatrix
'
);
sabSanSpect
.
u_NormalMatrix
=
gl
.
getUniformLocation
(
sabSanSpect
,
'
u_NormalMatrix
'
);
sabSanSpect
.
u_LightDirection
=
gl
.
getUniformLocation
(
sabSanSpect
,
'
u_LightDirection
'
);
// POINCTUEL
var
poncProgram
=
createProgram
(
gl
,
PONCTVERT
,
PONCFRAG
);
poncProgram
.
a_Position
=
gl
.
getAttribLocation
(
poncProgram
,
'
a_Position
'
);
...
...
@@ -176,16 +254,21 @@ function draw() {
if
(
mode
==
1
)
{
prog
=
poncProgram
gl
.
useProgram
(
poncProgram
);
gl
.
uniform3f
(
poncProgram
.
u_LightColor
,
1
,
1
,
1
);
gl
.
uniform3f
(
poncProgram
.
u_LightColor
,
1
.0
,
1
.0
,
1
.0
);
gl
.
uniform3fv
(
poncProgram
.
u_LightPosition
,
lightDirection
.
elements
);
gl
.
uniform3f
(
poncProgram
.
u_AmbientLight
,
0.
2
,
0.
2
,
0.
2
);
gl
.
uniform3f
(
poncProgram
.
u_AmbientLight
,
0.
5
,
0.
5
,
0.
5
);
}
else
{
else
if
(
mode
==
0
)
{
prog
=
sabProgram
;
gl
.
useProgram
(
sabProgram
);
gl
.
uniform3fv
(
sabProgram
.
u_LightDirection
,
lightDirection
.
elements
);
}
else
if
(
mode
==
2
)
{
prog
=
sabSanSpect
;
gl
.
useProgram
(
sabSanSpect
);
gl
.
uniform3fv
(
sabSanSpect
.
u_LightDirection
,
lightDirection
.
elements
);
}
getCamera
()
...
...
@@ -203,7 +286,7 @@ function draw() {
gl
.
useProgram
(
prog
);
var
n
=
initVertexBuffers
(
gl
,
normalsBas
,
prog
);
model
.
setPerspective
(
50
,
1
,
1
,
100
);
model
.
lookAt
(
3
,
3
,
7
,
0
,
0
,
0
,
0
,
1
,
0
);
model
.
lookAt
(
0
,
0
,
7
,
0
,
0
,
0
,
0
,
1
,
0
);
mvpMatrix
.
set
(
model
);
angle
=
animate
(
angle
);
...
...
@@ -217,30 +300,22 @@ function draw() {
gl
.
drawElements
(
gl
.
TRIANGLES
,
n
,
gl
.
UNSIGNED_BYTE
,
0
);
//pyramide bas
lightDirection
=
new
Vector3
([
-
lumPosX
,
lumPosY
,
lumPosZ
]);
lightDirection
.
normalize
();
if
(
mode
==
1
)
{
gl
.
useProgram
(
poncProgram
);
gl
.
uniform3fv
(
prog
.
u_LightPosition
,
lightDirection
.
elements
);
}
else
{
gl
.
useProgram
(
sabProgram
);
gl
.
uniform3fv
(
prog
.
u_LightDirection
,
lightDirection
.
elements
);
}
//pyramide haut
if
(
camX
==
1
||
camY
==
1
||
camZ
==
1
)
rotMatrixHaut
.
setRotate
(
angle
,
camX
,
camY
,
camZ
);
rotateMatrix
.
setRotate
(
180
,
1
,
0
,
0
);
tranMatrix
.
setTranslate
(
0
,
0.4
,
0.5
);
tranMatrix
.
setTranslate
(
0
,
0.4
,
0.5
);
//(0, 0.4, 0.5);
initVertexBuffers
(
gl
,
normalsHaut
,
prog
);
mvpMatrix
.
setPerspective
(
50
,
1
,
1
,
100
);
mvpMatrix
.
lookAt
(
3
,
3
,
7
,
0
,
0
,
0
,
0
,
1
,
0
);
mvpMatrix
.
lookAt
(
0
,
0
,
7
,
0
,
0
,
0
,
0
,
1
,
0
);
mvpMatrix
.
multiply
(
rotMatrixHaut
).
multiply
(
tranMatrix
).
multiply
(
rotateMatrix
);
normalMatrix
.
setInverseOf
(
rotMatrixHaut
);
normalMatrix
.
multiply
(
rotateMatrix
);
//
normalMatrix.setInverseOf(rotMatrixHaut);
normalMatrix
.
multiply
(
tranMatrix
).
multiply
(
rotateMatrix
);
normalMatrix
.
transpose
();
initVertexBuffers
(
gl
,
normalsHaut
,
prog
);
gl
.
uniformMatrix4fv
(
prog
.
u_MvpMatrix
,
false
,
mvpMatrix
.
elements
);
gl
.
uniformMatrix4fv
(
prog
.
u_NormalMatrix
,
false
,
normalMatrix
.
elements
);
gl
.
drawElements
(
gl
.
TRIANGLES
,
n
,
gl
.
UNSIGNED_BYTE
,
0
);
...
...
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