ol 10.2.2-dev.1727715662036 → 10.2.2-dev.1727720556228

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;
+}