You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
11 KiB
434 lines
11 KiB
<html>
|
|
<head>
|
|
<title>My first animated and textured WebGL content.</title>
|
|
|
|
<script src="./gl-matrix-min.js" type="text/javascript"></script>
|
|
|
|
<script type="text/javascript">
|
|
var projectionMatrix, modelViewMatrix;
|
|
var rotationAxis;
|
|
var shaderProgram, shaderVertexPositionAttribute
|
|
var shaderTexCoordAttribute, shaderSamplerUniform;
|
|
var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;
|
|
|
|
var duration = 5000; // ms
|
|
var currentTime = Date.now();
|
|
|
|
var okToRun = false;
|
|
var webGLTexture;
|
|
|
|
function handleTextureLoaded(gl, texture) {
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
|
gl.texImage2D(
|
|
gl.TEXTURE_2D,
|
|
0,
|
|
gl.RGBA,
|
|
gl.RGBA,
|
|
gl.UNSIGNED_BYTE,
|
|
texture.image);
|
|
gl.texParameteri(
|
|
gl.TEXTURE_2D,
|
|
gl.TEXTURE_MAG_FILTER,
|
|
gl.NEAREST);
|
|
gl.texParameteri(
|
|
gl.TEXTURE_2D,
|
|
gl.TEXTURE_MIN_FILTER,
|
|
gl.NEAREST);
|
|
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
okToRun = true;
|
|
}
|
|
|
|
function initTexture(gl) {
|
|
webGLTexture = gl.createTexture();
|
|
webGLTexture.image = new Image();
|
|
webGLTexture.image.onload = function () {
|
|
handleTextureLoaded(gl, webGLTexture)
|
|
}
|
|
//webGLTexture.image.src = "P3D/images/webgl-logo-256.jpg";
|
|
webGLTexture.image.src = "gravatar-256.jpg";
|
|
}
|
|
|
|
function initWebGL(canvas) {
|
|
var gl = null;
|
|
var msg = "Your browser does not support WebGL, " +
|
|
"or it is not enabled by default.";
|
|
try {
|
|
gl = canvas.getContext("experimental-webgl");
|
|
}
|
|
catch (e) {
|
|
msg = "Error creating WebGL Context!: " + e.toString();
|
|
}
|
|
if (!gl) {
|
|
alert(msg);
|
|
throw new Error(msg);
|
|
}
|
|
|
|
return gl;
|
|
}
|
|
|
|
function initViewport(gl, canvas) {
|
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
// Create the vertex, color, and index data for a
|
|
// multicolored cube
|
|
function createCube(gl) {
|
|
// Vertex Data
|
|
var vertexBuffer;
|
|
vertexBuffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
|
|
var verts = [
|
|
// Front face
|
|
-1.0, -1.0, 1.0,
|
|
1.0, -1.0, 1.0,
|
|
1.0, 1.0, 1.0,
|
|
-1.0, 1.0, 1.0,
|
|
// Back face
|
|
-1.0, -1.0, -1.0,
|
|
-1.0, 1.0, -1.0,
|
|
1.0, 1.0, -1.0,
|
|
1.0, -1.0, -1.0,
|
|
// Top face
|
|
-1.0, 1.0, -1.0,
|
|
-1.0, 1.0, 1.0,
|
|
1.0, 1.0, 1.0,
|
|
1.0, 1.0, -1.0,
|
|
// Bottom face
|
|
-1.0, -1.0, -1.0,
|
|
1.0, -1.0, -1.0,
|
|
1.0, -1.0, 1.0,
|
|
-1.0, -1.0, 1.0,
|
|
// Right face
|
|
1.0, -1.0, -1.0,
|
|
1.0, 1.0, -1.0,
|
|
1.0, 1.0, 1.0,
|
|
1.0, -1.0, 1.0,
|
|
// Left face
|
|
-1.0, -1.0, -1.0,
|
|
-1.0, -1.0, 1.0,
|
|
-1.0, 1.0, 1.0,
|
|
-1.0, 1.0, -1.0
|
|
];
|
|
gl.bufferData(
|
|
gl.ARRAY_BUFFER,
|
|
new Float32Array(verts),
|
|
gl.STATIC_DRAW);
|
|
|
|
var texCoordBuffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
|
|
var textureCoords = [
|
|
// Front face
|
|
0.0, 0.0,
|
|
1.0, 0.0,
|
|
1.0, 1.0,
|
|
0.0, 1.0,
|
|
|
|
// Back face
|
|
1.0, 0.0,
|
|
1.0, 1.0,
|
|
0.0, 1.0,
|
|
0.0, 0.0,
|
|
|
|
// Top face
|
|
0.0, 1.0,
|
|
0.0, 0.0,
|
|
1.0, 0.0,
|
|
1.0, 1.0,
|
|
|
|
// Bottom face
|
|
1.0, 1.0,
|
|
0.0, 1.0,
|
|
0.0, 0.0,
|
|
1.0, 0.0,
|
|
|
|
// Right face
|
|
1.0, 0.0,
|
|
1.0, 1.0,
|
|
0.0, 1.0,
|
|
0.0, 0.0,
|
|
|
|
// Left face
|
|
0.0, 0.0,
|
|
1.0, 0.0,
|
|
1.0, 1.0,
|
|
0.0, 1.0,
|
|
];
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
|
|
|
|
// Index data (defines the triangles to be drawn)
|
|
var cubeIndexBuffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
|
|
var cubeIndices = [
|
|
0, 1, 2, 0, 2, 3, // Front face
|
|
4, 5, 6, 4, 6, 7, // Back face
|
|
8, 9, 10, 8, 10, 11, // Top face
|
|
12, 13, 14, 12, 14, 15, // Bottom face
|
|
16, 17, 18, 16, 18, 19, // Right face
|
|
20, 21, 22, 20, 22, 23 // Left face
|
|
];
|
|
gl.bufferData(
|
|
gl.ELEMENT_ARRAY_BUFFER,
|
|
new Uint16Array(cubeIndices),
|
|
gl.STATIC_DRAW);
|
|
var cube = {
|
|
buffer:vertexBuffer,
|
|
texCoordBuffer:texCoordBuffer,
|
|
indices:cubeIndexBuffer,
|
|
vertSize:3,
|
|
nVerts:24,
|
|
texCoordSize:2,
|
|
nTexCoords: 24,
|
|
nIndices:36,
|
|
primtype:gl.TRIANGLES};
|
|
|
|
return cube;
|
|
}
|
|
|
|
function initMatrices(canvas) {
|
|
modelViewMatrix = mat4.create();
|
|
mat4.translate(
|
|
modelViewMatrix, modelViewMatrix, [0, 0, -4.6]);
|
|
|
|
// Create a project matrix with 45 degree field of view
|
|
projectionMatrix = mat4.create();
|
|
mat4.perspective(projectionMatrix, Math.PI / 4,
|
|
canvas.width / canvas.height, 1, 10000);
|
|
|
|
rotationAxis = vec3.create();
|
|
vec3.normalize(rotationAxis, [1, 1, 1]);
|
|
}
|
|
|
|
function createShader(gl, id, type) {
|
|
var shader;
|
|
var str = document.getElementById(id).text;
|
|
if (type == "fragment") {
|
|
shader = gl.createShader(gl.FRAGMENT_SHADER);
|
|
} else if (type == "vertex") {
|
|
shader = gl.createShader(gl.VERTEX_SHADER);
|
|
} else {
|
|
return null;
|
|
}
|
|
|
|
gl.shaderSource(shader, str);
|
|
gl.compileShader(shader);
|
|
|
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
alert(gl.getShaderInfoLog(shader));
|
|
return null;
|
|
}
|
|
|
|
return shader;
|
|
}
|
|
|
|
function initShader(gl, vertex, fragment) {
|
|
// load and compile the fragment and vertex shader
|
|
var fragmentShader = createShader(gl, fragment, "fragment");
|
|
var vertexShader = createShader(gl, vertex, "vertex");
|
|
|
|
// link them together into a new program
|
|
shaderProgram = gl.createProgram();
|
|
gl.attachShader(shaderProgram, vertexShader);
|
|
gl.attachShader(shaderProgram, fragmentShader);
|
|
gl.linkProgram(shaderProgram);
|
|
|
|
// get pointers to the shader params
|
|
shaderVertexPositionAttribute = gl.getAttribLocation(
|
|
shaderProgram, "vertexPos");
|
|
gl.enableVertexAttribArray(shaderVertexPositionAttribute);
|
|
shaderTexCoordAttribute = gl.getAttribLocation(
|
|
shaderProgram, "texCoord");
|
|
gl.enableVertexAttribArray(shaderTexCoordAttribute);
|
|
|
|
shaderProjectionMatrixUniform = gl.getUniformLocation(
|
|
shaderProgram, "projectionMatrix");
|
|
shaderModelViewMatrixUniform = gl.getUniformLocation(
|
|
shaderProgram, "modelViewMatrix");
|
|
shaderSamplerUniform = gl.getUniformLocation(
|
|
shaderProgram, "uSampler");
|
|
|
|
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
|
alert("Could not initialise shaders");
|
|
}
|
|
}
|
|
|
|
function draw(gl, obj) {
|
|
// clear the background (transparent)
|
|
gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
|
// // clear the background (black)
|
|
// gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
|
gl.enable(gl.DEPTH_TEST);
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
|
|
// set the shader to use
|
|
gl.useProgram(shaderProgram);
|
|
|
|
// connect up the shader parameters: vertex position,
|
|
// color, and projection/model matrices
|
|
// set up the buffers
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
|
|
gl.vertexAttribPointer(
|
|
shaderVertexPositionAttribute,
|
|
obj.vertSize,
|
|
gl.FLOAT,
|
|
false, 0, 0);
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer);
|
|
gl.vertexAttribPointer(
|
|
shaderTexCoordAttribute,
|
|
obj.texCoordSize,
|
|
gl.FLOAT,
|
|
false, 0, 0);
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);
|
|
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false,
|
|
projectionMatrix);
|
|
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false,
|
|
modelViewMatrix);
|
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
gl.bindTexture(gl.TEXTURE_2D, webGLTexture);
|
|
gl.uniform1i(shaderSamplerUniform, 0);
|
|
|
|
// draw the object
|
|
gl.drawElements(
|
|
obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);
|
|
}
|
|
|
|
function animate() {
|
|
var now = Date.now();
|
|
var deltat = now - currentTime;
|
|
currentTime = now;
|
|
var fract = deltat / duration;
|
|
var angle = Math.PI * 2 * fract;
|
|
mat4.rotate(
|
|
modelViewMatrix,
|
|
modelViewMatrix,
|
|
angle,
|
|
rotationAxis);
|
|
}
|
|
|
|
function run(gl, cube) {
|
|
requestAnimationFrame(function() { run(gl, cube); });
|
|
if (okToRun) {
|
|
draw(gl, cube);
|
|
animate();
|
|
}
|
|
}
|
|
|
|
function startGl() {
|
|
// Get A WebGL context
|
|
var canvas = document.getElementById("cube");
|
|
var gl = initWebGL(canvas);
|
|
var obj = createCube(gl);
|
|
|
|
initViewport(gl, canvas);
|
|
initMatrices(canvas);
|
|
initShader(
|
|
gl,
|
|
"texture-vertex-shader",
|
|
"texture-fragment-shader");
|
|
initTexture(gl);
|
|
run(gl, obj);
|
|
}
|
|
</script>
|
|
|
|
<script id="texture-vertex-shader" type="x-shader/x-vertex">
|
|
attribute vec3 vertexPos;
|
|
attribute vec2 texCoord;
|
|
uniform mat4 modelViewMatrix;
|
|
uniform mat4 projectionMatrix;
|
|
varying vec2 vTexCoord;
|
|
void main(void) {
|
|
// Return the transformed and projected vertex value
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(vertexPos, 1.0);
|
|
// Output the texture coordinate in vTexCoord
|
|
vTexCoord = texCoord;
|
|
}
|
|
</script>
|
|
|
|
<script id="texture-fragment-shader" type="x-shader/x-fragment">
|
|
precision mediump float;
|
|
varying vec2 vTexCoord;
|
|
uniform sampler2D uSampler;
|
|
void main(void) {
|
|
// Return the pixel color: always output white
|
|
gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));
|
|
}
|
|
</script>
|
|
<style>
|
|
* {
|
|
font-family: Verdana, sans-serif;
|
|
}
|
|
.gl {
|
|
position: absolute;
|
|
top: 130px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
width: 200px;
|
|
height: 200px;
|
|
z-index: 2;
|
|
}
|
|
.content {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
/* bring your own prefixes */
|
|
transform: translate(-50%, -50%);
|
|
width: 800px;
|
|
background: white;
|
|
padding: 10px;
|
|
border-style: solid;
|
|
border-color: rgb(100, 190, 12);
|
|
border-radius: 30px;
|
|
border-width: 3px;
|
|
z-index: 1;
|
|
}
|
|
#background {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 1920px;
|
|
height: 1200px;
|
|
background-image: url(./background1.jpg);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
z-index: -1;
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
font-weight: normal;
|
|
}
|
|
h1,h4 {
|
|
text-decoration: underline;
|
|
}
|
|
h1 {
|
|
font-size: x-large;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onLoad="startGl()">
|
|
<div id="background"></div>
|
|
<div class="content">
|
|
<div class="gl">
|
|
<canvas id="cube" width="200", height="200"></canvas>
|
|
</div>
|
|
<h1>My first animated and textured WebGL content.</h1>
|
|
<p>
|
|
Finally my first small steps in the new world of WebGL. It is
|
|
pretty cool to have hardware accelerated, animated 3D objects
|
|
in your page.
|
|
</p>
|
|
<h2>Hidden on purpose.</h2>
|
|
<p>
|
|
This paragraph is hidden on purpose to see how the transparent
|
|
background of the GL canvas behaves if positioned above another
|
|
element. Now, we just fill in some stuff to get the paragraph
|
|
filled with some more stuff. Eventually we will have so much text
|
|
that it becomes big enought for the height of the GL canvas. Well,
|
|
as the canvas is transparant at least the maximum height of the
|
|
cube.
|
|
</p>
|
|
<h2>More to come...</h2>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<!-- vim: set ts=4 sw=4: -->
|