Skip to content
Newer
Older
100644 186 lines (137 sloc) 4.92 KB
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 19, 2011
1 <html>
2
3 <head>
4 <title>018 | Globe | J3D</title>
5
6 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
7
8 <link rel="stylesheet" href="common/common.css"/>
9 <script type="text/javascript" src="common/common.js"></script>
10
11 <script type="text/javascript" src="../build/j3d.js"></script>
12
13 <script id="EarthShader" type="x-shader">
14 //#name EarthShader
15 //#include CommonInclude
16
17 varying vec4 vPosition;
18 varying vec3 vLight;
19 varying vec2 vTextureCoord;
20 varying vec3 vNormal;
21
22 //#vertex
23 //#include VertexInclude
24
25 void main(void) {
26 vTextureCoord = getTextureCoord(aTextureCoord);
27 vNormal = nMatrix * aVertexNormal;
28 vPosition = mMatrix * vec4(aVertexPosition, 1.0);
29 gl_Position = pMatrix * vMatrix * vPosition;
30 }
31
32 //#fragment
33 //#include Lights
34
35 uniform sampler2D dayTexture;
36 uniform sampler2D nightTexture;
37 uniform sampler2D specTexture;
38 uniform float specularIntensity;
39 uniform float shininess;
40
41 void main(void) {
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
42
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
43 float si = specularIntensity * (1.0 - texture2D(specTexture, vTextureCoord).r);
44 float df = computeLights(vPosition, vNormal, si, shininess).r;
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
45
46 df = max(0.0, df);
47
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
48 vec4 d = texture2D(dayTexture, vTextureCoord);
49 vec4 n = texture2D(nightTexture, vTextureCoord);
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
50 vec4 c = vec4(d.rgb * df + n.rgb * (1.0 - df), 1.0);
51
52 gl_FragColor = c;
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
53 }
54 </script>
55
56 <script>
57 var engine, scene, earth, camera, root, sun;
58 var mx = 0, my = 0;
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
59 var isHovered = false;
60 var bsrX = 0, csrX = 0, bsrY = 0, csrY = 0;
61 var isDown = false;
62 var dx = 0, dy = 0;
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
63
64 window.onload = function() {
65 if(!checkWebGL()) return;
66
67 engine = new J3D.Engine();
68
69 root = new J3D.Transform();
70 engine.scene.add(root);
71
72 camera = new J3D.Transform();
73 camera.camera = new J3D.Camera();
74 camera.position.z = 100;
75 engine.camera = camera;
76 root.add(camera);
77
78 sun = new J3D.Transform();
79 sun.light = new J3D.Light(J3D.HEMISPHERE);
80 sun.light.color = new J3D.Color(1, 1, 1, 1);
81 sun.position = new v3(-1000, 0, 0);
82 sun.light.direction = new v3(1, 0, 0);
83 sun.light.angleFalloff = 0.35;
84 engine.scene.add(sun);
85
86
87 earth = new J3D.Transform();
88
89 earth.renderer = new J3D.ShaderUtil.parseGLSL( document.getElementById("EarthShader").firstChild.nodeValue );
90 earth.renderer.dayTexture = new J3D.Texture("models/textures/earth-cloud.jpg");
91 earth.renderer.nightTexture = new J3D.Texture("models/textures/earth-night.jpg");
92 earth.renderer.specTexture = new J3D.Texture("models/textures/earth-spec.jpg");
93 earth.renderer.specularIntensity = 1.1;
94 earth.renderer.shininess = 10;
95 // earth.renderer.drawMode = gl.LINES;
96
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
97 earth.geometry = J3D.Primitive.Sphere(30, 40, 40);
98
99 earth.collider = J3D.Collider.Sphere(30);
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
100
101 engine.scene.add(earth);
102
103 document.onmousemove = onMouseMove;
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
104 document.onmousedown = onMouseDown;
105 document.onmouseup = onMouseUp;
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
106
107 draw();
108 }
109
110 window.onscroll = function(e) {
111 var z= camera.position.z + window.pageYOffset * 0.25;
112 z = Math.min(500, z);
113 z = Math.max(50, z);
114 camera.position.z = z;
115 }
116
117 function onMouseMove(e) {
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
118 mx = e.clientX;
119 my = e.clientY;
120
121 if(isDown) {
122 csrX = -( ((mx / window.innerWidth) * 2 - 1) - dx ) * 1;
123 csrY = -( ((my / window.innerHeight) * 2 - 1) - dy ) * 1;
124
125 }
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
126 }
127
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
128 function onMouseDown(e) {
129 if(isHovered) {
130 isDown = true;
131 dx = (e.clientX / window.innerWidth) * 2 - 1;
132 dy = (e.clientY / window.innerHeight) * 2 - 1;
133 }
134 }
135
136 function onMouseUp(e) {
137 if(isDown) {
138 bsrX += csrX;
139 csrX = 0;
140 bsrY += csrY;
141 csrY = 0;
142 }
143 isDown = false;
144 }
145
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
146 function draw() {
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
147
148 var r = J3D.Ray.fromMousePosition(mx, my, camera);
149 isHovered = J3D.Intersection.raySphere(r, earth) > 0;
150
151 document.body.style.cursor = (isHovered) ? "move" : "auto";
152
153 root.rotation.y = bsrX + csrX;
154 root.rotation.x = bsrY + csrY;
155
156 if(!isDown) earth.rotation.y += J3D.Time.deltaTime * 0.0001;
157 engine.render();
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
158 requestAnimationFrame(draw);
159 }
160
161 </script>
162
163 </head>
164
165 <body>
166 <script>
8144d05 @drojdjou Added Colliders, Ray and Inteesection tests (so far just Ray/Sphere).…
authored Dec 20, 2011
167 setLabels("018. Globe", "Sphere primitive, multi-texture, mouse interaction.<br>Click and drag the globe to rotate.<br>Earth textures from <a href='http://www.shadedrelief.com/natural3/pages/textures.html'>shadedrelief.com</a>");
05ded79 @drojdjou Added: sphere primitive, specular highlights in Hemisphere light and …
authored Dec 20, 2011
168 </script>
169
170 <script type="text/javascript">
171
172 var _gaq = _gaq || [];
173 _gaq.push(['_setAccount', 'UA-24294554-1']);
174 _gaq.push(['_trackPageview']);
175
176 (function() {
177 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
178 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
179 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
180 })();
181
182 </script>
183
184 </body>
185
186 </html>
Something went wrong with that request. Please try again.