diff --git a/gldemo.html b/gldemo.html index 9b5d7c7e..6e9d1a15 100644 --- a/gldemo.html +++ b/gldemo.html @@ -154,6 +154,22 @@ updateWorldSize(); break; + // NOTE this is here only to provide a test path for layer movement, + // the more normative thing to do here would be to transalte the perspective, + // not every world layer transform + case 'h': + demo?.moveWorldBy(-1, 0); + break; + case 'j': + demo?.moveWorldBy(0, 1); + break; + case 'k': + demo?.moveWorldBy(0, -1); + break; + case 'l': + demo?.moveWorldBy(1, 0); + break; + } }); diff --git a/gldemo.js b/gldemo.js index 7e2fc9f3..063f5d52 100644 --- a/gldemo.js +++ b/gldemo.js @@ -206,6 +206,18 @@ export default async function runDemo(opts) { generateWorld(); }, + /** @param {number} dx @param {number} dy */ + moveWorldBy(dx, dy) { + this.moveWorldTo(bg.left + dx, bg.top + dy); + }, + + /** @param {number} x @param {number} y */ + moveWorldTo(x, y) { + bg.moveTo(x, y); + fg.moveTo(x, y); + bgCurved.moveTo(x - 0.5, y - 0.5); + }, + stop, done, }; diff --git a/gltiles.js b/gltiles.js index 2af37ff0..ed9f381a 100644 --- a/gltiles.js +++ b/gltiles.js @@ -243,13 +243,10 @@ export default async function makeTileRenderer(gl) { const [x, _] = vec2.transformMat4([0, 0], [0, 0], transform); return x / cellSize.float; }, - // TODO set left() - get top() { const [_, y] = vec2.transformMat4([0, 0], [0, 0], transform); return y / cellSize.float; }, - // TODO set top() get stride() { return stride.int }, set stride(w) { @@ -259,7 +256,14 @@ export default async function makeTileRenderer(gl) { } }, - // TODO moveTo(left, top) + /** @param {number} left @param {number} top */ + moveTo(left, top) { + const size = cellSize.float; + const x = left * size; + const y = top * size; + mat4.fromTranslation(transform, [x, y, 0]); + paramsDirty = true; + }, get spinBuffer() { return spinBuffer }, get tileBuffer() { return tileBuffer }, @@ -421,7 +425,7 @@ export default async function makeTileRenderer(gl) { gl.useProgram(null); }, - }, layer, 'texture', 'cellSize', 'left', 'top'); + }, layer, 'texture', 'cellSize', 'left', 'top', 'moveTo'); }, };