Skip to content
Snippets Groups Projects
Commit 1186de67 authored by Hwanyong Lee's avatar Hwanyong Lee
Browse files

First Build of WebGL Tutorial

parent a02c0539
Branches
No related tags found
No related merge requests found
Showing
with 16850 additions and 0 deletions
<html>
<head>
<title>WebGLHelloAPI</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="box.js">
</script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="600" height="600"></canvas>
</body>
</html>
var gl;
function testGLError(functionLastCalled) {
/* gl.getError returns the last error that occurred using WebGL for debugging */
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
var vertexData = [
-0.5, -0.5, 0.5, 1.0, 0.0, 1.0, 1.0, // First Triangle
-0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 1.0,
0.5, 0.5, 0.5, 1.0, 0.0, 0.0, 1.0,
0.5, 0.5, -0.5, 1.0, 1.0, 1.0, 1.0,
0.5, -0.5, -0.5, 1.0, 0.0, 1.0, 1.0, // Second Triangle
-0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 1.0,
// You need to make here!
];
var elementData = [ 0,1,2,3,4,5];
function initialiseBuffer() {
gl.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
gl.elementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.elementBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(elementData),gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
var fragmentShaderSource = '\
varying highp vec4 color; \
void main(void) \
{ \
gl_FragColor = color; \
}';
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(gl.fragShader, fragmentShaderSource);
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
// Vertex shader code
var vertexShaderSource = '\
attribute highp vec4 myVertex; \
attribute highp vec4 myColor; \
uniform mediump mat4 transformationMatrix; \
uniform mediump mat4 virwMatrix; \
uniform mediump mat4 projMatrix; \
varying highp vec4 color;\
void main(void) \
{ \
gl_Position = transformationMatrix * myVertex; \
color = myColor; \
}';
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(gl.vertexShader, vertexShaderSource);
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
gl.bindAttribLocation(gl.programObject, 1, "myColor");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
gl.useProgram(gl.programObject);
console.log("myVertex Location is: ", gl.getAttribLocation(gl.programObject, "myColor"));
return testGLError("initialiseShaders");
}
var rotY = 0.0;
function renderScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");
var transformationMatrix = [
Math.cos(rotY), 0.0, -Math.sin(rotY), 0.0,
0.0, 1.0, 0.0, 0.0,
Math.sin(rotY), 0.0, Math.cos(rotY), 0.5, // For pseudo perspective View
0.0, 0.0, 0.0, 1.0
];
rotY += 0.01;
gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12);
// gl.vertexAttrib4f(1, Math.random(), 0.0, 1.0, 1.0);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
// gl.lineWidth(6.0); // It is not working at Chrome!
// gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT,0);
// gl.drawArrays(gl.POINTS, 0, 6);
// gl.drawArrays(gl.LINES, 0, 6);
gl.drawArrays(gl.TRIANGLES, 0, 6);
console.log("Enum for Primitive Assumbly", gl.TRIANGLES, gl.TRIANGLE, gl.POINTS);
if (!testGLError("gl.drawArrays")) {
return false;
}
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) {
return;
}
if (!initialiseBuffer()) {
return;
}
if (!initialiseShaders()) {
return;
}
// Render loop
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000, 60);
};
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
var gl;
function testGLError(functionLastCalled) {
/* gl.getError returns the last error that occurred using WebGL for debugging */
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext("webgl", {antialias: true, depth: false}) || canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.disable(gl.SAMPLE_COVERAGE);
console.log(gl.isEnabled(gl.SAMPLE_COVERAGE));
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
function initialiseBuffer() {
var vertexData = [
-0.4, -0.4, 0.0, // Bottom left
0.4, -0.4, 0.0, // Bottom right
0.0, 0.4, 0.0 // Top middle
];
// Generate a buffer object
gl.vertexBuffer = gl.createBuffer();
// Bind buffer as a vertex buffer so we can fill it with data
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
/* Set the buffer's size, data and usage */
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
var fragmentShaderSource = '\
void main(void) \
{ \
gl_FragColor = vec4(1.0, 1.0, 0.66, 1.0); \
}';
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(gl.fragShader, fragmentShaderSource);
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
// Vertex shader code
var vertexShaderSource = '\
attribute highp vec4 myVertex; \
uniform mediump mat4 transformationMatrix; \
void main(void) \
{ \
gl_Position = transformationMatrix * myVertex; \
}';
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(gl.vertexShader, vertexShaderSource);
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
gl.useProgram(gl.programObject);
return testGLError("initialiseShaders");
}
function renderScene() {
gl.clearColor(0.6, 0.8, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");
var transformationMatrix = [
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
];
gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
// Enable the user-defined vertex array
gl.enableVertexAttribArray(0);
// Set the vertex data to this attribute index, with the number of floats in each position
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
gl.drawArrays(gl.TRIANGLES, 0, 3);
if (!testGLError("gl.drawArrays")) {
return false;
}
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) {
return;
}
if (!initialiseBuffer()) {
return;
}
if (!initialiseShaders()) {
return;
}
// Render loop
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000, 60);
};
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
basic_course/Hello/hello.png

