maurol22

WebGL Example

Sep 23rd, 2020
898
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Step1: Prepare the canvas and get WebGL context */
  2.  
  3. var canvas = document.getElementById('my_Canvas');
  4. var gl = canvas.getContext('experimental-webgl');
  5.  
  6.  
  7. /* Step2: Define the geometry and store it in buffer objects */
  8.  
  9. var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];
  10. // Create a new buffer object
  11. var vertex_buffer = gl.createBuffer();
  12. // Bind an empty array buffer to it
  13. gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  14. // Pass the vertices data to the buffer
  15. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  16. // Unbind the buffer
  17. gl.bindBuffer(gl.ARRAY_BUFFER, null);
  18.  
  19.  
  20. /* Step3: Create and compile Shader programs */
  21.  
  22. // Vertex shader source code
  23. var vertCode =
  24.     'attribute vec2 coordinates;' +
  25.     'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';
  26. //Create a vertex shader object
  27. var vertShader = gl.createShader(gl.VERTEX_SHADER);
  28. //Attach vertex shader source code
  29. gl.shaderSource(vertShader, vertCode);
  30. //Compile the vertex shader
  31. gl.compileShader(vertShader);
  32.  
  33. //Fragment shader source code
  34. var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';
  35. // Create fragment shader object
  36. var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  37. // Attach fragment shader source code
  38. gl.shaderSource(fragShader, fragCode);
  39. // Compile the fragment shader
  40. gl.compileShader(fragShader);
  41.  
  42. // Create a shader program object to store combined shader program
  43. var shaderProgram = gl.createProgram();
  44. // Attach a vertex shader
  45. gl.attachShader(shaderProgram, vertShader);
  46. // Attach a fragment shader
  47. gl.attachShader(shaderProgram, fragShader);
  48. // Link both programs
  49. gl.linkProgram(shaderProgram);
  50. // Use the combined shader program object
  51. gl.useProgram(shaderProgram);
  52.  
  53.  
  54. /* Step 4: Associate the shader programs to buffer objects */
  55.  
  56. //Bind vertex buffer object
  57. gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  58. //Get the attribute location
  59. var coord = gl.getAttribLocation(shaderProgram, "coordinates");
  60. //point an attribute to the currently bound VBO
  61. gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
  62. //Enable the attribute
  63. gl.enableVertexAttribArray(coord);
  64.  
  65.  
  66. /* Step5: Drawing the required object (triangle) */
  67.  
  68. // Clear the canvas
  69. gl.clearColor(0.5, 0.5, 0.5, 0.9);
  70. // Enable the depth test
  71. gl.enable(gl.DEPTH_TEST);
  72. // Clear the color buffer bit
  73. gl.clear(gl.COLOR_BUFFER_BIT);
  74. // Set the view port
  75. gl.viewport(0, 0, canvas.width, canvas.height);
  76. // Draw the triangle
  77. gl.drawArrays(gl.TRIANGLES, 0, 3);
  78.  
RAW Paste Data