Question
**THIS IS IN JAVA SCRIPT** lab3.js // ------------------------------------------------------------ // WebGL Lab 3 - Template // ------------------------------------------------------------ var VSHADER = ` attribute vec2 a_Position; void main()
**THIS IS IN JAVA SCRIPT**
lab3.js
// ------------------------------------------------------------ // WebGL Lab 3 - Template // ------------------------------------------------------------
var VSHADER = ` attribute vec2 a_Position; void main() { gl_Position = vec4(a_Position, 0.0, 1.0); gl_PointSize = 4.0; } `
var FSHADER = ` void main() { gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); } ` // global context object to store everything. let context = { };
/* render function - currently called on every mouse click */ function render(context) {
let gl = context.gl; // shortcut
// set clear color and clear frame buffer gl.clearColor(0.9,0.9,1.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT);
// set attribute variable gl.vertexAttrib2f(gl.a_Position, context.mouse.x, context.mouse.y);
// issue drawing gl.drawArrays(gl.POINTS, 0, 1); }
/* mouse handler function - gets mouse coordinates in browser client area coordinates - handler transforms from client area coordinates to WebGL normalized device coordinates */ function handle_mouse(ev, canvas, context) { let rect = ev.target.getBoundingClientRect(); let mx = ev.clientX; // x mouse let my = ev.clientY; // y mouse let cx = rect.left; // canvas position x let cy = rect.top; // canvas position y let wx = canvas.width; // canvas width x let wy = canvas.height; // canvas width y
// transform in matrix-vector notation // // 1 0 2/w_x 0 m_x - c_x - 1.0 // 0 -1 ( 0 2/w_y m_y - c_y + - 1.0 ) // let x_premul = 2.0 / wx; let y_premul = -2.0 / wy; let screen_x = x_premul*(mx-cx) - 1.0; let screen_y = y_premul*(my-cy) + 1.0;
context.mouse = { x : screen_x, y : screen_y }; render(context); }
/* initialization function - gets WebGL context from canvas object - initializes shaders via external library function - gets attribute location - stores WebGL context and additional information in global context object - registers mouse handler - clears framebuffer */ function canvas_init3D() { let canvas = document.querySelector("#canvas_gl"); let gl = canvas.getContext("webgl"); if (!gl) { console.log("Failed to get rendering context for WebGL"); return; } if (!initShaders(gl, VSHADER, FSHADER)) { console.log("Failed to initialize shaders."); return; }
var a_Position = gl.getAttribLocation(gl.program, "a_Position"); if (a_Position
// store information in context context.gl = gl; context.a_Position = a_Position;
// register mouse listener using anonymous function canvas.onmousedown = function(ev) { handle_mouse(ev, canvas, context); };
gl.clearColor(0.9,0.9,1.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); }
function main() { console.log("WebGL - Lab3"); canvas_init3D(); }
lab3.html
WebGL Lab 3 Vertex Buffer Objects So far, we transfer our vertex position data for each vertex to WebGL. Ver- tex buffer objects are a means to transfer data for many vertices in one call. On the JS side, we need to store our vertex data in an object of type Float32Array. (i) let vertices = new Float32Array([...]) The WebGL API calls that are need to create a buffer object and transfer data are: (ii) let buffer = createBuffer() (iii) bindBuffer(g1.ARRAY_BUFFER, buffer) (iv) bufferData(gl. ARRAY_BUFFER, vertices, g1.STATIC_DRAW) Now that WebGL has the data, we can point our attribute variable to it, enable the mechanism to assign values from the buffer, and finally draw. Location is the storage location (or handle) of the attribute variable. (v) vertexAttribPointer(location, size, gl.FLOAT, false, stride, offset) (vi) enableVertexAttribArray(location) (vii) drawArrays (mode, first, count) Task Write a WebGL application that demonstrates the usage of vertex buffer objects. The application should draw LINES or TRIANGLES depending on mouse click positions. WebGL Lab 3 Vertex Buffer Objects So far, we transfer our vertex position data for each vertex to WebGL. Ver- tex buffer objects are a means to transfer data for many vertices in one call. On the JS side, we need to store our vertex data in an object of type Float32Array. (i) let vertices = new Float32Array([...]) The WebGL API calls that are need to create a buffer object and transfer data are: (ii) let buffer = createBuffer() (iii) bindBuffer(g1.ARRAY_BUFFER, buffer) (iv) bufferData(gl. ARRAY_BUFFER, vertices, g1.STATIC_DRAW) Now that WebGL has the data, we can point our attribute variable to it, enable the mechanism to assign values from the buffer, and finally draw. Location is the storage location (or handle) of the attribute variable. (v) vertexAttribPointer(location, size, gl.FLOAT, false, stride, offset) (vi) enableVertexAttribArray(location) (vii) drawArrays (mode, first, count) Task Write a WebGL application that demonstrates the usage of vertex buffer objects. The application should draw LINES or TRIANGLES depending on mouse click positions
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started