import { Color } from "../filler/common"; import { LayerAB, Scene } from "./Scene"; import { createProgram, createShader } from "./utils"; export class BorderLayer extends LayerAB { private vertexShaderCode = /*glsl*/ ` attribute vec2 a_position; uniform mat4 u_matrix; void main() { gl_Position = u_matrix * vec4(a_position, 0, 1); } `; private fragmentShaderCode = /*glsl*/ ` precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; } ` program: WebGLProgram aPositionLoc: number uMatrixLoc: WebGLUniformLocation uColorLoc: WebGLUniformLocation vertexBuffer: WebGLBuffer vertexArray: Float32Array colorArray: Float32Array constructor( private scene: Scene, private x: number, private y: number, private width: number, private height: number, private color: number = 0xffff0000, private lineWidth: number = 1, ) { super() const gl = scene.gl; this.program = createProgram(gl, createShader(gl, gl.VERTEX_SHADER, this.vertexShaderCode)!, createShader(gl, gl.FRAGMENT_SHADER, this.fragmentShaderCode)!)! this.aPositionLoc = gl.getAttribLocation(this.program, "a_position") this.uMatrixLoc = gl.getUniformLocation(this.program, "u_matrix")! this.uColorLoc = gl.getUniformLocation(this.program, "u_color")! //fillRectangle(this.vertexArray, 0, x, y, width, height ) this.vertexArray = new Float32Array([ x, y, x, y + height, x + width, y + height, x + width, y ]) this.vertexBuffer = gl.createBuffer()!; gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, this.vertexArray, gl.STATIC_DRAW); this.colorArray = new Color(color).toFloatArray() } override draw() { const gl = this.scene.gl; gl.useProgram(this.program); gl.enableVertexAttribArray(this.aPositionLoc); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(this.aPositionLoc, 2, gl.FLOAT, false, 0, 0) gl.uniformMatrix4fv(this.uMatrixLoc, false, this.scene.drawMatrix) gl.uniform4fv(this.uColorLoc, this.colorArray) gl.lineWidth(this.lineWidth) gl.drawArrays(gl.LINE_LOOP, 0, 4); } }