ol 10.2.2-dev.1727715662036 → 10.2.2-dev.1727768316442

package/vec/mat4.js

@@ -2,17 +2,19 @@
  * @module ol/vec/mat4
  */
 
+/** @typedef {Array<number>} Mat4 */
+
 /**
- * @return {Array<number>} "4x4 matrix representing a 3D identity transform."
+ * @return {Mat4} "4x4 matrix representing a 3D identity transform."
  */
 export function create() {
   return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 }
 
 /**
- * @param {Array<number>} mat4 Flattened 4x4 matrix receiving the result.
+ * @param {Mat4} mat4 Flattened 4x4 matrix receiving the result.
  * @param {import("../transform.js").Transform} transform Transformation matrix.
- * @return {Array<number>} "2D transformation matrix as flattened 4x4 matrix."
+ * @return {Mat4} "2D transformation matrix as flattened 4x4 matrix."
  */
 export function fromTransform(mat4, transform) {
   mat4[0] = transform[0];
@@ -23,3 +25,155 @@ export function fromTransform(mat4, transform) {
   mat4[13] = transform[5];
   return mat4;
 }
+
+/**
+ * Generates a orthogonal projection matrix with the given bounds
+ *
+ * @param {number} left Left bound of the frustum
+ * @param {number} right Right bound of the frustum
+ * @param {number} bottom Bottom bound of the frustum
+ * @param {number} top Top bound of the frustum
+ * @param {number} near Near bound of the frustum
+ * @param {number} far Far bound of the frustum
+ * @param {Mat4} [out] mat4 frustum matrix will be written into
+ * @return {Mat4} out
+ */
+export function orthographic(left, right, bottom, top, near, far, out) {
+  out = out ?? create();
+  const lr = 1 / (left - right),
+    bt = 1 / (bottom - top),
+    nf = 1 / (near - far);
+  out[0] = -2 * lr;
+  out[1] = 0;
+  out[2] = 0;
+  out[3] = 0;
+  out[4] = 0;
+  out[5] = -2 * bt;
+  out[6] = 0;
+  out[7] = 0;
+  out[8] = 0;
+  out[9] = 0;
+  out[10] = 2 * nf;
+  out[11] = 0;
+  out[12] = (left + right) * lr;
+  out[13] = (top + bottom) * bt;
+  out[14] = (far + near) * nf;
+  out[15] = 1;
+  return out;
+}
+
+/**
+ * Scales the mat4 by the dimensions in the given vec3
+ *
+ * @param {Mat4} m The matrix to scale.
+ * @param {number} x How much to scale in the x direction.
+ * @param {number} y How much to scale in the y direction.
+ * @param {number} z How much to scale in the z direction.
+ * @param {Mat4} [out] The matrix to write to.
+ * @return {Mat4} out
+ **/
+export function scale(m, x, y, z, out) {
+  out = out ?? create();
+  out[0] = m[0] * x;
+  out[1] = m[1] * x;
+  out[2] = m[2] * x;
+  out[3] = m[3] * x;
+  out[4] = m[4] * y;
+  out[5] = m[5] * y;
+  out[6] = m[6] * y;
+  out[7] = m[7] * y;
+  out[8] = m[8] * z;
+  out[9] = m[9] * z;
+  out[10] = m[10] * z;
+  out[11] = m[11] * z;
+  out[12] = m[12];
+  out[13] = m[13];
+  out[14] = m[14];
+  out[15] = m[15];
+  return out;
+}
+
+/**
+ * Translate a matrix.
+ *
+ * @param {Mat4} m the matrix to translate
+ * @param {number} x How much to translate in the x direction.
+ * @param {number} y How much to translate in the y direction.
+ * @param {number} z How much to translate in the z direction.
+ * @param {Mat4} [out] the receiving matrix
+ * @return {Mat4} out
+ */
+export function translate(m, x, y, z, out) {
+  out = out ?? create();
+  let a00, a01, a02, a03, a10, a11, a12, a13, a20, a21, a22, a23;
+
+  if (m === out) {
+    out[12] = m[0] * x + m[4] * y + m[8] * z + m[12];
+    out[13] = m[1] * x + m[5] * y + m[9] * z + m[13];
+    out[14] = m[2] * x + m[6] * y + m[10] * z + m[14];
+    out[15] = m[3] * x + m[7] * y + m[11] * z + m[15];
+  } else {
+    a00 = m[0];
+    a01 = m[1];
+    a02 = m[2];
+    a03 = m[3];
+    a10 = m[4];
+    a11 = m[5];
+    a12 = m[6];
+    a13 = m[7];
+    a20 = m[8];
+    a21 = m[9];
+    a22 = m[10];
+    a23 = m[11];
+
+    out[0] = a00;
+    out[1] = a01;
+    out[2] = a02;
+    out[3] = a03;
+    out[4] = a10;
+    out[5] = a11;
+    out[6] = a12;
+    out[7] = a13;
+    out[8] = a20;
+    out[9] = a21;
+    out[10] = a22;
+    out[11] = a23;
+
+    out[12] = a00 * x + a10 * y + a20 * z + m[12];
+    out[13] = a01 * x + a11 * y + a21 * z + m[13];
+    out[14] = a02 * x + a12 * y + a22 * z + m[14];
+    out[15] = a03 * x + a13 * y + a23 * z + m[15];
+  }
+
+  return out;
+}
+
+/**
+ * @param {number} x x translation.
+ * @param {number} y y translation.
+ * @param {number} z z translation.
+ * @param {Mat4} [out] optional matrix to store result
+ * @return {Mat4} out
+ */
+export function translation(x, y, z, out) {
+  out = out ?? create();
+
+  out[0] = 1;
+  out[1] = 0;
+  out[2] = 0;
+  out[3] = 0;
+  out[4] = 0;
+  out[5] = 1;
+  out[6] = 0;
+  out[7] = 0;
+  out[8] = 0;
+  out[9] = 0;
+  out[10] = 1;
+  out[11] = 0;
+  out[12] = x;
+  out[13] = y;
+  out[14] = z;
+  out[15] = 1;
+
+  return out;
+}

package/webgl/Canvas.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @param {WebGLRenderingContext} gl Rendering Context.
+ * @param {string} fragmentSource Fragment shader source.
+ * @param {string} vertexSource Vertex shader source.
+ * @return {WebGLProgram} [progam] The program.
+ */
+export function createProgram(gl: WebGLRenderingContext, fragmentSource: string, vertexSource: string): WebGLProgram;
+/** @typedef {import("../transform.js").Transform} Matrix */
+/**
+ * Canvas-like operations implemented in webgl.
+ */
+export class Canvas {
+    /**
+     * @param {WebGLRenderingContext} gl Context to render in.
+     */
+    constructor(gl: WebGLRenderingContext);
+    /**
+     * @private
+     * @type {WebGLRenderingContext}
+     */
+    private gl_;
+    /**
+     * @private
+     * @type {WebGLProgram}
+     */
+    private program_;
+    positionLocation: number;
+    texcoordLocation: number;
+    matrixLocation: WebGLUniformLocation | null;
+    textureMatrixLocation: WebGLUniformLocation | null;
+    textureLocation: WebGLUniformLocation | null;
+    positionBuffer: WebGLBuffer | null;
+    positions: number[];
+    texcoordBuffer: WebGLBuffer | null;
+    texcoords: number[];
+    /**
+     * 2dContext drawImage call implemented in webgl.
+     * Unlike images, textures do not have a width and height associated
+     * with them so we'll pass in the width and height of the texture.
+     *
+     * @param {WebGLTexture} tex Image to draw.
+     * @param {number} texWidth Image width.
+     * @param {number} texHeight Image height.
+     * @param {number} srcX Top-left x-point to read src image.
+     * @param {number} srcY Top-left y-point to read src image.
+     * @param {number} [srcWidth] Width of source to read.
+     * @param {number} [srcHeight] Height of source to read.
+     * @param {number} [dstX] Top-left x-point of destination.
+     * @param {number} [dstY] Top-left y-point of destination.
+     * @param {number} [dstWidth] Width of written image in destination.
+     * @param {number} [dstHeight] Height of written image in destination.
+     * @param {number} [width] Width of canvas.
+     * @param {number} [height] Height of canvas.
+     */
+    drawImage(tex: WebGLTexture, texWidth: number, texHeight: number, srcX: number, srcY: number, srcWidth?: number | undefined, srcHeight?: number | undefined, dstX?: number | undefined, dstY?: number | undefined, dstWidth?: number | undefined, dstHeight?: number | undefined, width?: number | undefined, height?: number | undefined): void;
+}
+export type Matrix = import("../transform.js").Transform;
+//# sourceMappingURL=Canvas.d.ts.map

package/webgl/Canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["Canvas.js"],"names":[],"mappings":"AAsNA;;;;;GAKG;AACH,kCALW,qBAAqB,kBACrB,MAAM,gBACN,MAAM,GACL,YAAY,CAuBvB;AAvMD,4DAA4D;AAE5D;;GAEG;AACH;IACE;;OAEG;IACH,gBAFW,qBAAqB,EA4C/B;IAzCC;;;OAGG;IACH,YAAa;IAEb;;;OAGG;IACH,iBAAiE;IAEjE,yBAAyE;IACzE,yBAAyE;IAEzE,4CAAsE;IACtE,mDAGC;IACD,6CAAwE;IAExE,mCAAuC;IAGvC,oBAAqD;IAOrD,mCAAuC;IAGvC,oBAAqD;IAQvD;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAdW,YAAY,YACZ,MAAM,aACN,MAAM,QACN,MAAM,QACN,MAAM,qPAgFhB;CACF;qBA/Ia,OAAO,iBAAiB,EAAE,SAAS"}

