import Input from ‘./js/input/input.js’
import { hex2rgb, deg2rad, normalize, dot, cross } from ‘./js/utils/utils.js’
import { Box } from ‘./js/app/object3d.js’
Copyright By PowCoder代写 加微信 powcoder
class Mat4 {
* Creates an identity matrix
* @returns {Mat4} An identity matrix
static identity() {
throw ‘”Mat4.identity” not implemented’
* Creates a translation matrix
* @param {Number} x Translation in X direction
* @param {Number} y Translation in Y direction
* @param {Number} z Translation in Z direction
* @returns {Mat4} A translation matrix
static translation( x, y, z ) {
throw ‘”Mat4.translation” not implemented’
* Creates a rotation matrix for X rotations
* @param {Number} deg Angle in degrees
* @returns {Mat4} A X rotation matrix
static rotationx( deg ) {
throw ‘”Mat4.rotationx” not implemented’
* Creates a rotation matrix for Y rotations
* @param {Number} deg Angle in degrees
* @returns {Mat4} A Y rotation matrix
static rotationy( deg ) {
throw ‘”Mat4.rotationy” not implemented’
* Creates a rotation matrix for Z rotations
* @param {Number} deg Angle in degrees
* @returns {Mat4} A Z rotation matrix
static rotationz( deg ) {
throw ‘”Mat4.rotationz” not implemented’
* Creates a scaling matrix
* @param {Number} s The factor to scale by
* @returns {Mat4} A scaling matrix
static scale( s ) {
throw ‘”Mat4.scale” not implemented’
* Creates a view matrix using eye position and viewing target position
* @param {Array
* @param {Array
* @param {Array
* @returns {Mat4} A view matrix
static lookat( eye, center, up ) {
throw ‘”Mat4.lookat” not implemented’
* Creates a projection matrix using perspective projection
* @param {Number} fovy Vertical field of view in degrees
* @param {Number} aspect Aspect ratio of the canvas (width / height)
* @param {Number} near Near plane distance
* @param {Number} far Far plane distance
* @returns {Mat4} A perspective projection matrix
static projectionPerspective( fovy, aspect, near, far ) {
throw ‘”Mat4.projectionPerspective” not implemented’
* Creates a projection matrix using orthographic projection
* @param {Number} left The left extent of the camera frustum (negative)
* @param {Number} right The right extent of the camera frustum (positive)
* @param {Number} aspect Aspect ratio of the canvas (width / height)
* @param {Number} near Near plane distance
* @param {Number} far Far plane distance
* @returns {Mat4} An orthographic projection matrix
static projectionOrthographic( left, right, aspect, near, far ) {
throw ‘”Mat4.projectionOrthographic” not implemented’
* Constructs a new 4×4 matrix
* Arguments are given in row-major order
* They are stored in this.m in column-major order
constructor(m00, m01, m02, m03,
m10, m11, m12, m13,
m20, m21, m22, m23,
m30, m31, m32, m33) {
// store in column major format
this.m = [
[m00, m10, m20, m30],
[m01, m11, m21, m31],
[m02, m12, m22, m32],
[m03, m13, m23, m33]
* Flattens the matrix for use with WebGL/OpenGL calls
* @returns {Array
flatten() {
return […this.m[0], …this.m[1], …this.m[2], …this.m[3]]
* Performs column-major matrix multiplication of the current matrix and ‘other’
* @param {Mat4} other The matrix to multiply with
* @returns {Mat4} The resulting matrix
multiply( other ) {
throw ‘”Mat4.multiply” not implemented’
* WebGlApp that will call basic GL functions, manage a list of shapes, and take care of rendering them
* This class will use the Shapes that you have implemented to store and render them
class WebGlApp
* Initializes the app with a box, and the model, view, and projection matrices
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
* @param {Shader} shader The shader to be used to draw the object
constructor( gl, shader )
// Store the shader
this.shader = shader
// Create a box instance and create a variable to track its rotation
this.box = new Box( gl, shader, hex2rgb(‘#FFBF00’) )
this.box_animation_step = 0
// Create the model matrix
// Use an identity matrix initially
this.model = null
throw ‘WebGlApp.constructor: No model matrix defined’
// Create the view matrix
// Point the camera at the origin and move it off-center
this.eye = [2.5, 1.5, -2.5]
this.center = [0, 0, 0]
this.up = [0, 1, 0]
this.view = null
throw ‘WebGlApp.constructor: No view matrix defined’
// Create the projection matrix
// Use a perspective projection initially
this.fovy = 90
this.aspect = 16/9
this.left = -5
this.right = 5
this.near = 0.001
this.far = 1000.0
this.projection = null
throw ‘WebGlApp.constructor: No projection matrix defined’
// Combine model, view and projection matrix into a single MVP
// Pay attention to the correct order of multiplication
this.mvp = null
throw ‘WebGlApp.constructor: No MVP derived from model, view, and projection matrices’
* Sets the viewport of the canvas to fill the whole available space so we draw to the whole canvas
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
* @param {Number} width
* @param {Number} height
setViewport( gl, width, height )
gl.viewport( 0, 0, width, height )
* Clears the canvas color
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
clearCanvas( gl )
gl.clearColor(…hex2rgb(‘#000000’), 1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
* Updates components of this app
* @param { AppState } app_state The state of the UI
update( app_state )
// This creates values between -1.0 and 1.0 that change continuously with time
// Use this.box_animation_step to redefine the model matrix and realize the animation
this.box_animation_step = (Math.sin(Date.now() / 2000))
// Query the UI for Animation and set appropriate model matrix
throw ‘WebGlApp.update: Model matrix not updated’
// Query the UI for Projection and set appropriate projection matrix
throw ‘WebGlApp.update: Projection matrix not updated’
// Extra Credit: Can you move the camera using the arrow keys on the keyboard
// Re-compute the MVP matrix
this.mvp = null
throw ‘WebGlApp.update: MVP is not updated correctly’
* Main render loop which sets up the active viewport (i.e. the area of the canvas we draw to)
* clears the canvas with a background color and draws a box
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
* @param {Number} canvas_width The canvas width. Needed to set the viewport
* @param {Number} canvas_height The canvas height. Needed to set the viewport
render( gl, canvas_width, canvas_height )
// Set viewport and clear canvas
this.setViewport( gl, canvas_width, canvas_height )
this.clearCanvas( gl )
// Activate the shader
this.shader.use( )
// Pass the MVP to the shader
// Use the shader’s setUniform4x4f function to pass a 4×4 matrix
// Use ‘u_mvp’ to find the MVP variable in the shader
// Use Mat4’s flatten() function to serialize the matrix for WebGL
throw ‘WebGlApp.render: MVP not sent to the shader’
// Render the box
// This will use the MVP that was passed to the shader
this.box.render( gl )
// JS Module Export — No need to modify this
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com