Answered: Source Code: Sombrero

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

I need help getting the below WebGL program running (HTML Canvas & JavaScript). The program should display a interactive Mesh but I cannot get it working. Any help is appreciated kind stranger...and thank you in advance for your hard work and effort! Also, If its not too much to ask, can you please provide a screenshot of it working.

Source Code:

<!DOCTYPE html>

<head>

<title>Sombrero</title>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var gl = canvas.getContext('webgl');

var program = initShaders(gl, 'vertex-shader', 'fragment-shader');

gl.useProgram(program);

var colorLoc = gl.getUniformLocation(program, "color");

var nRows = 10;

var nColumns = 10;

var data = [

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],

[0, 1, 2, 2, 2, 2, 2, 2, 1, 0],

[0, 1, 2, 3, 3, 3, 3, 2, 1, 0],

[0, 1, 2, 3, 4, 4, 3, 2, 1, 0],

[0, 1, 2, 3, 3, 3, 3, 2, 1, 0],

[0, 1, 2, 2, 2, 2, 2, 2, 1, 0],

[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

];

var pointsArray = [];

for (var i = 0; i < nRows - 1; ++i) {

for (var j = 0; j < nColumns - 1; ++j) {

pointsArray.push(vec4(2 * i / nRows - 1, data[i][j], 2 * j / nColumns - 1, 1.0));

pointsArray.push(vec4(2 * (i + 1) / nRows - 1, data[i + 1][j], 2 * j / nColumns - 1, 1.0));

pointsArray.push(vec4(2 * (i + 1) / nRows - 1, data[i + 1][j + 1], 2 * (j + 1) / nColumns - 1, 1.0));

pointsArray.push(vec4(2 * i / nRows - 1, data[i][j + 1], 2 * (j + 1) / nColumns - 1, 1.0));

}

var bufferId = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);

gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);

var vPosition = gl.getAttribLocation(program, 'vPosition');

gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(vPosition);

function render() {

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.uniform4fv(colorLoc, flatten(vec4(1.0, 1.0, 1.0, 1.0)));

gl.drawArrays(gl.TRIANGLES, 0, pointsArray.length);

gl.uniform4fv(colorLoc, flatten(vec4(0.0, 0.0, 0.0, 1.0)));

gl.drawArrays(gl.LINE_LOOP, 0, pointsArray.length);

requestAnimationFrame(render);

}

render();

</script>

attribute vec4 vPosition;

varying vec4 fColor;

void main() {

gl_Position = vPosition;

fColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color

}

</script>

precision mediump float;

varying vec4 fColor;

void main() {

gl_FragColor = fColor;

}

</script>

</body>

</html>

Expert Solution

Step by step

Solved in 3 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions