Using this code as baseline Kicking the Soccer Ball body background color EEEEEE label white space pre margin left 25px attribute vec3 a coords attribute vec3 a normal uniform mat4 modelview uniform mat4 projection varying vec3 v normal varying vec3 v eyeCoords void main() vec4 coords vec4(a coords,1 0) vec4 eyeCoords modelview coords gl Position projection eyeCoords v normal normalize(a normal) v eyeCoords eyeCoords xyz eyeCoords w ifdef GL FRAGMENT PRECISION HIGH precision highp float else precision mediump float endif struct MaterialProperties vec4 diffuseColor vec3 specularColor vec3 emissiveColor float specularExponent struct LightProperties bool enabled vec4 position vec3 color uniform MaterialProperties material do two sided lighting, but assume front and back materials are the same uniform LightProperties lights 4 uniform mat3 normalMatrix varying vec3 v normal varying vec3 v eyeCoords vec3 lightingEquation( LightProperties light, MaterialProperties material, vec3 eyeCoords, vec3 N, vec3 V ) N is normal vector, V is direction to viewer vec3 L, R Light direction and reflected light direction if ( light position w 0 0 ) L normalize( light position xyz ) else L normalize( light position xyz light position w v eyeCoords ) if (dot(L,N) 0 0) float factor pow(dot(R,V),material specularExponent) reflection factor material specularColor light color return reflection void main() vec3 normal normalize( normalMatrix v normal ) vec3 viewDirection normalize( v eyeCoords) (Assumes a perspective projection ) vec3 color material emissiveColor for (int i 0 i 4 i ) if (lights i enabled) if (gl FrontFacing) color lightingEquation( lights i , material, v eyeCoords, normal, viewDirection) else color lightingEquation( lights i , material, v eyeCoords, normal, viewDirection) gl FragColor vec4(color,material diffuseColor a) use strict var gl The webgl context var xval 0 7 var yval 2 1 var kval 90 Kick leg start var a coords loc Location of the a coords attribute variable in the shader program var a normal loc Location of a normal attribute var a texCoords loc var texture var u modelview Locations for uniform matrices var u projection var u normalMatrix var u material An object tolds uniform locations for the material var u lights An array of objects that holds uniform locations for light properties var projection mat4 create() projection matrix var modelview modelview matrix value comes from rotator var normalMatrix mat3 create() matrix, derived from modelview matrix, for transforming normal vectors var rotator A TrackballRotator to implement rotation by mouse var frameNumber 0 frame number during animation (actually only goes up by 0 5 per frame) var torus, sphere, cone, cylinder, disk, ring, cube basic objects, created using function createModel var matrixStack A stack of matrices for implementing hierarchical graphics var currentColor 1,1,1,1 The current diffuseColor render() functions in the basic objects set the diffuse color to currentColor when it is called before drawing the object Other color properties, which don't change often are handled elsewhere Draws the image, which consists of either the world or a closeup of the car function draw() gl clearColor(0,0,0,1) gl clear(gl COLOR BUFFER BIT gl DEPTH BUFFER BIT) mat4 perspective(projection, Math PI 4, 1, 1, 50) gl uniformMatrix4fv(u projection, false, projection ) modelview rotator getViewMatrix() lights() boxman() function lights() Three of four lights used, all enabled Use lights to enhance models looks gl uniform1i( u lights 0 enabled, 1 ) Looking down z gl uniform4f( u lights 0 position, 0,0,1,0 ) gl uniform3f( u lights 0 color, 1 0,1 0,1 0 ) gl uniform1i( u lights 1 enabled, 1 ) Looking down X gl uniform4f( u lights 1 position, 1,0,0,0 ) gl uniform3f( u lights 1 color, 0 0,1 0,0 0 ) gl uniform1i( u lights 2 enabled, 1 ) Looking down Y gl uniform4f( u lights 2 position, 0,1,0,0 ) gl uniform3f( u lights 2 color, 1 0,0 0,1 0 ) currentColor 0 3, 0 3, 0 3, 1 pushMatrix() mat4 translate(modelview,modelview, xval,yval,1 ) mat4 scale(modelview,modelview, 0 4,0 4,0 4 ) gl uniform3f( u material emissiveColor, 0 7, 0 7, 0 ) SHow the soccer ball sphere render() Modifying this material will change the Boxman look gl uniform3f( u material emissiveColor, 0, 0, 0 ) popMatrix() Draws a boxman figure using transformation from cubes and cylinders Note for every push their should be a pop This resets the transformations function boxman() pushMatrix() mat4 translate(modelview,modelview, 1,3,0 ) mat4 rotate(modelview,modelview,(90) 180 Math PI, 1,0,0 ) currentColor 0 9,0 4,0 1,1 cube render() popMatrix() Neck pushMatrix() mat4 translate(modelview,modelview, 1,2 9,0 ) mat4 rotate(modelview,modelview,(90) 180 Math PI, 1,0,0 ) mat4 scale(modelview,modelview, 0 5,0 7,0 5 ) currentColor 0 9,0 4,0 1,1 cylinder render() popMatrix() Body pushMatrix() mat4 translate(modelview,modelview, 1,1 0,0 ) mat4 rotate(modelview,modelview,(90) 180 Math PI, 1,0,0 ) mat4 scale(modelview,modelview, 1 5,1 5,1 5 ) currentColor 0 9,0 0,0 1,1 cube render() popMatrix() Arms pushMatrix() mat4 translate(modelview,modelview, 2 0,1 0,0 ) mat4 rotate(modelview,modelview,(90) 180 Math PI, 0,1,0 ) mat4 scale(modelview,modelview, 1 0, 6,1 4 ) currentColor 0 9,1 0,0 1,1 cylinder render() popMatrix() pushMatrix() mat4 translate(modelview,modelview, 4 3,1 0,0 ) mat4 rotate(modelview,modelview,(90) 180 Math PI, 0,1,0 ) mat4 scale(modelview,modelview, 1 0, 6,1 4 ) currentColor 0 9,1 0,0 1,1 cylinder render() popMatrix() Legs pushMatrix() mat4 translate(modelview,modelview, 1 3,3 1,0 ) mat4 rotate(modelview,modelview,(90) 180 Math PI, 1,0,0 ) mat4 scale(modelview,modelview, 0 6,0 6,3 0 ) currentColor 0 0,1 0,0 1,1 cylinder render() popMatrix() mat4 translate(modelview,modelview, 0 5,3 1,0 ) Kval provides for rotating about x axis providing a foot kicking simulation mat4 rotate(modelview,modelview,(kval) 180 Math PI, 1,0,0 ) mat4 scale(modelview,modelview, 0 6,0 6,3 0 ) currentColor 0 0,1 0,0 1,1 cylinder render() popMatrix() Push a copy of the current modelview matrix onto the matrix stack function pushMatrix() matrixStack push( mat4 clone(modelview) ) Restore the modelview matrix to a value popped from the matrix stack function popMatrix() modelview matrixStack pop() Create one of the basic objects The modelData holds the data for an IFS using the structure from basic objects IFS js This function creates VBOs to hold the coordinates, normal vectors, and indices from the IFS, and it loads the data into those buffers The function creates a new object whose properties are the identifies of the VBOs The new object also has a function, render(), that can be called to render the object, using all the data from the buffers That object is returned as the value of the function (The second parameter, xtraTranslate, is there because this program was ported from a Java version where cylinders were created in a different position, with the base on the xy plane instead of with their center at the origin The xtraTranslate parameter is a 3 vector that is applied as a translation to the rendered object It is used to move the cylinders into the position expected by the code that was ported from Java ) function createModel(modelData, xtraTranslate) var model model coordsBuffer gl createBuffer() model normalBuffer gl createBuffer() model indexBuffer gl createBuffer() model count modelData indices length if (xtraTranslate) model xtraTranslate xtraTranslate else model xtraTranslate null gl bindBuffer(gl ARRAY BUFFER, model coordsBuffer) gl bufferData(gl ARRAY BUFFER, modelData vertexPositions, gl STATIC DRAW) gl bindBuffer(gl ARRAY BUFFER, model normalBuffer) gl bufferData(gl ARRAY BUFFER, modelData vertexNormals, gl STATIC DRAW) gl bindBuffer(gl ELEMENT ARRAY BUFFER, model indexBuffer) gl bufferData(gl ELEMENT ARRAY BUFFER, modelData indices, gl STATIC DRAW) model render function() This function will render the object Since the buffer from which we are taking the coordinates and normals change each time an object is drawn, we have to use gl vertexAttribPointer to specify the location of the data And to do that, we must first bind the buffer that contains the data Similarly, we have to bind this object's index buffer before calling gl drawElements gl bindBuffer(gl ARRAY BUFFER, this coordsBuffer) gl vertexAttribPointer(a coords loc, 3, gl FLOAT, false, 0, 0) gl bindBuffer(gl ARRAY BUFFER, this normalBuffer) gl vertexAttribPointer(a normal loc, 3, gl FLOAT, false, 0, 0) gl uniform4fv(u material diffuseColor, currentColor) if (this xtraTranslate) pushMatrix() mat4 translate(modelview,modelview,this xtraTranslate) gl uniformMatrix4fv(u modelview, false, modelview ) mat3 normalFromMat4(normalMatrix, modelview) gl uniformMatrix3fv(u normalMatrix, false, normalMatrix) gl bindBuffer(gl ELEMENT ARRAY BUFFER, this indexBuffer) gl drawElements(gl TRIANGLES, this count, gl UNSIGNED SHORT, 0) if (this xtraTranslate) popMatrix() return model Creates a program for use in the WebGL context gl, and returns the identifier for that program If an error occurs while compiling or linking the program, an exception of type String is thrown The error string contains the compilation or linking error If no error occurs, the program identifier is the return value of the function The second and third parameters are the id attributes for elementst that contain the source code for the vertex and fragment shaders function createProgram(gl, vertexShaderID, fragmentShaderID) function getTextContent( elementID ) This nested function retrieves the text content of an element on the web page It is used here to get the shader source code from the script elements that contain it var element document getElementById(elementID) var node element firstChild var str while (node) if (node nodeType 3) this is a text node str node textContent node node nextSibling return str try var vertexShaderSource getTextContent( vertexShaderID ) var fragmentShaderSource getTextContent( fragmentShaderID ) catch (e) throw Error Could not get shader source code from script elements var vsh gl createShader( gl VERTEX SHADER ) gl shaderSource(vsh,vertexShaderSource) gl compileShader(vsh) if ( gl getShaderParameter(vsh, gl COMPILE STATUS) ) throw Error in vertex shader gl getShaderInfoLog(vsh) var fsh gl createShader( gl FRAGMENT SHADER ) gl shaderSource(fsh, fragmentShaderSource) gl compileShader(fsh) if ( gl getShaderParameter(fsh, gl COMPILE STATUS) ) throw Error in fragment shader gl getShaderInfoLog(fsh) var prog gl createProgram() gl attachShader(prog,vsh) gl attachShader(prog, fsh) gl linkProgram(prog) if ( gl getProgramParameter( prog, gl LINK STATUS) ) throw Link error in program gl getProgramInfoLog(prog) return prog Initialize the WebGL context Called from init() function initGL() var prog createProgram(gl, vshader source , fshader source ) gl useProgram(prog) gl enable(gl DEPTH TEST) Get attribute and uniform locations a coords loc gl getAttribLocation(prog, a coords ) a normal loc gl getAttribLocation(prog, a normal ) gl enableVertexAttribArray(a coords loc) gl enableVertexAttribArray(a normal loc) u modelview gl getUniformLocation(prog, modelview ) u projection gl getUniformLocation(prog, projection ) u normalMatrix gl getUniformLocation(prog, normalMatrix ) u material diffuseColor gl getUniformLocation(prog, material diffuseColor ), specularColor gl getUniformLocation(prog, material specularColor ), emissiveColor gl getUniformLocation(prog, material emissiveColor ), specularExponent gl getUniformLocation(prog, material specularExponent ) u lights new Array(4) for (var i 0 i 4 i ) u lights i enabled gl getUniformLocation(prog, lights i enabled ), position gl getUniformLocation(prog, lights i position ), color gl getUniformLocation(prog, lights i color ) gl uniform3f( u material specularColor, 0 1, 0 1, 0 1 ) specular properties don't change gl uniform1f( u material specularExponent, 16 ) gl uniform3f( u material emissiveColor, 0, 0, 0) default, will be changed temporarily for some objects for (var i 1 i 4 i ) set defaults for lights gl uniform1i( u lights i enabled, 0 ) gl uniform4f( u lights i position, 0, 0, 1, 0 ) gl uniform3f( u lights i color, 1,1,1 ) Lights are set on in the draw() method end initGL() animation framework var animating false This is where you control the animation by changing positions, and rotations values as needed Trial and error works on the numbers Graph paper design is more efficient function frame() if (animating) frameNumber 1 Positions of the soccer ball xval 0 01 yval 0 01 Rotation of kick leg Not perfect by anymeans but Okay for at least one viewing angle kval 1 if (xval 8 5 yval 8 5) xval 0 7 yval 2 1 kval 90 if (kval 45) kval 45 Don't overextend the soccer all draw() requestAnimationFrame(frame) function setAnimating(run) if (run animating) animating run if (animating) requestAnimationFrame(frame) initialization function that will be called when the page has loaded function init() try var canvas document getElementById( webglcanvas ) gl canvas getContext( webgl ) canvas getContext( experimental webgl ) if ( gl ) throw Browser does not support WebGL catch (e) document getElementById( message ) innerHTML Sorry, could not get a WebGL graphics context return try initGL() initialize the WebGL graphics context catch (e) document getElementById( message ) innerHTML Sorry, could not initialize the WebGL graphics context e return document getElementById( animCheck ) checked false document getElementById( reset ) onclick function() rotator setView(17, 0,1,2 ) frameNumber 0 Initialize soccer ball positions xval 0 7 yval 2 1 animating false document getElementById( animCheck ) checked false draw() Not really using all of these As you create your scene use these or create from primitives torus createModel(uvTorus(0 5,1,16,8)) Create all the basic objects sphere createModel(uvSphere(1)) cone createModel(uvCone(), 0,0, 5 ) cylinder createModel(uvCylinder(), 0,0,1 5 ) disk createModel(uvCylinder(5 5,0 5,64), 0,0, 25 ) ring createModel(ring(3 3,4 8,40)) cube createModel(cube()) This controls the zoom and initial placement rotator new TrackballRotator(canvas,function() if ( animating) draw() ,17, 0,1,2 ) draw() Kicking the soccer Ball This page requires Javascript and a web browser that supports WebGL Drag your mouse on the model to rotate it Make sure to try the animation, and let it run long enough to see the nighttime view Kick Ball Reset create a unique 3D animated scene composed of WebGL graphic components The scene should include animation, lighting, textures, frame buffers and multiple objects Requirements 1 Using WebGL create a unique 3D animated scene The scene has the following specifications a Size minimum 640x480 b Includes at least 10 different objects c Uses multiple lighting effects on different materials d Uses multiple textures e Includes radio buttons, slider bars or other widgets to turn on or off certain components of the animation f Uses frame buffers to organize the memory resources that are needed to render the scene 2 Use WebGL

