I made a simple example with checking of collision with right wall:
- Plunker: https://next.plnkr.co/edit/Bgf18uHzIkrRw9oW?preview
- CodeSandbox: https://codesandbox.io/s/texture-movement-webgl-10-typescript-3v8c6
- GitHub + Build Instruction: https://github.com/8Observer8/texture-movement_webgl10-typescript
private GameLoop(): void
{
this.Update();
this.Draw();
requestAnimationFrame(() => this.GameLoop());
}
private Update(): void
{
this._x += 2;
// Check a collisiion with the right wall
if (this._x > this._gl.canvas.width)
{
// Move an object to left wall
this._x = 0;
}
mat4.identity(this._modelMatrix);
mat4.translate(this._modelMatrix, this._modelMatrix, vec3.fromValues(this._x, this._y, 0));
mat4.rotateZ(this._modelMatrix, this._modelMatrix, 0 * Math.PI / 180.0);
mat4.scale(this._modelMatrix, this._modelMatrix, vec3.fromValues(32, 32, 1));
let uModelMatrix = this._gl.getUniformLocation(this._program, "uModelMatrix");
this._gl.uniformMatrix4fv(uModelMatrix, false, this._modelMatrix);
}
private Draw(): void
{
this._gl.clear(this._gl.COLOR_BUFFER_BIT);
this._gl.drawArrays(this._gl.TRIANGLE_STRIP, 0, 4);
}