- Install Node.js and Visual Studio Code.
- Open this lab folder in Visual Studio Code.
- Open a terminal (Terminal > New Terminal).
- run
npm install
. If it failed for any reason, try again. - run
npm run watch
. - Ctrl + click the link shown in the terminal (usually it will be http://localhost:1234).
Note: you can use yarn to enable caching so that you don't download all the packages with project. You can download yarn from yarnpkg.com. Then replace npm install
with yarn install
and npm run watch
with yarn watch
.
Modify the function ColoredSphere
(in src/common/mesh-utils.ts
) to return a colored sphere.
The function takes 3 parameters:
gl: WebGL2RenderingContext
which is the WebGL2 context.verticalResolution: number
which defines the number of segments from the north pole to the south pole of the sphere.horizontalResolution: number
which defines the number of segments along the equator of the sphere.
The function must return a mesh that contains a sphere of radius 1 centered around the origina (0,0,0) and the number of vertical and horizontal segments must be as defined by the input parameters. The color of each vertex will depend on its position and must follow the following formula:
(r,g,b) = ((x,y,z) + 1) / 2 * 255
a = 255
Modify the function drawSystem
(in src/scenes/02-SolarSystem.ts
) to draw the whole given solar system.
The function takes 2 paramter:
parent: mat4
which is the transformation of the parent to the homogenous clip space "MVP".system: SolarSystemDescription
which defines the stucture of the solar system.
The output of this requirement will be compared to the expected output using blink-diff.
The data for the solar systems is found in static/data/solar-systems.json
and it is loaded by the scene before starting.
Drawing a sphere in the euclidean xyz-space is equivalent to drawing a plane in the spherical rθφ-space. To get the shape a sphere, you can follow this thought process:
- Imagine a rectangle parallel to the θφ-plane which covers along the θ-axis from
-PI/2
toPI/2
and along the φ-axis from-PI
toPI
. The plane will be atr=1
. - Subdivide the rectangle into smaller rectangles where the number of subdivision along the x-axis equals the
horizontalResolution
and the number of subdivision along the y-axis equals theverticalResolution
. - Convert every vertex in the subdivided rectangle from spherical coordinates (r, θ, φ) to euclidean (x, y, z). This is now a sphere.
Note: r is the radial distance, θ is the polar angle, and φ is the azimuthal angle. You can read more about spherical coordinates on Spherical Coordinate System.
Now you need to write that generates the same result as the thought process. However, there are some optimizations that can be done:
- All of the points on both ends of the φ-axis will meet (φ=
-PI
and φ=PI
) and become the same so we can remove one side and save the space needed byverticalResolution + 1
vertices. - All points at θ=
PI/2
will collapse to a single vertex. The same happens at θ=-PI/2
. We can only keep one vertex and this will save us2 * horizontalResolution - 2
vertices.
The deadline for the lab delivery is Saturday 9/11/2019 at 23:59pm. It should be delivered by mail and will discussed in the labs in the same week.# SolarSystem