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.
57 lines
1.4 KiB
57 lines
1.4 KiB
<html>
|
|
<head>
|
|
<title>Colored animated cube.</title>
|
|
<link rel="stylesheet" href="main.css">
|
|
<script src="gl-matrix-min.js" type="text/javascript"></script>
|
|
<script src="cube.js" type="text/javascript"></script>
|
|
|
|
<script id="cube-vertex-shader" type="x-shader/x-vertex">
|
|
attribute vec3 vertexPos;
|
|
attribute vec4 vertexColor;
|
|
uniform mat4 modelViewMatrix;
|
|
uniform mat4 projectionMatrix;
|
|
varying vec4 vColor;
|
|
void main(void) {
|
|
// Return the transformed and projected vertex value
|
|
gl_Position =
|
|
projectionMatrix * modelViewMatrix * vec4(vertexPos, 1.0);
|
|
// Output the vertexColor in vColor
|
|
vColor = vertexColor;
|
|
}
|
|
</script>
|
|
|
|
<script id="cube-fragment-shader" type="x-shader/x-fragment">
|
|
precision mediump float;
|
|
varying vec4 vColor;
|
|
void main(void) {
|
|
// Return the pixel color: always output white
|
|
gl_FragColor = vColor;
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.result_container {
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onLoad="startGl()">
|
|
<div id="background"></div>
|
|
<div id="back" class="text">
|
|
<a href="index.html">back</a>
|
|
</div>
|
|
<div class="content text">
|
|
<h1>Colored animated cube.</h1>
|
|
<p>
|
|
An animated cube. Each side has a different color.
|
|
</p>
|
|
<h2>Result</h2>
|
|
<div class="gl">
|
|
<canvas id="cube" width="200" height="200"></canvas>
|
|
</div>
|
|
<p class="result_container"></p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<!-- vim: set ts=4 sw=4: -->
|