Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

335 lines (272 sloc) 10.576 kb
<!DOCTYPE html>
<!--
/*
* Copyright (C) 2009 Apple Inc. All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
* OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-->
<html>
<head>
<title>Earth</title>
<script type="text/javascript" src="../common/webgl-utils.js"></script>
<script src="resources/J3DI.js"> </script>
<script src="resources/J3DIMath.js" type="text/javascript"> </script>
<script id="vshader" type="x-shader/x-vertex">
uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
uniform vec3 lightDir;
attribute vec3 vNormal;
attribute vec4 vTexCoord;
attribute vec4 vPosition;
varying float v_Dot;
varying vec2 v_texCoord;
void main()
{
gl_Position = u_modelViewProjMatrix * vPosition;
v_texCoord = vTexCoord.st;
vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
}
</script>
<script id="fshader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D sampler2d;
varying float v_Dot;
varying vec2 v_texCoord;
void main()
{
vec4 color = texture2D(sampler2d,v_texCoord);
color += vec4(0.1,0.1,0.1,1);
// gl_FragColor = vec4(color.xyz * v_Dot, color.a);
gl_FragColor = vec4(color.xyz, color.a);
}
</script>
<script>
var gl;
degToRad = function(deg) {
return Math.PI / 180 * deg;
}
coord = function (x,y,z) {
if(!x) var x=0;
if(!y) var y=0;
if(!z) var z=0;
return {x: x, y: y, z: z};
}
function latLongToCartesian(lat, long) {
lat = degToRad(lat);
long = degToRad(long);
var coord = {}
coord.x = -Math.cos(lat) * Math.cos(long) * 1;
coord.z = Math.cos(lat) * Math.sin(long) * 1;
coord.y = Math.sin(lat) * 1;
return coord;
}
var controlPoints = [];
controlPoints[0] = latLongToCartesian(51, 0.7);
controlPoints[1] = {x: -0.8, y: 1, z: -1 };
controlPoints[2] = latLongToCartesian(45, -74);
var oldX = 0;
var oldY = 0;
var rotationX = 0;
var rotationY = 30;
var deltaX = 0;
var deltaY = 0;
var inertiaX = 0;
var inertiaY = 0;
var dragging = false;
function B1(t) { return (1-t)*(1-t) }
function B2(t) { return 2*(1-t)*t }
function B3(t) { return t*t}
function getBezier(percent,C1,C2,C3,C4) {
var pos = new coord();
pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent);
pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent);
pos.z = C1.z*B1(percent) + C2.z*B2(percent) + C3.z*B3(percent);
return pos;
}
function makeArc() {
var arc = {};
arc.vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, arc.vbo);
arc.vbo.itemSize = 3;
var segments = 25;
arc.vbo.numItems = segments + 1;
var vertices = [];
var step = 1.0 / segments;
var t = 0.0;
for(var i = 0; i <= segments; i++, t += step) {
var coord = getBezier(t, controlPoints[0], controlPoints[1], controlPoints[2], controlPoints[3]);
vertices.push(coord.x);
vertices.push(coord.y);
vertices.push(coord.z);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
arc.draw = function() {
gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
gl.vertexAttribPointer(2, this.vbo.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.LINE_STRIP, 0, this.vbo.numItems);
}
return arc;
}
function init()
{
gl = initWebGL("example", "vshader", "fshader",
[ "vNormal", "vTexCoord", "vPosition"],
[ 0, 0, 0, 1 ], 10000);
if (!gl) {
return;
}
gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
gl.sphere = makeSphere(gl, 1, 30, 30);
arc = makeArc();
// get the images
earthTexture = loadImageTexture(gl, "resources/earthmap1k.jpg");
return gl;
}
var width = -1;
var height = -1;
var framerate;
var arc;
function reshape(ctx)
{
var canvas = document.getElementById('example');
if (canvas.width == width && canvas.width == height)
return;
width = canvas.width;
height = canvas.height;
ctx.viewport(0, 0, width, height);
ctx.perspectiveMatrix = new J3DIMatrix4();
ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
}
function drawOne(ctx, angle, x, y, z, scale, texture)
{
// setup VBOs
ctx.enableVertexAttribArray(0);
ctx.enableVertexAttribArray(1);
ctx.enableVertexAttribArray(2);
ctx.bindBuffer(ctx.ARRAY_BUFFER, ctx.sphere.vertexObject);
ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);
ctx.bindBuffer(ctx.ARRAY_BUFFER, ctx.sphere.normalObject);
ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);
ctx.bindBuffer(ctx.ARRAY_BUFFER, ctx.sphere.texCoordObject);
ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, ctx.sphere.indexObject);
// generate the model-view matrix
var mvMatrix = new J3DIMatrix4();
mvMatrix.translate(x,y,z);
mvMatrix.rotate(rotationY, 1,0,0);
mvMatrix.rotate(rotationX, 0,1,0);
mvMatrix.scale(scale, scale, scale);
// construct the normal matrix from the model-view matrix
var normalMatrix = new J3DIMatrix4(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
// construct the model-view * projection matrix
var mvpMatrix = new J3DIMatrix4(ctx.perspectiveMatrix);
mvpMatrix.multiply(mvMatrix);
mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
ctx.bindTexture(ctx.TEXTURE_2D, texture);
ctx.drawElements(ctx.TRIANGLES, ctx.sphere.numIndices, ctx.UNSIGNED_SHORT, 0);
arc.draw();
}
function drawPicture(ctx)
{
reshape(ctx);
ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
if (!dragging) {
rotationX += inertiaX/15.0;
rotationY += inertiaY/15.0;
}
drawOne(ctx, currentAngle, -1, 0, 0, 1, earthTexture);
framerate.snapshot();
currentAngle += incAngle;
if (currentAngle > 360)
currentAngle -= 360;
}
function start()
{
var c = document.getElementById("example");
var w = Math.floor(window.innerWidth * 0.9);
var h = Math.floor(window.innerHeight * 0.9);
c.width = w;
c.height = h;
var ctx = init();
if (!ctx) {
return;
}
framerate = new Framerate("framerate");
currentAngle = 0;
incAngle = 0.2;
var f = function() {
drawPicture(ctx)
window.requestAnimFrame(f, c);
};
f();
}
function mouseMove(event) {
if (dragging) {
var x = event.clientX;
var y = event.clientY;
deltaX = x - oldX;
inertiaX = deltaX;
oldX = x;
rotationX += deltaX/5.0;
deltaY = y - oldY;
inertiaY = deltaY;
oldY = y;
rotationY += deltaY/5.0;
}
}
this.onmousemove = mouseMove;
function mouseDown(event) {
dragging = true;
var x = event.clientX;
var y = event.clientY;
oldX = x;
oldY = y;
}
this.onmousedown = mouseDown;
function mouseUp(event) {
dragging = false;
}
this.onmouseup = mouseUp;
</script>
<style type="text/css">
canvas {
border: 2px solid black;
}
</style>
</head>
<body onload="start()">
<canvas id="example">
There is supposed to be an example drawing here, but it's not important.
</canvas>
<div id="framerate"></div>
<div id="console"></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.