import {
WebGLApp, VIEWPORT_LAYOUT,
ConeFrustumMesh, BoxMesh, CubeMesh, GridFloorMesh, FaceMesh,
GLColors
} from '/tutorials/webgl/framework/examples/js/esm/index-independent.js';
let app = new WebGLApp({
bgColor: GLColors.BLACK
});
app.doInInitViewports((cameraManager, viewportManager) => {
cameraManager.eyeDist = 5;
viewportManager.useLayout(VIEWPORT_LAYOUT.Single);
});
app.doInInitMeshes((scene) => {
let vertices = [
0.0, 0.5, -0.5, // V0
-0.5, 0.5, 0.5, // V1
0.5, 0.5, 0.5, // V2
0.0, -0.5, -0.5, // V3
-0.5, -0.5, 0.5, // V4
0.5, -0.5, 0.5 // V5
];
let indices = [
[0, 1, 2],
[3, 4, 5]
];
let mesh = new FaceMesh(vertices, indices);
scene.add(mesh);
let floor = new GridFloorMesh(0.5, 20);
scene.add(floor);
});
app.run();
canvas {
min-height: 450px;
}
#version 300 es
precision mediump float;
uniform mat4 uProjectionMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uModelMatrix;
in vec4 aPosition;
in vec4 aColor;
out vec4 vColor;
void main() {
gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition;
vColor = aColor;
}
#version 300 es
precision mediump float;
in vec4 vColor;
out vec4 fragColor;
void main() {
fragColor = vColor;
}
