Html5/WebGl代写:这是相对高级的webGl作业代写，涉及了典型的Web图形处理等问题
WebGl design
In this assignment, you will write a simple drawing program, based on the Lab 2 code. You may use the Lab2Template.zipView in a new window code, any code you wrote for Lab 2, and any code from the posted solution (to be provided next week). Your program should display a drawing canvas with associated sliders and buttons. Drawing will be performed by mouse clicks in the window.
The assignment is divided into a base program (worth 60% of the total for the assignment), and two features, each worth an additional 20% of the total.
Base Program
The base program should allow a user to draw filled rectangles. It should have sliders labeled “Red”, “Green”, “Blue” with values displayed (as in the lab), additional color buttons, and a button labeled “Reset”.
The user will click in the drawing area to specify two diagonally opposite vertices of a rectangle. After every second click, the positions of the clicks should be used to add a rectangle to the drawing area. The drawing area should display all rectangles drawn so far. The color sliders should select the color for the next vertex.
So for example, selecting a first color using the sliders, defining a vertex, then selecting a second color and defining another vertex, should result in drawing a rectangle with the two different vertex colors smoothly interpolated across the interior. The two additional vertices that you generate for the rectangle should have as their color the average of the two vertex colors. Clicking the “Reset” button should delete all rectangles, reset all sliders to their original values, and start over.
In addition to the sliders, also define a set of buttons which will set the sliders to predefined colors: White (1.0, 1.0, 1.0), Black (0.0, 0.0, 0.0), Red (1.0, 0.0, 0.0), Yellow (1.0, 1.0, 0.0), Green (0.0, 1.0, 0.0), Cyan (0.0, 1.0, 1.0), Blue (0.0, 0.0, 1.0), and Magenta (1.0, 0.0, 1.0). You may add buttons for any additional colors that you like.
Feature 1 – Showing Interaction
Modify the base program by adding code to start drawing a moving “rubber band” rectangle outline when the first vertex of a rectangle is clicked, using the first vertex and the current mouse position as the rectangle opposite corners. After the second vertex is clicked, remove the rubber band lines and add the rectangle to the screen as in the base program.
Hint: use two sets of buffers, one set for the completed rectangles, and another set for the point and lines of the rubber band rectangle. Use gl.bindBuffer to switch which buffers are currently used. Use gl.drawBuffers separately for each set of buffers when redrawing. See the code in ArraySwitchDemo.zipView in a new window for an example of how to handle multiple buffers. You may use code from this demo.
Feature 2 – Sending Uniform Data to a Shader
Add an Alpha (opacity) slider to the program, underneath the Red, Green, and Blue sliders. Use a WebGL “uniform” value to pass an alpha value to the vertex shader (alpha, also known as opacity, is the fourth parameter for specifying a color). The vertex shader should assign this opacity value to rectangle vertices along with the RGB values. An alpha value of 1.0 is completely opaque, an alpha value of 0.0 is completely transparent.
Note: by default, transparency is not enabled in WebGL. Add these two calls during initialization to enable it:
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
Graduate Credit Feature 3 – Multiple Primitives
This feature is required for those taking the course for graduate credit; it is optional for those taking the course for undergraduate credit.
In addition to filled rectangles, also allow the user to draw filled triangles by clicking the three corners. Implement the rubber-band interactions features for triangles as well as rectangles. The rubber band should be a line after the first vertex is clicked, and a triangle outline after the second vertex is clicked. The user should have buttons to select “Triangle” or “Rectangle”, and your program should be capable of displaying both on the screen at the same time.