triangle.js
class Triangle2D {
static vertexPositions = [
];
static vertexColors = [
vec3(1.0, 0.0, 0.0),
vec3(0.0, 1.0, 0.0),
vec3(0.0, 0.0, 1.0),
];
static shaderProgram = -1;
static positionBuffer = -1;
static colorBuffer = -1;
static aPositionShader = -1;
static aColorShader = -1;
static initialize() {
Triangle2D.shaderProgram = initShaders(gl, "/vshader.glsl", "/fshader.glsl");
// Compute vertices of the equilateral triangle
const radius = 0.2; // Adjust the radius as needed
const center = vec2(0.01, 0.8); // Adjust the center as needed
const angles = [(Math.PI / 2), (7*Math.PI / 6), (11*Math.PI / 6) ];
Triangle2D.vertexPositions = angles.map((angle) => {
const x = radius * Math.cos(angle) + center[0];
const y = radius * Math.sin(angle) + center[1];
return vec2(x, y);
});
// Load the data into the GPU
Triangle2D.positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(Triangle2D.vertexPositions), gl.STATIC_DRAW);
Triangle2D.colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(Triangle2D.vertexColors), gl.STATIC_DRAW);
// Associate our shader variables with our data buffer
Triangle2D.aPositionShader = gl.getAttribLocation(Triangle2D.shaderProgram, "aPosition");
Triangle2D.aColorShader = gl.getAttribLocation(Triangle2D.shaderProgram, "aColor");
}
constructor() {
if (Triangle2D.shaderProgram === -1) Triangle2D.initialize();
}
draw() {
gl.useProgram(Triangle2D.shaderProgram);
gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.positionBuffer);
gl.vertexAttribPointer(Triangle2D.aPositionShader, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, Triangle2D.colorBuffer);
gl.vertexAttribPointer(Triangle2D.aColorShader, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(Triangle2D.aPositionShader);
gl.enableVertexAttribArray(Triangle2D.aColorShader);
gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.disableVertexAttribArray(Triangle2D.aPositionShader);
gl.disableVertexAttribArray(Triangle2D.aColorShader);
}
}
square.js
class Square{
static vertexPositions = [
vec2( -0.42, -0.42 ),
vec2( -0.42, 0.42 ),
vec2( 0.42, 0.42),
vec2( 0.42, -0.42)];
static vertexColors = [
vec3(1.0,1.0,1.0),
vec3(1.0,1.0,1.0),
vec3(1.0,1.0,1.0),
vec3(1.0,1.0,1.0)];
static shaderProgram = -1;
static positionBuffer = -1;
static colorBuffer = -1;
static aPositionShader = -1;
static aColorShader = -1;
static shaderProgram2 = -1;
static aPositionShader2 = -1;
static uColorShader = -1;
static initialize() {
Square.shaderProgram = initShaders( gl, "/vshader.glsl", "/fshader.glsl");
// Load the data into the GPU
Square.positionBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, Square.positionBuffer);
gl.bufferData( gl.ARRAY_BUFFER, flatten(Square.vertexPositions), gl.STATIC_DRAW );
Square.colorBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, Square.colorBuffer);
gl.bufferData( gl.ARRAY_BUFFER, flatten(Square.vertexColors), gl.STATIC_DRAW );
// Associate our shader variables with our data buffer
Square.aPositionShader = gl.getAttribLocation( Square.shaderProgram, "aPosition" );
Square.aColorShader = gl.getAttribLocation( Square.shaderProgram, "aColor" );
Square.shaderProgram2 = initShaders( gl, "/vshader2.glsl", "/fshader.glsl");
// Associate our shader variables with our data buffer
Square.aPositionShader2 = gl.getAttribLocation( Square.shaderProgram2, "aPosition" );
Square.uColorShader = gl.getUniformLocation( Square.shaderProgram2, "uColor" );
}
constructor(){
if(Square.shaderProgram == -1)
Square.initialize()
}
draw() {
gl.useProgram(Square.shaderProgram);
gl.bindBuffer( gl.ARRAY_BUFFER, Square.positionBuffer);
gl.vertexAttribPointer(Square.aPositionShader, 2, gl.FLOAT, false, 0, 0 );
gl.bindBuffer( gl.ARRAY_BUFFER, Square.colorBuffer);
gl.vertexAttribPointer(Square.aColorShader, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray(Square.aPositionShader);
gl.enableVertexAttribArray(Square.aColorShader);
gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
gl.disableVertexAttribArray(Square.aPositionShader);
gl.disableVertexAttribArray(Square.aColorShader);
gl.useProgram(Square.shaderProgram2);
gl.bindBuffer( gl.ARRAY_BUFFER, Square.positionBuffer);
gl.vertexAttribPointer(Square.aPositionShader2, 2, gl.FLOAT, false, 0, 0 );
gl.uniform3fv(Square.uColorShader,vec3(1.0,1.0,1.0));
gl.enableVertexAttribArray(Square.aPositionShader2);
gl.drawArrays( gl.LINE_LOOP, 0, 4 );
gl.disableVertexAttribArray(Square.aPositionShader2);
}
}