代写范文

留学资讯

写作技巧

论文代写专题

服务承诺

资金托管
原创保证
实力保障
24小时客服
使命必达

51Due提供Essay,Paper,Report,Assignment等学科作业的代写与辅导,同时涵盖Personal Statement,转学申请等留学文书代写。

51Due将让你达成学业目标
51Due将让你达成学业目标
51Due将让你达成学业目标
51Due将让你达成学业目标

私人订制你的未来职场 世界名企,高端行业岗位等 在新的起点上实现更高水平的发展

积累工作经验
多元化文化交流
专业实操技能
建立人际资源圈

Assignment代写:WebGL and HTML5 Lab

2018-04-03 来源: 51due教员组 类别: 更多范文

下面为大家整理一篇优秀的assignment代写范文- WebGL and HTML5 Lab,供大家参考学习,这次lab属于webgl相关的作业,涉及webgl图形学相关的内容,比较典型的web图形学作业。

WebGL,Lab,assignment代写,cs代写,作业代写

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.

51due留学教育原创版权郑重声明:原创assignment代写范文源自编辑创作,未经官方许可,网站谢绝转载。对于侵权行为,未经同意的情况下,51Due有权追究法律责任。主要业务有assignment代写、essay代写、paper代写、cs代写服务。

51due为留学生提供最好的assignment代写服务,亲们可以进入主页了解和获取更多assignment代写范文 提供作业代写服务,详情可以咨询我们的客服QQ:800020041。

上一篇:Assignment代写:Spatial Data Mana 下一篇:Assignment代写:MIPS & Broken SPI