webgl作业代写/html5作业代写:本次lab属于webgl相关的作业，涉及webgl图形学相关的内容，比较典型的web图形学作业
In this lab, you’ll have the opportunity to experiment with several new WebGL and HTML5 concepts:
Extended scene definitions
Parallel and perspective projection with near/far clipping
Viewing transforms
Simplified slider callback for continuously animated scene
Key press callbacks
Per-model shader programs
Things to Notice
Run the project, and experiment with the interface. Click on the “Perspective” check box to see the difference between orthographic and perspective projection. Notice the relative sizes of the various objects in each projection. Use the FOV (field of view) slider to see the effects of a narrower or wider field of view angle, with the viewer in a constant position.
Use the “Near” and “Far” sliders to change the front and back clipping planes. See what happens when near >= far (try it in both perspective and orthographic projections).
New Features
Before starting to modify the code, take a look at the following:
Shaders – the shaders URLs are now specified in the model files. This allows using different shaders for each model (notice that the Torus model has its own shader which computes the color on the fly). The vertex shader now accepts a projection matrix and a modelview matrix.
JSONModelL5.js – now gets the names of the shaders from the JSON file. The shader names are file URLs. If you look at Torus.json, ColorCube.json, and RedSpacecraft.json, you’ll see the specification of the shaders. The Torus file has some additional fields that we’re ignoring now, but will use in future assignment.
Lab5Scene.json now includes a “camera” object which specifies the view and projection information. The items are the parameters for the lookAt and perspective or ortho functions. There’s also a “bgColor” array which specifies the background color to use.
SceneL5.js:
The ResetCamera function copies camera information from the scene definition. We keep this separate from the original JSON scene file data so that we can modify the camera parameters and then restore the original scene at any time. Notice that for an array, using the .slice() method makes a shallow copy of the array (a new array is created, but the elements are assigned from the original array; works well for primitives like numbers, not so well for arrays of objects). The ResetCamera function also sets the slider values and checkbox to the values defined in the scene JSON file.
KeyInput is called whenever the focus is on the canvas and a character key is pressed (it ignores non-character keys like arrows, but there is a way to capture those also). Right now it just logs each key pressed. You’ll need to add processing for changing the view.
The Render function now uses the scene’s current camera information to build a projection matrix and a view matrix. The view matrix is used to initialize a MatrixStack object. The projection matrix and the MatrixStack object are passed to the Render function of each object to be drawn. Notice how the transformation for each object is pushed onto the stack, and then popped off after rendering.
index.html:
Sliders: since we’re now doing animations, we don’t need events from the sliders except to update the displayed value. We just read the values every animation cycle. I’ve included a short JavaScript function called SliderUpdate in the HTML that does the displayed value update. This function is called by the slider input callback.
Non-square canvas: the canvas is deliberately not square in this lab to show how the aspect ratio figures into the projection matrix construction.
Keyboard input: we’ll be using keypress input events in this lab. Notice that the canvas tag now includes a “tabindex=1” specifier. The “tabindex” specification is necessary to get input events from the canvas. To get a keyboard event, you’ll need to click on the canvas first to give it the keyboard focus.
Tasks
After you’ve examined the code, perform the following tasks:
Modify the KeyInput function in Scene.js to look for numeric key inputs. A numeric value greater than 0 should be used to set the this.camera.lookAt field to the location of the corresponding model in the scene JSON object (this.jScene). The ‘1’ key should use the location at index [0], the ‘2’ key at location 1, etc. If the key value is greater than the length of the array, ignore it. If the key value is ‘0’, reset the lookAt position to the original camera lookAt position from the scene JSON file.
Add a slider for the camera location Z value, with range 0.0 to 4.0 and step=”0.01″. After making this change, select the “Perspective” check box, and notice the difference in effect between changing the camera Z value to make objects smaller or larger on the screen, and changing the FOV to make objects smaller or larger on the screen. Also compare the view with large camera Z value and small FOV to the orthographic projection.