I need to create HTML/javascript webGL appication that does the following: 1) Cr
ID: 3853168 • Letter: I
Question
I need to create HTML/javascript webGL appication that does the following:
1) Create a bigger canvas to allow users to create cubes and spheres from HTML UIs.
2) Use perspective view.
3) Create a white point light to the environment.
4)By default the environment should have two spheres, one is using vertex lighting shader, the other is using fragment lighting shader.
5) For the new cubes and spheres, you can choose use only one lighting shader.
6)Allow the users to determine where the new cube or sphere will be before creating
7) Any created cubes or spheres need to be randomly assigned a rotation direction x or y or z, which means they are rotating along one axis after showing on the screen.1)
Explanation / Answer
i<!document type html>
<html>
<head>
<title>webGL application</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../webgl.css" type="text/css">
<script src="../sylvester.js" type="text/javascript"></script>
<script src="../glutils.js" type="text/javascript"></script>
<script src="webgl-application.js" type="text/javascript"></script>
<!-- Fragment shader program -->
<script id="shader-fs" type="x-shader/x-fragment">
varying lowp vec4 vcolor;
void main(void)
{
gl_FragColor=vColor;
}
</script>
<!-- vertex shader program -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying lowp vec4 vColor;
void main(void)
{
gl_position=uPMatrix * vec4(aVertexPosition,1.0);
vColor=aVertexColor;
}
</script>
</head>
<body onload"start()">
<canvas id="glcanvas" width="640" height="480">
your browser doesn't appear to support the <code><</code>element.
</canvas>
</body>
</html>
-->webgl-application.js
var canvas;
var gl;
var cubeVerticesBuffer;
var cubeVerticesColorBuffer;
var sphereVerticesBuffer;
var sphereVerticesColorBuffer;
var mvMatrix;
var shaderProgram;
var vertexPositionAttribute;
var vertexColorAttribute;
var perspectiveMatrix;
//
//start
//
//called when the canvas is created to get the ball rolling.
//Figuratively, that is.There's nothing moving in this application.
//
function start()
{
canvas=document.getElementById("glcanvas");
initWebGL(canvas); //Initialize the GL context
//only continue if WebGL is available and working
if(gl) {
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthfunc(gl.LEQUAL);
//iNITAILIZE THE SHADERS;THIS IS WHERE ALL THE LIGHTING FOR THE
//VERTICES and so forth is established.
initShaders();
//heres where we call the routine that builds all the objectswe'll be drawing.
initBuffers();
//set up to draw the scene periodically.
setInterval(drawScene,15);
}
}
//
//initWebGL
//
//Initialize WebGL,returning the GL context or null if
//WebGL isn't available or could not be initialized.
//
function initWebGL() {
gl=null;
try {
gl=canvas.getContext("experimental-webgl");
}
catch(e) {
}
//If we dont have a GL context,give up now
if (!gl) {
alert("Unable to initialize WebGL.Your browser may not support it.")
}
}
//
//initBuffers
//
//Initialize the buffers we'll need.For this application,we just have
//one object -- a simple three-dimensional cube.
//
function initBuffuers() {
cubeVerticesBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesBuffer);
var vertices=[1.0,1.0,0.0,
-1.0,1.0,0.0
1.0,-1.0,0.0,
-1.0,-1.0,0.0'];
sphereVerticesBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,sphereVerticesBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices), gl.STATIC_DRAW);
var colors=[1.0,1.0,1.0,1.0,
1.0,1.0,1.0,1.0 //white
1.0,1.0,1.0,1.0,
1.0,1.0,1.0,1.0];
cubeVerticesColorBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW);
sphereVerticesColorBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,sphereVerticesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),STATIC_DRAW);
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
perspectiveMatrix=makePerspective(45,640.0/480.0,0.1,100.0);
loadIdentity();
mvTranslate([-0.0,0.0,-6.0]);
gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesBuffer);
gl.vertexAttributePointer(vertexPositionAttribute,3,gl.FLOAT,false,0,0);gl.bindBuffer(gl.ARRAY_BUFFER,cubeVerticesColorBuffer);
gl.vertexAttributePointer(vertexColorAttribute,4,gl.FLOAT,false,0,0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
}
function initShaders() {
var fragmentShader=getShader(gl,"shader-fs");
var vertexShader=getShader(gl,"shader-vs");
shaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertexShader);
gl.attachShader(shaderProgram,fragmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)) {
alert("UNABLE TO INITIALIZE THE SHADER PROGRAM");
}
gl.useProgram(shaderProgram);
vertexPosotionAttribute=gl.getAttributeLocation(shaderProgram,"aVertexPosition");
gl.enablevertexattributearray(vertexpositionattribute);
getshader
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.