Last active
October 27, 2020 17:35
-
-
Save MinaGabriel/33cb4ff560e22f9614b8852969992033 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"/> | |
<title>Translate a Triangle</title> | |
<body onload="main()"> | |
<canvas id="webgl" width="400" height="400"> | |
Please use a browser that supports "canvas" | |
</canvas> | |
</body> | |
<script src="https://rawgit.com/huningxin/webglbook_examples/master/lib/webgl-utils.js"></script> | |
<script src="https://rawgit.com/huningxin/webglbook_examples/master/lib/webgl-debug.js"></script> | |
<script src="https://rawgit.com/huningxin/webglbook_examples/master/lib/cuon-utils.js"></script> | |
<script src="https://rawgit.com/huningxin/webglbook_examples/master/lib/cuon-matrix.js"></script> | |
<script type="text/javascript"> | |
// RotatedTranslatedTriangle.js (c) 2012 matsuda | |
// Vertex shader program | |
var VSHADER_SOURCE = | |
'attribute vec4 a_Position;\n' + | |
'uniform mat4 u_ModelMatrix;\n' + | |
'void main() {\n' + | |
' gl_Position = u_ModelMatrix * a_Position;\n' + | |
'}\n'; | |
// Fragment shader program | |
var FSHADER_SOURCE = | |
'void main() {\n' + | |
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + | |
'}\n'; | |
function main() { | |
// Retrieve <canvas> element | |
var canvas = document.getElementById('webgl'); | |
// Get the rendering context for WebGL | |
var gl = getWebGLContext(canvas); | |
if (!gl) { | |
console.log('Failed to get the rendering context for WebGL'); | |
return; | |
} | |
// Initialize shaders | |
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { | |
console.log('Failed to intialize shaders.'); | |
return; | |
} | |
// Write the positions of vertices to a vertex shader | |
var n = initVertexBuffers(gl); | |
if (n < 0) { | |
console.log('Failed to set the positions of the vertices'); | |
return; | |
} | |
// Create Matrix4 object for model transformation | |
var modelMatrix = new Matrix4(); | |
// Calculate a model matrix | |
var ANGLE = 60.0; // The rotation angle | |
var Tx = 0.5; // Translation distance | |
modelMatrix.setRotate(ANGLE, 0, 0, 1); // Set rotation matrix | |
modelMatrix.translate(Tx, 0, 0); // Multiply modelMatrix by the calculated translation matrix | |
// Pass the model matrix to the vertex shader | |
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix'); | |
if (!u_ModelMatrix) { | |
console.log('Failed to get the storage location of u_xformMatrix'); | |
return; | |
} | |
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); | |
// Specify the color for clearing <canvas> | |
gl.clearColor(0, 0, 0, 1); | |
// Clear <canvas> | |
gl.clear(gl.COLOR_BUFFER_BIT); | |
// Draw the rectangle | |
gl.drawArrays(gl.TRIANGLES, 0, n); | |
} | |
function initVertexBuffers(gl) { | |
var vertices = new Float32Array([ | |
0, 0.3, -0.3, -0.3, 0.3, -0.3 | |
]); | |
var n = 3; // The number of vertices | |
// Create a buffer object | |
var vertexBuffer = gl.createBuffer(); | |
if (!vertexBuffer) { | |
console.log('Failed to create the buffer object'); | |
return false; | |
} | |
// Bind the buffer object to target | |
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); | |
// Write date into the buffer object | |
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); | |
var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); | |
if (a_Position < 0) { | |
console.log('Failed to get the storage location of a_Position'); | |
return -1; | |
} | |
// Assign the buffer object to a_Position variable | |
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); | |
// Enable the assignment to a_Position variable | |
gl.enableVertexAttribArray(a_Position); | |
return n; | |
} | |
</script> | |
</head> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment