import { hex2rgb, deg2rad } from ‘./js/utils/utils.js’
* Base class for all drawable shapes
class Shape
Copyright By PowCoder代写 加微信 powcoder
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
* @param {Shader} shader The shader to be used to draw the object
* @param {Array
* @param {Array
* @param {Array
* @param {WebGL2RenderingContext.GL_TRIANGLES | WebGL2RenderingContext.GL_POINTS} draw_mode The draw mode to use. In this assignment we use GL_TRIANGLES and GL_POINTS
* @param {Number} num_elements The number of elements that make up one primitive in the given draw mode
constructor( gl, shader, vertices, indices, color, draw_mode, num_elements )
this.shader = shader
this.vertices = vertices
this.vertices_buffer = null
this.createVBO( gl )
this.indices = indices
this.index_buffer = null
this.createIBO( gl )
this.color = color
this.draw_mode = draw_mode
this.num_components = 2 // We draw 2D shapes, therefore each coordinate has two components (x, y)
this.num_elements = num_elements
this.vertex_array_object = null
this.createVAO( gl, shader )
* Sets up a vertex attribute object that is used during rendering to automatically tell WebGL how to access our buffers
* @param { WebGL2RenderingContext } gl The webgl2 rendering context
createVAO( gl, shader )
throw ‘”Shape.createVAO” not implemented’
* Creates vertex buffer object for vertex data
* @param { WebGL2RenderingContext } gl The webgl2 rendering context
createVBO( gl )
throw ‘”Shape.createVBO” not implemented’
* Creates index buffer object for vertex data
* @param { WebGL2RenderingContext } gl The webgl2 rendering context
createIBO( gl )
throw ‘”Shape.createIBO” not implemented’
* Render call for an individual shape.
* In this function, you set both the vertex and index buffers active
* After that you want to set the color uniform “u_color” in the shader, so that it knows which color to use
* “u_color” is a vec3 i.e. a list of 3 floats
* Finally, you draw the geometry
* Don’t forget to unbind the buffers after that
* @param { WebGL2RenderingContext } gl The webgl2 rendering context
render( gl )
throw ‘”Shape.render” not implemented’
// Bind vertex array object
// Bind index buffer
// Send uniform attributes
// Draw the element
// Clean Up
* Point extension for Shape. Creates vertex list and indices and calls the super constructor.
class Point extends Shape
constructor( gl, shader, position, color )
throw ‘”Point” contructor not implemented’
// Create vertex and index arrays
// Call super constructor
* Triangle extension for Shape. Creates vertex list and indices and calls the super constructor.
class Triangle extends Shape
constructor( gl, shader, position, color, sideLength)
throw ‘”Triangle” contructor not implemented’
// Create vertex and index arrays
// Call super constructor
* Square extension for Shape. Creates vertex list and indices and calls the super constructor.
class Square extends Shape
constructor( gl, shader, position, color, sideLength )
throw ‘”Square” contructor not implemented’
// Create vertex and index arrays
// Call super constructor
* 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 an empty list of shapes. Use this to store shapes.
constructor()
this.shapes = [ ]
* 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 )
throw ‘”WebGLApp.setViewport” not implemented’
// Set the GL viewport to fill width and height
* Clears the canvas color with Aggie Blue
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
clearCanvas( gl )
throw ‘”WebGLApp.clearCanvas” not implemented’
// Clear the canvas with Aggie Blue (#022851)
* Adds a point shape to the list of shapes
* @param {Shader} shader The shader to be used to draw the object
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
* @param {Array
addPoint( gl, shader, position )
throw ‘”WebGLApp.addPoint” not implemented’
// Add a new Point shape to the list of shapes
// Use the Point class defined above
// Make it Aggie Gold (#FFBF00) or any color that contrasts nicely with Aggie Blue (#022851)
* Adds a triangle shape to the list of shapes
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
* @param {Shader} shader The shader to be used to draw the object
* @param {Array
* @param {Number} sideLength The length of the triangle sides
addTriangle( gl, shader, position, sideLength )
throw ‘”WebGLApp.addTriangle” not implemented’
// Add a new Triangle shape to the list of shapes
// Use the Triangle class defined above
// Make it Aggie Gold (#FFBF00) or any color that contrasts nicely with Aggie Blue (#022851)
* Adds a square shape to the list of shapes
* @param {WebGL2RenderingContext} gl The webgl2 rendering context
* @param {Shader} shader The shader to be used to draw the object
* @param {Array
* @param {Number} sideLength The length of the square sides
addSquare( gl, shader, position, sideLength )
throw ‘”WebGLApp.addSquare” not implemented’
// Add a new Square shape to the list of shapes
// Use the Square class defined above
// Make it Aggie Gold (#FFBF00) or any color that contrasts nicely with Aggie Blue (#022851)
* Clears the list of shapes. After this call the canvas will be empty.
clearShapes()
throw ‘”WebGLApp.clearShapes” not implemented’
* 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 all active shapes
* If there’s no shapes, only the background will be drawn
* @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 )
this.setViewport( gl, canvas_width, canvas_height )
this.clearCanvas( gl )
throw ‘”WebGLApp.render” not implemented’
// Render each shape in the list of shapes
// JS Module Export — No need to modify this
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com