Render-Project/index.html at main · Rette66/Render-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

<!DOCTYPE html>

<html>

<head>
<title>cse3541 lab6 &mdash; simple 3D scene using webGL </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="mat4/glMatrix-0.9.5.min.js"></script>

<script type="text/javascript" src="shaders_setup.js"></script>
<script type="text/javascript" src="3d-scene.js"></script>

<script type="text/javascript" src="3DObjects/Cylinder.js"></script>
<script type="text/javascript" src="3DObjects/Cube.js"></script>
<script type="text/javascript" src="3DObjects/3DObject.js"></script>
<script type="text/javascript" src="3DObjects/Sphere.js"></script>
<script type="text/javascript" src="3DObjects/Floor.js"></script>
<script type="text/javascript" src="3DObjects/Tree.js"></script>
<script type="text/javascript" src="3DObjects/Robot.js"></script>
<script type="text/javascript" src="3DObjects/teapot.js"></script>
<script type="text/javascript" src="3DObjects/Light.js"></script>
<script type="text/javascript" src="3DObjects/Quad.js"></script>
<script type="text/javascript" src="3DObjects/Skybox.js"></script>


<!--  ************** Fragment Shader ************* -->
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;

    uniform mat4 uMMatrix;
    uniform mat4 uVMatrix;
    uniform mat4 uPMatrix;
    uniform mat4 uNMatrix;

    uniform vec4 light_pos;
    uniform vec4 ambient_coef;
    uniform vec4 diffuse_coef;
    uniform vec4 specular_coef;
    uniform float mat_shininess;

    uniform vec4 light_ambient;
    uniform vec4 light_diffuse;
    uniform vec4 light_specular;

    uniform int use_texture;
    uniform sampler2D myTexture;
    uniform sampler2D posx;
    uniform sampler2D posy;
    uniform sampler2D posz;
    uniform sampler2D negx;
    uniform sampler2D negy;
    uniform sampler2D negz;

    uniform samplerCube cubeMap;

    varying vec4 eye_pos;
    varying vec3 v_normal;
    varying highp vec2 FtexCoord;
    varying vec4 vColor;

    void main(void) {
        //*************calculate lighting ******************
       // transform light pos from local to eye space
        //vec4 light_pos_in_eye = uVMatrix * uMMatrix * light_pos;
        vec4 light_pos_in_eye = light_pos;

       // light vector L = l-p
       vec3 light_vector = normalize(vec3(light_pos_in_eye - eye_pos));

       // eye vector V = e-p, where e is (0,0,0)
       vec3 eye_vector = normalize(-vec3(eye_pos));

       // halfway vector (L+V)
       // vec3 halfv = normalize(light_vector+eye_vector);

       vec4 ambient = ambient_coef * light_ambient;
       float ndotl = max(dot(v_normal, light_vector), 0.0);

       vec4 diffuse = diffuse_coef * light_diffuse* ndotl;

//      both lines below are okay. One is to use the reflect function the other is to compute by yourself
//      vec3 R= normalize(vec3(reflect(-light_vector, v_normal)));
       vec3 R = normalize(2.0 * ndotl *v_normal-eye_vector);
       float rdotv = max(dot(R, eye_vector), 0.0);

       vec4 specular;
       if (ndotl>0.0)
       specular = specular_coef* light_specular*pow(rdotv, mat_shininess);
       else
       specular = vec4(0,0,0,1);
        vec4 color = ambient + diffuse + specular;

        //******************combine lighting with texture***************

        vec4 texcolor;
        vec3 view_vector, ref;
        vec4 env_color = vec4(1,0,0,1);
        if(use_texture == 1){
            texcolor = texture2D(myTexture, FtexCoord);
            gl_FragColor = color+texcolor;
            //gl_FragColor = vColor;
        }
        else if(use_texture ==2){
            view_vector = normalize(vec3(vec4(0,0,0,1) - eye_pos));
            ref = normalize(reflect(-view_vector, v_normal));   //in eye space
            ref = vec3(uVMatrix * vec4(ref, 0));    //convert to world space
            env_color = textureCube(cubeMap, ref);
            gl_FragColor = env_color + color;
        }
        else gl_FragColor = 1.0* color + 0.7*vColor;

        }
</script>

<!--  ************** Vertex Shader ************* -->
<script id="shader-vs" type="x-shader/x-vertex">

precision mediump float;
    attribute vec3 aVertexPosition;   // two array buffer VBOs - position and color attributes
    attribute vec3 aVertexNormal;
    attribute vec2 aVertexTexCoords;
    attribute vec3 aVertexColor;

    uniform mat4 uVMatrix;
    uniform mat4 uPMatrix;
    uniform mat4 uMMatrix;
    //uniform mat4 uCMatrix;
    uniform mat4 uNMatrix;

    uniform vec4 light_pos;
    uniform vec4 ambient_coef;
    uniform vec4 diffuse_coef;
    uniform vec4 specular_coef;
    uniform float mat_shininess;

    uniform vec4 light_ambient;
    uniform vec4 light_diffuse;
    uniform vec4 light_specular;

    uniform int use_texture;
    uniform sampler2D myTexture;
    uniform sampler2D posx;
    uniform sampler2D posy;
    uniform sampler2D posz;
    uniform sampler2D negx;
    uniform sampler2D negy;
    uniform sampler2D negz;

    uniform samplerCube cubeMap;

    varying vec4 eye_pos;   //vertex position in eye space
    varying vec3 v_normal;  //vertex normal
    varying highp vec2 FtexCoord;
    varying vec4 vColor;  // this is a varying which will be interpolated to the fragments


        void main(void) {
            gl_PointSize = 10.0;

          gl_Position = uPMatrix * uVMatrix * uMMatrix * vec4(aVertexPosition, 1.0);

        // transform the vertex position to eye space
        eye_pos = uVMatrix*uMMatrix*vec4(aVertexPosition, 1.0);

        v_normal =normalize(vec3(uNMatrix*vec4(aVertexNormal,0.0)));
//            v_normal = aVertexNormal;
          vColor = vec4(aVertexColor, 1.0);

          FtexCoord = aVertexTexCoords;

          //vColor = ambient + diffuse + specular + vec4(aVertexColor, 1.0);   // pass the vertex color as a varying variable
        }

    // by pass the vertex coordinates; all need to be in [-1,-1] to be vislble
</script>


</head>


<body onload="webGLStart();">

    <canvas id="lab1-canvas" style="border: none;" width="700" height="700"></canvas>


    <h4>
    p - look uP<br/>
    P - look down<br/>
    y - look right<br/>
    Y - look left<br/>
    r - roll counter-clockwise <br/>
    R - roll clockwise<br/>
    u - move light up   <br/>
    j - move light down<br/>
    i - move light left  <br/>
    k - move light right<br/>
    o - move light forward  <br/>
    l - move light back <br/>

    e - teapot reflect skybox<br/>
    t - teapot loaded with texture<br/>
    c - teapot loaded with default color<br/>

    w or W - move robot forward<br/>
    s or S - move robot back<br/>
    a or A - move robot left<br/>
    d or D - move robot right<br/>
    </h4>

</body>


</html>