-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (83 loc) · 3.03 KB
/
index.html
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
<script src=lib1.js></script>
<body bgcolor=black>
<center>
<td><canvas id='canvas1' width=400 height=400></canvas></td>
</center>
</body>
<script id='my_vertex_shader' type='x-shader/x-vertex'>
attribute vec3 aPosition;
varying vec3 vPosition;
void main() {
gl_Position = vec4(aPosition, 1.0);
vPosition = aPosition;
}
</script>
<script id='my_fragment_shader' type='x-shader/x-fragment'>
precision mediump float;
uniform float uTime;
uniform vec3 uCursor;
varying vec3 vPosition;
vec4 sphere;
vec3 material;
vec3 Lrgb;
vec3 Ldir;
// Compute intersection of a ray with a sphere, if any. Return t.
// If there is no intersection, return 10000.
float raySphere(vec3 V, vec3 W, vec4 S) {
// YOU NEED TO COMPUTE t, BY SETTING UP AND THEN SOLVING A QUADRATIC EQUATION.
float t = 10000.;
float a = 1.; //(W * W)
float b = 2. * dot(W, (V - S.xyz));//*(W.x+W.y+W.z)* ( (V.x-S.x) + (V.y-S.y) + (V.z-S.z) );
float c = dot((V-S.xyz), (V-S.xyz)) - S.r*S.r; //(V.x - S.x)*(V.x - S.x) + (V.y - S.y)*(V.y - S.y) + (V.z - S.z)*(V.z - S.z);
t = min( ( (-b - sqrt(b*b - 4.*a*c) ) / 2.), (-b + sqrt(b*b - 4.*a*c) ) / 2.);
return t;
}
// Diffusely shade a sphere.
// point is the x,y,z position of the surface point.
// sphere is the x,y,z,r definition of the sphere.
// material is the r,g,b color of the sphere.
vec3 shadeSphere(vec3 point, vec4 sphere, vec3 material) {
vec3 color = material;
// YOU NEED TO COMPUTE COLOR FOR A DIFFUSELY SHADED SPHERE.
// FOR THE AMBIENT COMPONENT OF THE DIFFUSE SHADING, YOU CAN
// USE A SIMPLE APPROXIMATION SUCH AS: ambient = material / 5.;
vec3 ambient = material/100.;
vec3 diffuse = vec3(1.0, 1.0, 0.0);
vec3 normal = normalize( (point - sphere.xyz)/sphere.r );
color = ambient + Lrgb * diffuse * max(0.0, dot(normal, Ldir));
return color;
}
void main(void) {
vec2 c = uCursor.xy;
Lrgb = vec3(0.5,0.5,0.);
Ldir = normalize(vec3(c.x, c.y, 1. - 2. * dot(c, c)));
// YOU NEED TO COMPUTE V AND W TO CREATE THE RAY FOR THIS PIXEL,
// USING vPosition.x AND vPosition.y.
vec3 V, W;
V.x = 0.0;
V.y = 0.0;
V.z = 0.0;
W.x = vPosition.x;
W.y = vPosition.y;
W.z = 0.0;
W = normalize(vec3(vPosition.x, vPosition.y, -10.));
// YOU NEED TO SET x,y,z AND r FOR sphere.
sphere.x = 0.0;
sphere.y = 0.0;
sphere.z = -100.0;
sphere.r = 3.2;
// YOU NEED TO SET r,g,b FOR material.
material.r = 0.5;
material.g = 0.5;
material.b = 0.5;
vec3 color = vec3(1.0, 0.0, 0.0);
float t = raySphere(V, W, sphere);
if (t < 101.)
color = shadeSphere(V + t * W, sphere, material);
gl_FragColor = vec4(sqrt(color), 1.); // Do Gamma correction.
}
</script>
<script>
start_gl('canvas1', document.getElementById('my_vertex_shader' ).innerHTML,
document.getElementById('my_fragment_shader').innerHTML);
</script>