Project 3 – 3D RenderingOverviewFor this project, you are going to create, load and render some basic 3D models. In addition, you willcreate a simple orbit camera to help navigate a 3D scene.DescriptionIn the end, your program will look something like the following:SetupWhen rendering in 3D, you have to change the size() function that you use to start up a Processingapplication, by adding P3D as a third parameter:size(1600, 1000, P3D);Perhaps the most important aspect of any 3D environment is the camera; without one (even a simpleone), you can’t see anything.Camera ClassThe camera affects how the user views the information, and the implementation details of a camerasystem can make or break an application. In this assignment your camera is going to be a simple orbitcamera which rotates around, and looks at, a specific point (an x, y, z location). This will beaccomplished by using spherical coordinates, which is very similar to the concept of polar coordinates,just with an additional component to calculate.Whether we’re talking about Processing, DirectX, or any other rendering system, you will need two mainpieces of information for a camera. A projection matrix, and a view matrix. Most graphics APIs havefunctions to allow the programmer to easily create these, and Processing is no different.2Projection MatrixThe projection matrix can be created (and set for you, behind the scenes), by calling this function:perspective(radians(50.0f), width/(float)height, 0.1, 1000);Details about the parameters of this function can be found here:https://processing.org/reference/perspective_.htmlThis function only needs to be called once, unless you want or need to change some of the values. Thefirst value is typically the one that would change—a smaller angle is a narrower field of view, which cansimulate zooming in on a target. 50 might be a “normal” field of view, while 10 would be zoomed in, and90 would be much wider.The second function, one that you will typically call every frame (unless you have a fixed camera thatnever needs to change position or look at something else):camera(positionX, positionY, positionZ, // Where is the camera?target.x, target.y, target.z, // Where is the camera looking?0, 1, 0); // Camera Up vector (0, 1, 0 often, but not always, works)In this assignment you are going to create a class for the camera functionality. There are existing cameralibraries available for use in Processing; YOU MAY NOT use them for this assignment. Your class shouldcontain the following functions:Update() - Called every frame from within the main draw() function, calculates values to pass to thecamera() functionAddLookAtTarget(PVector) - Add a target to the list of positions to cycle throughCycleTarget() - Move to the next target in the listZoom(float) – Move toward or away from the look at targetx, y, zSphericalCoordinatesHow to calculate XYZ:x = R*cos(?) * sin(?)y = R * cos(?)z = R * sin(?) * sin(?) - polar angle (theta) – azimuth angle (phi)3Theta – has a range of 0 to 180 degrees (or 0 to π radians). If the angle is 0, that refers to straight up,along the Y axis. If the angle is 90 degrees, or π/2 radians, the vector would lie flat along the X/Z plane,and if the angle were 180 degrees, the final point would lie somewhere on the -Y axis.Phi – has a range of 0-360 degrees (or 0 to 2π radians)The radius in this application, will be the camera’s offset from the target. For this application the rangeis 30 to 200, but your own program could use any value you like. (Though generally you wouldn’t wantto have a negative radius as some of the controls would then feel inverted.)A basic implementation of getting the angles would be to use the map() function for the mouse X and YpositionsInitialize Variable Range Map to…mouseX 0 -> width-1 Phi, 0 to 360mouseY 0 -> height - 1 Theta, 1 to 179(Why not 0-180? Short answer: Cameras canbreak in a variety of ways, one of which islooking directly along an “up” vector. Oftenthis is avoided by limiting the camera to 1degree shy of that direction)The X, Y, and Z positions are relative to wherever the sphere is centered—in this assignment, that willthe “look at” target. So the final position of the camera will be:cameraPosition.x = lookatTarget.x + derivedX;cameraPosition.y = lookatTarget.y + derivedY;cameraPosition.z = lookatTarget.z + derivedZ;Camera UsageThe intended use of the camera class would be to create an instance, add look at targets in the setupfunction, and then call Update() every frame in the draw function to calculate the proper locationCycling Through TargetsIn Processing, an easy way to handle input is with the keyPressed() function. This function gets calledwhen ANY key is pressed, and then you can check a variable called keyCode to see what the specific keyhappened to be. For this assignment, any time the SPACE key is pressed, you can call the CycleTarget()function of your camera to switch to the next target.https://processing.org/reference/keyPressed_.htmlMoving Toward/Away From the TargetIn addition to the keyPressed() function, there exists a function called mouseWheel() that will firewhenever the user scrolls a mouse wheel, or zooms in using touch gestures from a trackpad.https://processing.org/reference/mouseWheel_.htmlThe value retrieved in that function can be sent to your camera’s Zoom function. You may want to scalethe value, as one “tick” of a mouse wheel might need to be many units in a 3D environment.4GridNavigating 3D space without some frame of reference can be an exercise in frustration. While asimulation or game will have a lot of rendered content to represent the details of some environment,many stages of development won’t yet have that content. So what do you do? Create some! A simplegrid to represent a ground of sorts, centered onthe origin (0, 0, 0) will suffice.To create one, you can use the line() function anda couple of loops to create something like theimage on the right. That grid has minimum andmaximum values of -100 and 100 along the X andZ axes, with lines every 10 units. Depending onwhat you were working on you might use othervalues for a larger or denser grid, and you mighthave some colors or other indicators of which axisis which. (It’s very common in 3D applications tocolor-code the axes such that X is red, Y is green,and Z is blue—just think XYZ -> RGB.)ShapesProcessing handles collections of vertices in a class called PShape. The data for such an object can becreated manually, or loaded from a file. In addition, data can be dynamically created and rendered ondemand,but this process is slower, and shouldn’t be used where application performance is cr代写3D Rendering作业、代做CS/python编程作业、代做3D scene留学生作业、python/C/C+itical.Creating shapes manually – Immediate modeIt’s possible to create and render shapes immediately, as needed—this is something referred to asimmediate mode rendering. This is typically a slower process, performance-wise, but it can be veryhelpful for the programmer as it allows them to get something up and running with minimal effort. InProcessing this can be accomplished by using the beginShape() and endShape() functions, which youhave already used in previous assignments. The only difference here is that in 3D, the vertex() functionwill need a 3rd component.For example, if you wanted to create a single triangle, you might write:beginShape();vertex(-30, 0, 0);vertex(0, -50, 0);vertex(30, 0, 0);endShape();5You can also set per-vertex colors when creating a custom shape. This is done by calling the fill() functionbefore each call to vertex.This process can be used to create arbitrarily complex shapes, including shapes which are made ofmultiple polygons.When creating complex shapes, it’s important touse the beginShape() function properly. Up untilthis point you haven’t had to pass it anyparameters, but you can pass a variety of values toit, which will determine how the data you store inthe shape gets processed at render time.For example, the image on the right is the samedata for a cube, but in one instance beginShape() iscalled with the parameter TRIANGLE passed to it,which will treat all vertex() data sent as though itshould be grouped in batches of 3, to create atriangles. There are many ways to usebeginShape()—the documentation has someadditional examples: https://processing.org/reference/beginShape_.htmlbeginShape();fill(255, 0, 0);vertex(-30, beginShape();fill(255, 0, 0);vertex(-30, 0, 0);fill(0, 255, 0);vertex(0, -50, 0);fill(0, 0, 255);vertex(30, 0, 0);endShape();0, 0);fill(0, 255, 0);vertex(0, -50, 0);Left: beginShape(TRIANGLE) Right: beginShape()6Creating shapes manually – Retained modeCreating shapes manually is fine, but if you need to render a lot of objects, immediate mode will be a bitof a drag on the application’s performance. You can create an instance of the PShape object, initialize itusing the same beginShape(), endShape(), vertex() functions you’ve used before—this time, however,they are members of the PShape object, and must be called as such.In addition to setting the vertex data, a PShape can store its own render settings like stroke, and fillcolor, which you set by calling various functions. For example, if you wanted the shape to use a stroke,you could set it by writing the following:Once the shape has been created, you can draw it by simply calling the shape() function, and passing inthe PShape object.Creating a CubeA cube is a simple shape: 6 sides, 2 triangles per side, 3 vertices per triangle—36 vertices in total. Asingle cube with length/width/height of 1 is sometimes called a Unit Cube, and is often centered on theorigin, like this:Each vertex is half a unit offset from the origin along each axis, depending on which triangle you aresetting up. You can set the fill() function once per triangle; no need to call it once per vertex (unless youwant them to be different).PShape triangle = createShape();triangle.beginShape();triangle.vertex(-30, 0, 0);triangle.vertex(0, -50, 0);triangle.vertex(30, 0, 0);triangle.endShape();// Elsewhere…void draw(){ // Draw the shape shape(triangle);} someObject.setFill(color(255, 0, 255)); someObject.setStroke(true); // Use a stroke at all someObject.setStroke(color(0)); // Set the stroke color someObject.setStrokeWeight(2.0f);7Loading shapes from a fileCreating a complex mesh by hand would be painful, to say the least. For that, we load files containingthe data that created from some external source (typically a 3D modeling program). To do that,Processing has a super-simple function, loadShape(). Simply give it the name of the file you want to load(which has to be of type .SVG or .OBJ), and the relevant data is read into a new PShape. So if you wantedto load a model of, say a tree, and it was called “tree.obj” you would just write:PShape someObject = loadShape(“monster.obj”);The file to load must be in a folder called data inside your sketch folder (you can create this manually).Once you have this object, the same rules for setting properties or drawing the shape still apply.Transformation FramesOnce you have everything created, drawing it in the proper location is the next step. The translate(),rotate() and scale() functions will allow you to control where something is drawn, how it is oriented, andthe size of the object. It can often be convenient to do so from some particular frame of reference. Thedefault frame is the origin. Draw something, and it appears relative to the origin. Call translate(100, 0, 0)and now something is rendered 100 units from the origin along the X axis.To render something 100 units away from THAT location, however, you might want to change the origintemporarily. In OpenGL (and in Processing) that would be with the pushMatrix() function. This takeswhatever previous calls to translate/rotate/scale and uses that as a new origin. Any future calls will berelative to that. When you want to “go back” to the previous transformation, you would use thepopMatrix() function. For example, to draw the boxes the left side of the first image, you might dosomething like this:(You don’t have to use push/popMatrix, but it is often quite helpful)All that translating, rotating, or scaling just sets a matrix to be used to transform whatever you happento draw after. So you can draw the same shape 100 times using different translations or rotations topopulate an entire scene. Virtually every application out there uses a similar process—set atransformation, draw something, set a transformation, draw something, for each object.8Where does everything go cheat sheetSubmissionsCreate a .zip file with any code files you created for this project (in Processing they are files with theextension .pde), and name the file LastName.FirstName.Project3.zip. Submit the .zip file on the Canvaspage for Project 3.Tips Get the grid and the camera implemented first. Navigating 3D space can be unintuitive at first,having a frame of reference makes all the difference.GradingItem Description Maximum PointsGrid #frameofreferenceftw 10Camera Orbit functionality, required functionsimplemented40Load and draw shapes from.OBJ fileWireframe monster and half-scale monster 20Cubes as a PShape Cube created and rendered 3 times with 3transformations20Triangle fans Circle and hex with HSB color and stroke 10Total 100转自：http://ass.3daixie.com/2018103123017526.html