11.1 KiB

<html>
<head>
<title>WebGLHelloAPI</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="hello.js">
</script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="800" height="600"></canvas>
</body>
</html>
var gl;
function testGLError(functionLastCalled) {
/* gl.getError returns the last error that occurred using WebGL for debugging */
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
var vertexData = [
-0.4, -0.4, 0.0, 1.0, 0.0, 1.0, 1.0,// Bottom left
0.4, -0.4, 0.0, 1.0, 1.0, 1.0, 1.0,// Bottom right
0.0, 0.4, 0.0, 1.0, 0.0, 0.0, 1.0,// Top middle
0.6, 0.6, 0.0, 1.0, 1.0, 1.0, 1.0,// Bottom left
0.8, 0.6, 0.0, 1.0, 0.0, 1.0, 1.0,// Bottom right
0.7, 0.8, 0.0, 0.0, 0.0, 1.0, 1.0 // Top middle
];
var elementData = [ 0,1,2,3,4,5];
function initialiseBuffer() {
gl.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
gl.elementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.elementBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(elementData),gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
var fragmentShaderSource = '\
varying highp vec4 color; \
void main(void) \
{ \
gl_FragColor = color;\
}';
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(gl.fragShader, fragmentShaderSource);
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
// Vertex shader code
var vertexShaderSource = '\
attribute highp vec4 myVertex; \
attribute highp vec4 myColor; \
uniform mediump mat4 transformationMatrix; \
varying highp vec4 color;\
void main(void) \
{ \
gl_Position = transformationMatrix * myVertex; \
gl_PointSize = 8.0; \
color = myColor; \
}';
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(gl.vertexShader, vertexShaderSource);
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
gl.bindAttribLocation(gl.programObject, 1, "myColor");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
gl.useProgram(gl.programObject);
console.log("myVertex Location is: ", gl.getAttribLocation(gl.programObject, "myColor"));
return testGLError("initialiseShaders");
}
function renderScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");
var transformationMatrix = [
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
];
gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12);
// gl.vertexAttrib4f(1, Math.random(), 0.0, 1.0, 1.0);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
// gl.lineWidth(6.0); // It is not working at Chrome!
// gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT,0);
// gl.drawArrays(gl.POINTS, 0, 6);
// gl.drawArrays(gl.LINES, 0, 6);
gl.drawArrays(gl.TRIANGLES, 0, 6);
console.log("Enum for Primitive Assumbly", gl.TRIANGLES, gl.TRIANGLE, gl.POINTS);
if (!testGLError("gl.drawArrays")) {
return false;
}
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) {
return;
}
if (!initialiseBuffer()) {
return;
}
if (!initialiseShaders()) {
return;
}
// Render loop
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000, 60);
};
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
var gl;
function testGLError(functionLastCalled) {
/* gl.getError returns the last error that occurred using WebGL for debugging */
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
var vertexData = [
-0.4, -0.4, 0.0, // Bottom left
0.4, -0.4, 0.0, // Bottom right
0.0, 0.4, 0.0, // Top middle
0.6, 0.6, 0.0, // Bottom left
0.8, 0.6, 0.0, // Bottom right
0.7, 0.8, 0.0 // Top middle
];
var elementData = [ 0,1,2,3,4,5];
var colorData = [
1.0, 0.0, 1.0, 1.0,
1.0, 1.0, 1.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 1.0, 1.0, 1.0,
1.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0 ];
function initialiseBuffer() {
gl.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
gl.colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW);
gl.elementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.elementBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(elementData),gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
var fragmentShaderSource = '\
varying highp vec4 color; \
void main(void) \
{ \
gl_FragColor = color;\
}';
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(gl.fragShader, fragmentShaderSource);
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
// Vertex shader code
var vertexShaderSource = '\
attribute highp vec4 myVertex; \
attribute highp vec4 myColor; \
uniform mediump mat4 transformationMatrix; \
varying highp vec4 color;\
void main(void) \
{ \
gl_Position = transformationMatrix * myVertex; \
color = myColor; \
}';
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(gl.vertexShader, vertexShaderSource);
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
gl.bindAttribLocation(gl.programObject, 1, "myColor");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
gl.useProgram(gl.programObject);
console.log("myVertex Location is: ", gl.getAttribLocation(gl.programObject, "myColor"));
return testGLError("initialiseShaders");
}
function renderScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");
var transformationMatrix = [
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
];
gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
// Enable the user-defined vertex array
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.enableVertexAttribArray(0);
// Set the vertex data to this attribute index, with the number of floats in each position
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.colorBuffer);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 0, 0);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
// gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT,0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
if (!testGLError("gl.drawArrays")) {
return false;
}
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) {
return;
}
if (!initialiseBuffer()) {
return;
}
if (!initialiseShaders()) {
return;
}
// Render loop
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000, 60);
};
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
<html>
<head>
<title>WebGLHelloAPI</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="hello.js">
</script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="800" height="600"></canvas>
</body>
</html>
This diff is collapsed.
var gl;
function testGLError(functionLastCalled) {
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext("webgl", {stencil: true}) || canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
var vertexData = [
// Backface (RED/WHITE) -> z = -0.5
-0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 0.5,
0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 0.5,
0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 0.5,
-0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 0.5,
-0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 0.5,
0.5, 0.5, -0.5, 1.0, 1.0, 1.0, 0.5,
// Front (BLUE/WHITE) -> z = 0.5
-0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 0.5,
0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 0.5,
0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 0.5,
-0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 0.5,
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.5,
-0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 0.5,
// LEFT (GREEN/WHITE) -> z = 0.5
-0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 0.5,
-0.5, 0.5, 0.5, 0.0, 1.0, 0.0, 0.5,
-0.5, 0.5, -0.5, 0.0, 1.0, 0.0, 0.5,
-0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 0.5,
-0.5, -0.5, 0.5, 0.0, 1.0, 0.0, 0.5,
-0.5, 0.5, 0.5, 0.0, 1.0, 1.0, 0.5,
// RIGHT (YELLOE/WHITE) -> z = 0.5
0.5, -0.5, -0.5, 1.0, 1.0, 0.0, 0.5,
0.5, 0.5, -0.5, 1.0, 1.0, 0.0, 0.5,
0.5, 0.5, 0.5, 1.0, 1.0, 0.0, 0.5,
0.5, -0.5, -0.5, 1.0, 1.0, 0.0, 0.5,
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.5,
0.5, -0.5, 0.5, 1.0, 1.0, 0.0, 0.5,
// BOTTON (MAGENTA/WHITE) -> z = 0.5
-0.5, -0.5, -0.5, 1.0, 0.0, 1.0, 0.5,
0.5, -0.5, -0.5, 1.0, 0.0, 1.0, 0.5,
0.5, -0.5, 0.5, 1.0, 0.0, 1.0, 0.5,
-0.5, -0.5, -0.5, 1.0, 0.0, 1.0, 0.5,
0.5, -0.5, 0.5, 1.0, 1.0, 1.0, 0.5,
-0.5, -0.5, 0.5, 1.0, 0.0, 1.0, 0.5,
// TOP (CYAN/WHITE) -> z = 0.5
-0.5, 0.5, -0.5, 0.0, 1.0, 1.0, 0.5,
0.5, 0.5, 0.5, 0.0, 1.0, 1.0, 0.5,
0.5, 0.5, -0.5, 0.0, 1.0, 1.0, 0.5,
-0.5, 0.5, -0.5, 0.0, 1.0, 1.0, 0.5,
-0.5, 0.5, 0.5, 0.0, 1.0, 1.0, 0.5,
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 0.5
];
function initialiseBuffer() {
gl.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
var fragmentShaderSource = '\
varying highp vec4 color; \
void main(void) \
{ \
gl_FragColor = color;\
}';
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(gl.fragShader, fragmentShaderSource);
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
// Vertex shader code
var vertexShaderSource = '\
attribute highp vec4 myVertex; \
attribute highp vec4 myColor; \
uniform mediump mat4 mMat; \
uniform mediump mat4 vMat; \
uniform mediump mat4 pMat; \
varying highp vec4 color;\
void main(void) \
{ \
gl_Position = pMat * vMat * mMat * myVertex; \
gl_PointSize = 8.0; \
color = myColor; \
}';
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(gl.vertexShader, vertexShaderSource);
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
gl.bindAttribLocation(gl.programObject, 1, "myColor");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
gl.useProgram(gl.programObject);
// console.log("myVertex Location is: ", gl.getAttribLocation(gl.programObject, "myColor"));
return testGLError("initialiseShaders");
}
flag_animation = 0;
function toggleAnimation()
{
flag_animation ^= 1;
}
rotY = 0.0;
function renderScene() {
gl.disable(gl.SCISSOR_TEST);
//gl.enable(gl.SCISSOR_TEST);
// gl.scissor(350, 250, 100, 100);
//gl.enable(gl.SCISSOR_TEST);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0); // Added for depth Test
gl.clearStencil(0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT); // Added for depth Test
gl.disable(gl.DEPTH_TEST); // Added for depth Test
gl.depthFunc(gl.LESS);
// gl.disable(gl.POLYGON_OFFSET_FILL);
// gl.enable(gl.CULL_FACE); // Added for depth Test
// gl.enable(gl.STENCIL_TEST);
gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
var mMatLocation = gl.getUniformLocation(gl.programObject, "mMat");
var vMatLocation = gl.getUniformLocation(gl.programObject, "vMat");
var pMatLocation = gl.getUniformLocation(gl.programObject, "pMat");
var mMat = [];
mat4.translate(mMat, mMat, [0.0, 0.0, 0.0]);
if ( flag_animation ){
rotY += 0.01;
}
var vMat = [];
mat4.lookAt(vMat, [0.0, 0.0, 3.0], [0.0,0.0,0.0], [0.0, 1.0, 0.0]);
var pMat = [];
mat4.identity(pMat);
// mat4.ortho(pMat, -2*800.0/600.0, 2*800.0/600.0, -2, 2, 1, 7.0)
mat4.perspective(pMat, 3.64/2.0, 800.0/600.0, 0.5, 9);
// console.log("pMAT:", pMat);
gl.uniformMatrix4fv(vMatLocation, gl.FALSE, vMat );
gl.uniformMatrix4fv(pMatLocation, gl.FALSE, pMat );
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
//vertexData[0] += 0.01;
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.enableVertexAttribArray(0);
//gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12);
//gl.vertexAttrib4f(1, 1.0, 0.0, 1.0, 1.0);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
// gl.stencilFunc(gl.ALWAYS, 1, 0xff);
// gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
mat4.identity(mMat);
mat4.rotateY(mMat, mMat, rotY);
gl.uniformMatrix4fv(mMatLocation, gl.FALSE, mMat );
gl.drawArrays(gl.TRIANGLES, 0, 36);
// gl.enable(gl.POLYGON_OFFSET_FILL);
// gl.polygonOffset(-0.1, -0.1);
// gl.stencilFunc(gl.EQUAL, 1, 0xff);
// gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
mat4.identity(mMat);
mat4.rotateY(mMat, mMat, rotY*2.0);
mat4.translate(mMat, mMat, [0.8, 0.8, 0.8, 0.0]);
gl.uniformMatrix4fv(mMatLocation, gl.FALSE, mMat );
gl.drawArrays(gl.TRIANGLES, 0, 36);
if (!testGLError("gl.drawArrays")) { return false; }
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) { return; }
if (!initialiseBuffer()) { return; }
if (!initialiseShaders()) { return; }
// renderScene();
// Render loop
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000, 60); };
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
var gl;
function testGLError(functionLastCalled) {
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
var vertexData = [
// Backface (RED/WHITE) -> z = 0.5
-0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 1.0,
0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 1.0,
0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 1.0,
-0.5, -0.5, -0.5, 1.0, 0.0, 0.0, 1.0,
-0.5, 0.5, -0.5, 1.0, 0.0, 0.0, 1.0,
0.5, 0.5, -0.5, 1.0, 1.0, 1.0, 1.0,
// Front (BLUE/WHITE) -> z = 0.5
-0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 1.0,
0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 1.0,
0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 1.0,
-0.5, -0.5, 0.5, 0.0, 0.0, 1.0, 1.0,
-0.5, 0.5, 0.5, 0.0, 0.0, 1.0, 1.0,
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 1.0,
// LEFT (GREEN/WHITE) -> z = 0.5
-0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 1.0,
-0.5, 0.5, 0.5, 0.0, 1.0, 0.0, 1.0,
-0.5, 0.5, -0.5, 0.0, 1.0, 0.0, 1.0,
-0.5, -0.5, -0.5, 0.0, 1.0, 0.0, 1.0,
-0.5, -0.5, 0.5, 0.0, 1.0, 0.0, 1.0,
-0.5, 0.5, 0.5, 0.0, 1.0, 1.0, 1.0,
// RIGHT (YELLOE/WHITE) -> z = 0.5
0.5, -0.5, -0.5, 1.0, 1.0, 0.0, 1.0,
0.5, 0.5, 0.5, 1.0, 1.0, 0.0, 1.0,
0.5, 0.5, -0.5, 1.0, 1.0, 0.0, 1.0,
0.5, -0.5, -0.5, 1.0, 1.0, 0.0, 1.0,
0.5, -0.5, 0.5, 1.0, 1.0, 0.0, 1.0,
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 1.0,
// BOTTON (MAGENTA/WHITE) -> z = 0.5
-0.5, -0.5, -0.5, 1.0, 0.0, 1.0, 1.0,
0.5, -0.5, 0.5, 1.0, 0.0, 1.0, 1.0,
0.5, -0.5, -0.5, 1.0, 0.0, 1.0, 1.0,
-0.5, -0.5, -0.5, 1.0, 0.0, 1.0, 1.0,
-0.5, -0.5, 0.5, 1.0, 0.0, 1.0, 1.0,
0.5, -0.5, 0.5, 1.0, 1.0, 1.0, 1.0,
// TOP (CYAN/WHITE) -> z = 0.5
-0.5, 0.5, -0.5, 0.0, 1.0, 1.0, 1.0,
0.5, 0.5, 0.5, 0.0, 1.0, 1.0, 1.0,
0.5, 0.5, -0.5, 0.0, 1.0, 1.0, 1.0,
-0.5, 0.5, -0.5, 0.0, 1.0, 1.0, 1.0,
-0.5, 0.5, 0.5, 0.0, 1.0, 1.0, 1.0,
0.5, 0.5, 0.5, 1.0, 1.0, 1.0, 1.0
];
function initialiseBuffer() {
gl.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
var fragmentShaderSource = '\
varying highp vec4 color; \
void main(void) \
{ \
gl_FragColor = color;\
}';
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(gl.fragShader, fragmentShaderSource);
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
// Vertex shader code
var vertexShaderSource = '\
attribute highp vec4 myVertex; \
attribute highp vec4 myColor; \
uniform mediump mat4 mMat; \
uniform mediump mat4 vMat; \
uniform mediump mat4 pMat; \
varying highp vec4 color;\
void main(void) \
{ \
gl_Position = pMat * vMat * mMat * myVertex; \
gl_PointSize = 8.0; \
color = myColor; \
}';
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(gl.vertexShader, vertexShaderSource);
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
gl.bindAttribLocation(gl.programObject, 1, "myColor");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
gl.useProgram(gl.programObject);
// console.log("myVertex Location is: ", gl.getAttribLocation(gl.programObject, "myColor"));
return testGLError("initialiseShaders");
}
flag_animation = 0;
function toggleAnimation()
{
flag_animation ^= 1;
}
rotY = 0.0;
function renderScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0); // Added for depth Test
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Added for depth Test
gl.enable(gl.DEPTH_TEST); // Added for depth Test
var mMatLocation = gl.getUniformLocation(gl.programObject, "mMat");
var vMatLocation = gl.getUniformLocation(gl.programObject, "vMat");
var pMatLocation = gl.getUniformLocation(gl.programObject, "pMat");
var mMat = [];
mat4.translate(mMat, mMat, [0.0, 0.0, 0.0]);
if ( flag_animation ){
rotY += 0.01;
}
var vMat = [];
mat4.lookAt(vMat, [0.0, 0.0, 3.0], [0.0,0.0,0.0], [0.0, 1.0, 0.0]);
console.log(vMat);
var pMat = [];
mat4.identity(pMat);
// mat4.ortho(pMat, -2*800.0/600.0, 2*800.0/600.0, -2, 2, 1, 7.0)
mat4.perspective(pMat, 3.64/2.0, 800.0/600.0, 0.5, 9);
// console.log("pMAT:", pMat);
gl.uniformMatrix4fv(vMatLocation, gl.FALSE, vMat );
gl.uniformMatrix4fv(pMatLocation, gl.FALSE, pMat );
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
//vertexData[0] += 0.01;
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.enableVertexAttribArray(0);
//gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12);
//gl.vertexAttrib4f(1, 1.0, 0.0, 1.0, 1.0);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
var i;
mat4.identity(mMat);
mat4.rotateY(mMat, mMat, rotY);
gl.uniformMatrix4fv(mMatLocation, gl.FALSE, mMat );
gl.drawArrays(gl.TRIANGLES, 0, 36);
mat4.identity(mMat);
mat4.rotateY(mMat, mMat, 4.0*rotY);
mat4.translate(mMat, mMat, [0.6, 0.6, 0.6, 0.0]);
gl.uniformMatrix4fv(mMatLocation, gl.FALSE, mMat );
gl.drawArrays(gl.TRIANGLES, 0, 36);
if (!testGLError("gl.drawArrays")) {
return false;
}
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) { return; }
if (!initialiseBuffer()) { return; }
if (!initialiseShaders()) { return; }
// renderScene();
// Render loop
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000, 60); };
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
<html>
<head>
<title>WebGL Tutorial 07 - Transform Coding</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="gl-matrix.js"> </script>
<script>
window['mat4'] = glMatrix.mat4;
window['vec4'] = glMatrix.vec4;
window['vec3'] = glMatrix.vec4;
</script>
<script type="text/javascript" src="hello.js"> </script>
</head>
<body onload="main()">
<canvas id="helloapicanvas" style="border: none;" width="800" height="600"></canvas>
<br>
<button onclick="toggleAnimation()">Toggle Animation</button>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment