Permalink
Browse files

implement skysphere

  • Loading branch information...
1 parent 47413a7 commit 8bd34ee82de59d9a4ad18031e2e0c09161b17cef @gleber committed Dec 12, 2011
Showing with 218 additions and 159 deletions.
  1. +19 −19 buffer.js
  2. BIN gigapixel-milky-way.gif
  3. +35 −39 index.html
  4. +40 −42 js.js
  5. +105 −58 models.js
  6. +1 −1 program.js
  7. +18 −0 skysphere.js
View
38 buffer.js
@@ -1,62 +1,62 @@
-function fillBuffer(c, buffer, values, dt, tt) {
- fillAnyBuffer(c, c.ARRAY_BUFFER, buffer, values, dt, tt);
+function fillBuffer(c, buffer, values, at, draw_type) {
+ fillAnyBuffer(c, c.ARRAY_BUFFER, buffer, values, at, draw_type);
}
-function fillElementBuffer(c, buffer, values, dt, tt) {
- fillAnyBuffer(c, c.ELEMENT_ARRAY_BUFFER, buffer, values, dt, tt);
+function fillElementBuffer(c, buffer, values, at, draw_type) {
+ fillAnyBuffer(c, c.ELEMENT_ARRAY_BUFFER, buffer, values, at, draw_type);
}
-function fillAnyBuffer(c, buffer_type, buffer, values, dt, tt) {
+function fillAnyBuffer(c, buffer_type, buffer, values, at, draw_type) {
c.bindBuffer(buffer_type, buffer);
- c.bufferData(buffer_type, new dt(values), tt || c.STATIC_DRAW);
+ c.bufferData(buffer_type, new at(values), draw_type || c.STATIC_DRAW);
}
-function inferElementType(dt) {
+function inferElementType(at) {
var t;
var n;
- if (dt == Float32Array) {
+ if (at == Float32Array) {
t = gl.FLOAT;
n = false;
- } else if (dt == Uint8Array) {
+ } else if (at == Uint8Array) {
t = gl.UNSIGNED_BYTE;
n = true;
- } else if (dt == Int8Array) {
+ } else if (at == Int8Array) {
t = gl.BYTE;
n = true;
- } else if (dt == Uint16Array) {
+ } else if (at == Uint16Array) {
t = gl.UNSIGNED_SHORT;
n = true;
- } else if (dt == Int16Array) {
+ } else if (at == Int16Array) {
t = gl.SHORT;
n = true;
} else {
- throw("unhandled type:" + (dt));
+ throw("unhandled type:" + (at));
}
return t;
}
-function G3Buffer(c, name, dt, values, isize) {
+function G3Buffer(c, name, at, values, isize) {
this.name = name;
this.buffer = c.createBuffer();
this.buffer_type = c.ARRAY_BUFFER;
- this.element_type = inferElementType(dt);
+ this.element_type = inferElementType(at);
this.isize = isize;
this.length = values.length / isize;
c.bindBuffer(this.buffer_type, this.buffer);
- c.bufferData(this.buffer_type, new dt(values), c.STATIC_DRAW);
+ c.bufferData(this.buffer_type, new at(values), c.STATIC_DRAW);
}
-function G3ElementBuffer(c, dt, values, isize) {
+function G3ElementBuffer(c, at, values, isize, draw_type) {
isize = isize || 1;
this.buffer = c.createBuffer();
this.buffer_type = c.ELEMENT_ARRAY_BUFFER;
- this.element_type = inferElementType(dt);
+ this.element_type = inferElementType(at);
this.isize = isize;
this.length = values.length / isize;
c.bindBuffer(this.buffer_type, this.buffer);
- c.bufferData(this.buffer_type, new dt(values), c.STATIC_DRAW);
+ c.bufferData(this.buffer_type, new at(values), draw_type || c.STATIC_DRAW);
}
View
BIN gigapixel-milky-way.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
74 index.html
@@ -66,7 +66,7 @@
vec3 lightWeighting;
vec3 N = vNormal;
- vec3 L = normalize(plpos - vPosition);
+ vec3 L = normalize(vPosition - plpos);
vec3 E = normalize(-vPosition);
vec3 R = normalize(-reflect(L, N));
@@ -84,64 +84,59 @@
vec4 fragmentColor;
fragmentColor = vColor;
- gl_FragColor = vec4(fragmentColor.rgb * vec3(Iamb + Idiff + Ispec), fragmentColor.a);
+ gl_FragColor = vec4(fragmentColor.rgb * vec3(Iamb + Idiff), fragmentColor.a);
}
</script>
- <script id="textured-shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
-precision highp float;
-#endif
-uniform mat4 uMVMatrix;
-uniform mat4 uCamMatrix;
-uniform mat4 uPMatrix;
-uniform mat3 uNMatrix;
-varying vec2 vTextureCoord;
-varying vec3 vTransformedNormal;
-varying vec3 vNormal;
-varying vec3 vPosition;
-uniform vec3 uAmbientColor;
-uniform float uMaterialShininess;
-uniform sampler2D uSampler;
-uniform vec3 uPointLightingLocation;
-uniform vec3 uPointLightingSpecularColor;
-uniform vec3 uPointLightingDiffuseColor;
-void main(void) {
- vec3 plpos = vec3(uCamMatrix * vec4(uPointLightingLocation, 1.0));
- //vec3 plpos = uPointLightingLocation;
- vec3 lightWeighting;
- vec3 N = vNormal;
- vec3 L = normalize(plpos - vPosition);
- vec3 E = normalize(-vPosition);
- vec3 R = normalize(-reflect(L, N));
- vec4 Iamb = vec4(uAmbientColor, 1.0);
- //calculate Diffuse Term:
- vec4 Idiff = vec4(uPointLightingDiffuseColor, 1.0) * max(dot(N,L), 0.0);
- Idiff = clamp(Idiff, 0.0, 1.0);
- float shininess = 0.01;
- // calculate Specular Term:
- vec4 Ispec = vec4(uPointLightingSpecularColor, 1.0) * pow(max(dot(R,E),0.0),0.3*shininess);
- Ispec = clamp(Ispec, 0.0, 1.0);
- vec4 fragmentColor;
- fragmentColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
- gl_FragColor = vec4(fragmentColor.rgb * vec3(Iamb + Idiff + Ispec), fragmentColor.a);
+<script id="skysphere-vs" type="x-shader/x-vertex">
+
+attribute vec3 aVertexPosition;
+attribute vec3 aVertexNormal;
+attribute vec2 aTextureCoord;
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+varying vec2 vTextureCoord;
+
+varying vec3 vPosition;
+
+void main(void)
+{
+ vTextureCoord = aTextureCoord;
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+}
+
+</script>
+
+<script id="skysphere-fs" type="x-shader/x-fragment">
+
+#ifdef GL_ES
+precision highp float;
+#endif
+
+varying vec2 vTextureCoord;
+
+uniform sampler2D uSampler;
+
+void main(void) {
+ gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>
@@ -151,6 +146,7 @@
<script type="text/javascript" src="buffer.js"></script>
<script type="text/javascript" src="program.js"></script>
<script type="text/javascript" src="models.js"></script>
+<script type="text/javascript" src="skysphere.js"></script>
<script type="text/javascript" src="js.js"></script>
View
82 js.js
@@ -5,7 +5,6 @@ UI.keys = {};
function handleKeyDown(event) {
UI.keys[event.keyCode] = true;
- console.log(event.keyCode);
}
function handleKeyUp(event) {
@@ -103,32 +102,17 @@ function G3Object(c, program, vertices, colors) {
};
this.scale = function(xScale, yScale, zScale) {
+ yScale = yScale || xScale;
+ zScale = zScale || xScale;
mat4.scale(this.pos, [xScale, yScale, zScale]);
};
- this.setColor = function(color) {
- this.model.setColor(color);
- }
- this.setColors = function(colors) {
- this.model.setColors(colors);
- }
}
function initBuffers() {
var red = [1,0,0,1];
var green = [0,1,0,1];
var blue = [0,0,1,1];
- // var triangle = new G3Object(gl, shaderProgram,
- // [ [ 0.0, 1.0, 0.0],
- // [-1.0, -1.0, 0.0],
- // [ 1.0, -1.0, 0.0] ]);
- // triangle.setColors([ [1.0, 0.0, 0.0, 1.0],
- // [0.0, 1.0, 0.0, 1.0],
- // [0.0, 0.0, 1.0, 1.0] ]);
-
- // triangle.translate([0, 0, 0]);
- // triangle.scale(0.3, 0.3, 0.3);
-
var field_model = new G3TriangleModel(gl, shaderProgram);
field_model.addSquare([ [ 1.0, 1.0, 0.0],
[-1.0, 1.0, 0.0],
@@ -140,30 +124,44 @@ function initBuffers() {
field.rotate(90, 0, 0);
field.scale(10.65, 7.15, 1);
- // var cube = createCube();
- // var cubeObj = new G3Object(gl);
- // cubeObj.setModel(square_model2);
- // cubeObj.translate([3, 3, -10]);
-
-
- // var bramka = createBramka();
- // var bramka1 = new G3Object(gl);
- // bramka1.setModel(bramka);
- // bramka1.translate([10.65, 1, 0]);
- // bramka1.rotate(0, 90, 0);
- // bramka1.scale(2, 1, 0.1);
-
- // var bramka2 = new G3Object(gl);
- // bramka2.setModel(bramka);
- // bramka2.translate([-10.65, 1, 0]);
- // bramka2.rotate(0, 90, 0);
- // bramka2.scale(2, 1, 0.1);
-
- // G3World.objects.push(triangle);
- G3World.objects.push(field);
- //G3World.objects.push(cubeObj);
- //G3World.objects.push(bramka1);
- //G3World.objects.push(bramka2);
+ var bramka = new G3TriangleModel(gl, shaderProgram);
+
+ bramka.addSquare([ [-1.0, 1.0, -1.0],
+ [-1.0, 1.0, 1.0],
+ [ 1.0, 1.0, 1.0],
+ [ 1.0, 1.0, -1.0] ], blue, [0, 1, 0]);
+ bramka.addSquare([ [ 1.0, -1.0, -1.0],
+ [ 1.0, 1.0, -1.0],
+ [ 1.0, 1.0, 1.0],
+ [ 1.0, -1.0, 1.0] ], blue, [1, 0, 0]);
+ bramka.addSquare([ [-1.0, -1.0, -1.0],
+ [-1.0, -1.0, 1.0],
+ [-1.0, 1.0, 1.0],
+ [-1.0, 1.0, -1.0] ], blue, [-1, 0, 0]);
+
+ bramka.prepareBuffers();
+
+ var bramka1 = new G3Object(gl);
+ bramka1.setModel(bramka);
+ bramka1.translate([10.65, 1, 0]);
+ bramka1.rotate(0, 90, 0);
+ bramka1.scale(2, 1, 0.1);
+
+ var bramka2 = new G3Object(gl);
+ bramka2.setModel(bramka);
+ bramka2.translate([-10.65, 1, 0]);
+ bramka2.rotate(0, 90, 0);
+ bramka2.scale(2, 1, 0.1);
+
+ var skysphere_mod = new Skysphere(gl, "gigapixel-milky-way.gif")
+ var skysphere = new G3Object(gl);
+ skysphere.setModel(skysphere_mod);
+ skysphere.scale(83.57887771204935);
+
+ G3World.objects.push(skysphere);
+ // G3World.objects.push(field);
+ // G3World.objects.push(bramka1);
+ // G3World.objects.push(bramka2);
}
function drawScene() {
View
163 models.js
@@ -1,18 +1,23 @@
-function G3Texture(c, url) {
- this.texture = gl.createTexture();
+function G3Texture(c, url, dummy_color) {
+ this.texture = c.createTexture();
this.loading = false;
this.loaded = false;
+
+ // c.bindTexture(c.TEXTURE_2D, this.texture);
+ // var pixel = new Uint8Array(dummy_color);
+ // c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, 1, 1, 0, c.RGBA, pixel);
+
var self = this;
var image = new Image();
image.onload = function () {
self.handleLoadedTexture()
}
- this.load = function(url) {
+ this.prepared = function(url) {
if (this.loading) return;
image.src = url;
}
if (url) {
- this.load(url);
+ this.prepared(url);
}
this.handleLoadedTexture = function() {
c.pixelStorei(c.UNPACK_FLIP_Y_WEBGL, true);
@@ -24,11 +29,11 @@ function G3Texture(c, url) {
c.bindTexture(c.TEXTURE_2D, null);
}
this.activate = function() {
- if (!this.loaded) {
- alert('not loaded!')
- }
- c.activeTexture(gl.TEXTURE0);
- c.bindTexture(gl.TEXTURE_2D, this.texture);
+ // if (!this.loaded) {
+ // alert('not loaded!')
+ // }
+ c.activeTexture(c.TEXTURE0);
+ c.bindTexture(c.TEXTURE_2D, this.texture);
}
}
@@ -154,6 +159,96 @@ function G3ComplexModel(c, program) {
};
}
+function G3Mesh(c, program) {
+ this.vertexes = [];
+ this.normals = [];
+ this.texture_coords = [];
+ this.indexes = [];
+
+ this.setSphere = function(radius) {
+ this.vertexes = [];
+ this.normals = [];
+ this.texture_coords = [];
+ this.indexes = [];
+ var latitudeBands = 100;
+ var longitudeBands = 100;
+ var radius = radius;
+ for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
+ var theta = latNumber * Math.PI / latitudeBands;
+ var sinTheta = Math.sin(theta);
+ var cosTheta = Math.cos(theta);
+ for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
+ var phi = longNumber * 2 * Math.PI / longitudeBands;
+ var sinPhi = Math.sin(phi);
+ var cosPhi = Math.cos(phi);
+ var x = cosPhi * sinTheta;
+ var y = cosTheta;
+ var z = sinPhi * sinTheta;
+ var u = 1 - (longNumber / longitudeBands);
+ var v = 1 - (latNumber / latitudeBands);
+ this.normals.push(x);
+ this.normals.push(y);
+ this.normals.push(z);
+ this.texture_coords.push(u);
+ this.texture_coords.push(v);
+ this.vertexes.push(radius * x);
+ this.vertexes.push(radius * y);
+ this.vertexes.push(radius * z);
+ }
+ }
+
+ for (var latNumber = 0; latNumber < latitudeBands; latNumber++) {
+ for (var longNumber = 0; longNumber < longitudeBands; longNumber++) {
+ var first = (latNumber * (longitudeBands + 1)) + longNumber;
+ var second = first + longitudeBands + 1;
+ this.indexes.push(first);
+ this.indexes.push(second);
+ this.indexes.push(first + 1);
+ this.indexes.push(second);
+ this.indexes.push(second + 1);
+ this.indexes.push(first + 1);
+ }
+ }
+
+ this.vertexes_buf = new G3Buffer(c, "aVertexPosition", Float32Array, this.vertexes, 3);
+ this.normals_buf = new G3Buffer(c, "aVertexNormal", Float32Array, this.normals, 3);
+ this.texture_coords_buf = new G3Buffer(c, "aTextureCoord", Float32Array, this.texture_coords, 2);
+ this.indexes_buf = new G3ElementBuffer(c, Uint16Array, this.indexes, 1, c.STREAM_DRAW);
+ };
+ this.prepare = function() {
+ };
+ this.render = function(p) {
+ p = p || program;
+ p.setAttribBuffer(this.vertexes_buf);
+ p.setAttribBuffer(this.normals_buf);
+ p.setAttribBuffer(this.texture_coords_buf);
+ p.render(this.indexes_buf);
+ }
+};
+
+function G3MeshModel(c, program) {
+ this.mesh = null;
+ this.texture = null;
+
+ this.setTexture = function(t) {
+ this.texture = t;
+ }
+ this.setMesh = function(m) {
+ this.mesh = m;
+ }
+ this.prepare = function() { this.mesh.prepare();
+ this.texture.prepare(); };
+
+ this.render = function() {
+ program.use();
+
+ if (this.texture) {
+ this.texture.activate(c);
+ }
+ this.mesh.render(program);
+ }
+}
+
function G3TriangleModel(c, program) {
this.vertexes = [];
this.colors = [];
@@ -208,61 +303,13 @@ function G3TriangleModel(c, program) {
}
}
- this.addSphere = function() {
- var latitudeBands = 30;
- var longitudeBands = 30;
- var radius = 2;
-
- for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) {
- var theta = latNumber * Math.PI / latitudeBands;
- var sinTheta = Math.sin(theta);
- var cosTheta = Math.cos(theta);
-
- for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) {
- var phi = longNumber * 2 * Math.PI / longitudeBands;
- var sinPhi = Math.sin(phi);
- var cosPhi = Math.cos(phi);
-
- var x = cosPhi * sinTheta;
- var y = cosTheta;
- var z = sinPhi * sinTheta;
- var u = 1- (longNumber / longitudeBands);
- var v = latNumber / latitudeBands;
-
- this.normals.push(x);
- this.normals.push(y);
- this.normals.push(z);
- this.texture_coords.push(u);
- this.texture_coords.push(v);
- this.vertexes.push(radius * x);
- this.vertexes.push(radius * y);
- this.vertexes.push(radius * z);
- }
- }
-
- for (var latNumber = 0; latNumber < latitudeBands; latNumber++) {
- for (var longNumber = 0; longNumber < longitudeBands; longNumber++) {
- var first = (latNumber * (longitudeBands + 1)) + longNumber;
- var second = first + longitudeBands + 1;
- this.indexes.push(first);
- this.indexes.push(second);
- this.indexes.push(first + 1);
-
- this.indexes.push(second);
- this.indexes.push(second + 1);
- this.indexes.push(first + 1);
- }
- }
- }
-
this.prepareBuffers = function() {
this.vertexes_buf = new G3Buffer(c, "aVertexPosition", Float32Array, this.vertexes, 3);
this.normals_buf = new G3Buffer(c, "aVertexNormal", Float32Array, this.normals, 3);
this.colors_buf = new G3Buffer(c, "aVertexColor", Float32Array, this.colors, 4);
this.indexes_buf = new G3ElementBuffer(c, Uint16Array, this.indexes);
this.prepared = true;
- }
-
+ }
this.render = function() {
if (!this.prepared) {
View
2 program.js
@@ -155,7 +155,7 @@ function G3Program(c, vs, fs) {
this.uniformLocs[name] = c.getUniformLocation(program, name);
this.uniforms[name] = settr;
if (info.type == c.SAMPLER_2D || info.type == c.SAMPLER_CUBE) {
- textures[name] = settr;
+ this.textures[name] = settr;
}
}
View
18 skysphere.js
@@ -0,0 +1,18 @@
+function Skysphere(c, url) {
+ var program = new G3Program(c, "skysphere-vs", "skysphere-fs");
+
+ var skysphere_mesh = new G3Mesh(c, program);
+ skysphere_mesh.setSphere(1);
+
+ var skysphere_tex = new G3Texture(c, url, [1.0, 0.0, 0.0, 0.0]);
+
+ var skysphere = new G3MeshModel(c, program);
+ skysphere.setMesh(skysphere_mesh);
+ skysphere.setTexture(skysphere_tex);
+
+ this.render = function() {
+
+ skysphere.render();
+ gl.clear(gl.DEPTH_BUFFER_BIT);
+ }
+}

0 comments on commit 8bd34ee

Please sign in to comment.