package/webgl/Canvas.js

@@ -0,0 +1,242 @@
+import * as mat4 from '../vec/mat4.js';
+
+/**
+ * @module ol/webgl/Canvas
+ */
+
+const VERTEX_SHADER = `
+  attribute vec4 a_position;
+  attribute vec4 a_texcoord;
+
+  uniform mat4 u_matrix;
+  uniform mat4 u_textureMatrix;
+
+  varying vec2 v_texcoord;
+
+  void main() {
+    gl_Position = u_matrix * a_position;
+    vec2 texcoord = (u_textureMatrix * a_texcoord).xy;
+    v_texcoord = texcoord;
+  }
+`;
+
+const FRAGMENT_SHADER = `
+  precision mediump float;
+
+  varying vec2 v_texcoord;
+
+  uniform sampler2D u_texture;
+
+  void main() {
+    if (
+      v_texcoord.x < 0.0 ||
+      v_texcoord.y < 0.0 ||
+      v_texcoord.x > 1.0 ||
+      v_texcoord.y > 1.0
+    ) {
+      discard;
+    }
+    gl_FragColor = texture2D(u_texture, v_texcoord);
+  }
+`;
+
+/** @typedef {import("../transform.js").Transform} Matrix */
+
+/**
+ * Canvas-like operations implemented in webgl.
+ */
+export class Canvas {
+  /**
+   * @param {WebGLRenderingContext} gl Context to render in.
+   */
+  constructor(gl) {
+    /**
+     * @private
+     * @type {WebGLRenderingContext}
+     */
+    this.gl_ = gl;
+
+    /**
+     * @private
+     * @type {WebGLProgram}
+     */
+    this.program_ = createProgram(gl, FRAGMENT_SHADER, VERTEX_SHADER);
+
+    this.positionLocation = gl.getAttribLocation(this.program_, 'a_position');
+    this.texcoordLocation = gl.getAttribLocation(this.program_, 'a_texcoord');
+
+    this.matrixLocation = gl.getUniformLocation(this.program_, 'u_matrix');
+    this.textureMatrixLocation = gl.getUniformLocation(
+      this.program_,
+      'u_textureMatrix',
+    );
+    this.textureLocation = gl.getUniformLocation(this.program_, 'u_texture');
+
+    this.positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+
+    this.positions = [0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1];
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array(this.positions),
+      gl.STATIC_DRAW,
+    );
+
+    this.texcoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
+
+    this.texcoords = [0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1];
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array(this.texcoords),
+      gl.STATIC_DRAW,
+    );
+  }
+
+  /**
+   * 2dContext drawImage call implemented in webgl.
+   * Unlike images, textures do not have a width and height associated
+   * with them so we'll pass in the width and height of the texture.
+   *
+   * @param {WebGLTexture} tex Image to draw.
+   * @param {number} texWidth Image width.
+   * @param {number} texHeight Image height.
+   * @param {number} srcX Top-left x-point to read src image.
+   * @param {number} srcY Top-left y-point to read src image.
+   * @param {number} [srcWidth] Width of source to read.
+   * @param {number} [srcHeight] Height of source to read.
+   * @param {number} [dstX] Top-left x-point of destination.
+   * @param {number} [dstY] Top-left y-point of destination.
+   * @param {number} [dstWidth] Width of written image in destination.
+   * @param {number} [dstHeight] Height of written image in destination.
+   * @param {number} [width] Width of canvas.
+   * @param {number} [height] Height of canvas.
+   */
+  drawImage(
+    tex,
+    texWidth,
+    texHeight,
+    srcX,
+    srcY,
+    srcWidth,
+    srcHeight,
+    dstX,
+    dstY,
+    dstWidth,
+    dstHeight,
+    width,
+    height,
+  ) {
+    const gl = this.gl_;
+
+    if (dstX === undefined) {
+      dstX = srcX;
+    }
+    if (dstY === undefined) {
+      dstY = srcY;
+    }
+    if (srcWidth === undefined) {
+      srcWidth = texWidth;
+    }
+    if (srcHeight === undefined) {
+      srcHeight = texHeight;
+    }
+    if (dstWidth === undefined) {
+      dstWidth = srcWidth;
+    }
+    if (dstHeight === undefined) {
+      dstHeight = srcHeight;
+    }
+    if (width === undefined) {
+      width = gl.canvas.width;
+    }
+    if (height === undefined) {
+      height = gl.canvas.height;
+    }
+
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+
+    gl.useProgram(this.program_);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+    gl.enableVertexAttribArray(this.positionLocation);
+    gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
+    gl.enableVertexAttribArray(this.texcoordLocation);
+    gl.vertexAttribPointer(this.texcoordLocation, 2, gl.FLOAT, false, 0, 0);
+
+    // matrix for converting pixels to clip space
+    let matrix = mat4.orthographic(0, width, 0, height, -1, 1);
+    matrix = mat4.translate(matrix, dstX, dstY, 0);
+    matrix = mat4.scale(matrix, dstWidth, dstHeight, 1);
+    gl.uniformMatrix4fv(this.matrixLocation, false, matrix);
+
+    let texMatrix = mat4.translation(srcX / texWidth, srcY / texHeight, 0);
+    texMatrix = mat4.scale(
+      texMatrix,
+      srcWidth / texWidth,
+      srcHeight / texHeight,
+      1,
+    );
+
+    gl.uniformMatrix4fv(this.textureMatrixLocation, false, texMatrix);
+    gl.uniform1i(this.textureLocation, 0);
+    gl.drawArrays(gl.TRIANGLES, 0, this.positions.length / 2);
+  }
+}
+
+/**
+ * @param {WebGLRenderingContext} gl Rendering Context.
+ * @param {GLenum} type Type of shader.
+ * @param {string} source source of shader.
+ * @return {WebGLShader} [progam] The program.
+ */
+function createShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  if (shader === null) {
+    throw new Error('Shader compilation failed');
+  }
+
+  gl.shaderSource(shader, source);
+
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    if (log === null) {
+      throw new Error('Shader info log creation failed');
+    }
+    throw new Error(log);
+  }
+
+  return shader;
+}
+
+/**
+ * @param {WebGLRenderingContext} gl Rendering Context.
+ * @param {string} fragmentSource Fragment shader source.
+ * @param {string} vertexSource Vertex shader source.
+ * @return {WebGLProgram} [progam] The program.
+ */
+export function createProgram(gl, fragmentSource, vertexSource) {
+  const program = gl.createProgram();
+
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  if (program === null) {
+    throw new Error('Program creation failed');
+  }
+
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    if (log === null) {
+      throw new Error('Program info log creation failed');
+    }
+    throw new Error();
+  }
+  return program;
+}