The Answer is in the image, click to view ...

Question: Using this code as baseline Kicking the Soccer Ball body { background-color: #EEEEEE; } label { white-space: pre; margin-left: 25px; } attribute vec3 a_coords; attribute

Using this code as baseline

Kicking the Soccer Ball

Kicking the soccer Ball

Drag your mouse on the model to rotate it. Make sure to try the animation, and let it run long enough to see the nighttime view!

Kick Ball

create a unique 3D animated scene composed of WebGL graphic components. The scene should include animation, lighting, textures, frame buffers and multiple objects. Requirements: 1. Using WebGL create a unique 3D animated scene. The scene has the following specifications: a. Size: minimum 640x480 b. Includes at least 10 different objects. c. Uses multiple lighting effects on different materials d. Uses multiple textures e. Includes radio buttons, slider bars or other widgets to turn on or off certain components of the animation. f. Uses frame buffers to organize the memory resources that are needed to render the scene. 2. Use WebGL

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock blur-text-image

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!

Scenario Using the right project management tools and methodologies will help ensure a project's success. You have decided to review your organization's current project management tools and...

Python coding question An exercise in straight-line fitting Hote. You will need to have read the lectures and or watched the converting video to attempt this cuestion. There is no introductory...

give feedback on this paper on its writing/spelling grammar/study design/formatting/readability/ etc Study 2: Inclusive Culture Reduces Dominance And Increases Relational Leadership in Coded Speech...

Cooldown You may remember that there are infinitely many solutions to so-called indefinite integrals (integrals without limits of integration). For example, x dx = x2/2+c, Jade = where c is an...

Going viral A new semester is starting, and, feeling a sense of renewal, you log into your TikTok app to create some Day 1 content for your followers. Whatever you do, it works, and your content gets...

HEY PLEASE ANYONE PLEASE SOLVE ALL THESE QUESTIONS PLEASE. I NEED IT URGENTLY. PLEASE SOLVE ALL QUESTIONS. (70)2. Artie Siegel, an MBA student, has been having problems balancing his checkbook. His...

Describe CAT's mission and code of conduct have guided or failed to guide its actions and connect their actions to theoretical and empirical research. Analyze and evaluate ethical issues CAT faces...

Daniels Fund Ethics Initiative University of New Mexico http://danielsethics.mgt.unm.edu Caterpillar, Inc. Encounters Challenges to Its Ethical Reputation INTRODUCTION Caterpillar, Inc. (CAT) is a...

Describe CAT's mission and code of conduct have guided or failed to guide its actions and connect their actions to theoretical and empirical research. Goals This criterion is linked to a Learning...

################################################################################################ #Box plot code...

William and Charles were business partners. They signed a contract which stated that William would be the publisher of all the books written by Charles, and Charles could get 10% of the listed price...

The source, "Jacob Riis, How the Other Half Lives (1890)" and the photographs taken by Riis, answer the following questions: 1- Examine and present information about two of the photographs. Give the...

Assume that the price per common share for Payne Company is $15. Required: Compute the price-earnings ratio.

Problem 1 A company currently pays a dividend of $15, which is expected to grow' indefinitely at 8%. The current share value of this firm based on the constant-growth dividend discount model is $120....

In the Hewlett-Packard research, discuss what options the company has if it moves away from the performance pay scheme it has previously operated.

Look up the article that is the basis for focus on research 6.1. Why do you think that some of the respondents consider that their reward strategy does not operate in practice?

In case study 6.2, what would happen if business turned down and the company made little or no gains over a pay period?