Created
November 5, 2020 19:21
-
-
Save MinaGabriel/1f3ec39b887915880894606368109ee0 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
<html lang="en"><head> | |
<meta charset="utf-8"> | |
<title>Translate a Triangle</title> | |
</head><body onload="main()"> | |
<canvas id="webgl" width="800" height="800"> | |
Please use a browser that supports "canvas" | |
</canvas> | |
<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"> | |
// MultiAttributeSize_Interleaved.js (c) 2012 matsuda | |
// Vertex shader program | |
var VSHADER_SOURCE = | |
'attribute vec4 a_Position;\n' + | |
'attribute float a_PointSize;\n' + | |
'void main() {\n' + | |
' gl_Position = a_Position;\n' + | |
' gl_PointSize = a_PointSize;\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; | |
} | |
// Set vertex coordinates and point sizes | |
var n = initVertexBuffers(gl); | |
if (n < 0) { | |
console.log('Failed to set the vertex information'); | |
return; | |
} | |
// Specify the color for clearing <canvas> | |
gl.clearColor(0.0, 0.0, 0.0, 1.0); | |
// Clear <canvas> | |
gl.clear(gl.COLOR_BUFFER_BIT); | |
// Draw three points | |
gl.drawArrays(gl.POINTS, 0, n); | |
} | |
function initVertexBuffers(gl) { | |
var verticesSizes = new Float32Array([ | |
// Coordinate and size of points | |
0.0, 0.5, 10.0, // the 1st point | |
-0.5, -0.5, 20.0, // the 2nd point | |
0.5, -0.5, 30.0 // the 3rd point | |
]); | |
var n = 3; // The number of vertices | |
// Create a buffer object | |
var vertexSizeBuffer = gl.createBuffer(); | |
if (!vertexSizeBuffer) { | |
console.log('Failed to create the buffer object'); | |
return -1; | |
} | |
// Bind the buffer object to target | |
gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer); | |
gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW); | |
var FSIZE = verticesSizes.BYTES_PER_ELEMENT; | |
console.log(FSIZE) | |
//Get the storage location of a_Position, assign and enable buffer | |
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; | |
} | |
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0); | |
gl.enableVertexAttribArray(a_Position); // Enable the assignment of the buffer object | |
// Get the storage location of a_PointSize | |
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize'); | |
if(a_PointSize < 0) { | |
console.log('Failed to get the storage location of a_PointSize'); | |
return -1; | |
} | |
gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2); | |
gl.enableVertexAttribArray(a_PointSize); // Enable buffer allocation | |
// Unbind the buffer object | |
gl.bindBuffer(gl.ARRAY_BUFFER, null); | |
return n; | |
} | |
</script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment