File size: 2,683 Bytes
c0dce6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
import Attribute from './Attribute.js';
import Material from './Material.js';
import Mesh from './Mesh.js';
import PlaneGeometry from './PlaneGeometry.js';
import Uniform from './Uniform.js';
export default class MiniGL {
/**
* Class reference.
*
* @type {MiniGL}
*/
_class = MiniGL;
/**
* @type {HTMLCanvasElement}
* @private
*/
_canvas;
/**
* @type {WebGLRenderingContext}
* @private
*/
_context;
/**
* @type {object}
*/
commonUniforms = {};
/**
* @type {array}
*/
meshes = [];
/**
* @param {HTMLCanvasElement} canvas
* @param {null|Number} width
* @param {null|Number} height
*/
constructor(canvas, width, height) {
this.setCanvas(canvas);
const matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
this.commonUniforms = {
projectionMatrix: new Uniform(this, 'mat4', matrix),
modelViewMatrix: new Uniform(this, 'mat4', matrix),
resolution: new Uniform(this, 'vec2', [1, 1]),
aspectRatio: new Uniform(this, 'float', 1)
};
this.setSize(width, height);
}
/**
* Sets the `_canvas` and `_context` properties.
*
* @param {HTMLCanvasElement} canvas
*/
setCanvas(canvas) {
this._canvas = canvas;
this._context = canvas.getContext('webgl', {
antialias: true
});
}
/**
* @return {HTMLCanvasElement}
*/
getCanvas() {
return this._canvas;
}
/**
* @return {WebGLRenderingContext}
*/
getContext() {
return this._context;
}
/**
* Set the canvas and viewport size.
*
* @param {Number} width
* @param {Number} height
*/
setSize(width = 640, height = 480) {
this.getCanvas().width = width;
this.getCanvas().height = height;
this.getContext().viewport(0, 0, width, height);
this.commonUniforms.resolution.value = [width, height];
this.commonUniforms.aspectRatio.value = width / height;
}
setOrthographicCamera(left = 0, right = 0, top = 0, bottom = -2000, distance = 2000) {
this.commonUniforms.projectionMatrix.value = [
2 / this.getCanvas().width,
0, 0, 0, 0,
2 / this.getCanvas().height,
0, 0, 0, 0,
2 / (bottom - distance),
0, left, right, top, 1
];
}
render() {
this.getContext().clearColor(0, 0, 0, 0);
this.getContext().clearDepth(1);
this.meshes.forEach(mesh => {
mesh.draw();
});
}
}
|