TypeScript gloo2.Program类代码示例

  init() {

    const { gl } = this;
    const frag = this.FRAG.replace(/MARKERCODE/, this.MARKERCODE);

    this.last_trans = {};  // Keep track of transform

    // The program
    this.prog = new Program(gl);
    this.prog.set_shaders(this.VERT, frag);
    // Real attributes
    this.vbo_x = new VertexBuffer(gl);
    this.prog.set_attribute('a_x', 'float', this.vbo_x);
    this.vbo_y = new VertexBuffer(gl);
    this.prog.set_attribute('a_y', 'float', this.vbo_y);
    this.vbo_s = new VertexBuffer(gl);
    this.prog.set_attribute('a_size', 'float', this.vbo_s);
    this.vbo_a = new VertexBuffer(gl);
    this.prog.set_attribute('a_angle', 'float', this.vbo_a);
    // VBO's for attributes (they may not be used if value is singleton)
    this.vbo_linewidth = new VertexBuffer(gl);
    this.vbo_fg_color = new VertexBuffer(gl);
    this.vbo_bg_color = new VertexBuffer(gl);
    return this.index_buffer = new IndexBuffer(gl);
  }

  protected init(): void {
    const {gl} = this

    const vert = vertex_shader
    const frag = fragment_shader(this._marker_code)

    // The program
    this.prog = new Program(gl)
    this.prog.set_shaders(vert, frag)
    // Real attributes
    this.vbo_x = new VertexBuffer(gl)
    this.prog.set_attribute('a_x', 'float', this.vbo_x)
    this.vbo_y = new VertexBuffer(gl)
    this.prog.set_attribute('a_y', 'float', this.vbo_y)
    this.vbo_s = new VertexBuffer(gl)
    this.prog.set_attribute('a_size', 'float', this.vbo_s)
    this.vbo_a = new VertexBuffer(gl)
    this.prog.set_attribute('a_angle', 'float', this.vbo_a)
    // VBO's for attributes (they may not be used if value is singleton)
    this.vbo_linewidth = new VertexBuffer(gl)
    this.vbo_fg_color = new VertexBuffer(gl)
    this.vbo_bg_color = new VertexBuffer(gl)
    this.index_buffer = new IndexBuffer(gl)
  }

    init(): void {
      const {gl} = this;
      this._scale_aspect = 0;  // keep track, so we know when we need to update segment data

      // The program
      this.prog = new Program(gl);
      this.prog.set_shaders(this.VERT, this.FRAG);
      this.index_buffer = new IndexBuffer(gl);
      // Buffers
      this.vbo_position = new VertexBuffer(gl);
      this.vbo_tangents = new VertexBuffer(gl);
      this.vbo_segment = new VertexBuffer(gl);
      this.vbo_angles = new VertexBuffer(gl);
      this.vbo_texcoord = new VertexBuffer(gl);
      // Dash atlas
      this.dash_atlas = new DashAtlas(gl);
    }

 protected _set_visuals(nvertices: number): void {
   attach_float(this.prog, this.vbo_linewidth, 'a_linewidth', nvertices, this.glyph.visuals.line, 'line_width')
   attach_color(this.prog, this.vbo_fg_color, 'a_fg_color', nvertices, this.glyph.visuals.line, 'line')
   attach_color(this.prog, this.vbo_bg_color, 'a_bg_color', nvertices, this.glyph.visuals.fill, 'fill')
   // Static value for antialias. Smaller aa-region to obtain crisper images
   this.prog.set_uniform('u_antialias', 'float', [0.8])
 }

  draw(indices: number[], mainGlyph: MarkerView | CircleView, trans: Transform): void {
    // The main glyph has the data, *this* glyph has the visuals.
    const mainGlGlyph = mainGlyph.glglyph
    const {nvertices} = mainGlGlyph

    // Upload data if we must. Only happens for main glyph.
    if (mainGlGlyph.data_changed) {
      if (!(isFinite(trans.dx) && isFinite(trans.dy))) {
        return;  // not sure why, but it happens on init sometimes (#4367)
      }
      mainGlGlyph._baked_offset = [trans.dx, trans.dy];  // float32 precision workaround; used in _set_data() and below
      mainGlGlyph._set_data(nvertices)
      mainGlGlyph.data_changed = false
    } else if (this.glyph instanceof CircleView && this.glyph._radius != null &&
               (this.last_trans == null || trans.sx != this.last_trans.sx || trans.sy != this.last_trans.sy)) {
      // Keep screen radius up-to-date for circle glyph. Only happens when a radius is given
      this.last_trans = trans
      this.vbo_s.set_data(0, new Float32Array(map(this.glyph.sradius, (s) => s*2)))
    }

    // Update visuals if we must. Can happen for all glyphs.
    if (this.visuals_changed) {
      this._set_visuals(nvertices)
      this.visuals_changed = false
    }

    // Handle transformation to device coordinates
    // Note the baked-in offset to avoid float32 precision problems
    const baked_offset = mainGlGlyph._baked_offset
    this.prog.set_uniform('u_pixel_ratio', 'float', [trans.pixel_ratio])
    this.prog.set_uniform('u_canvas_size', 'vec2', [trans.width, trans.height])
    this.prog.set_uniform('u_offset', 'vec2', [trans.dx - baked_offset[0], trans.dy - baked_offset[1]])
    this.prog.set_uniform('u_scale', 'vec2', [trans.sx, trans.sy])

    // Select buffers from main glyph
    // (which may be this glyph but maybe not if this is a (non)selection glyph)
    this.prog.set_attribute('a_x', 'float', mainGlGlyph.vbo_x)
    this.prog.set_attribute('a_y', 'float', mainGlGlyph.vbo_y)
    this.prog.set_attribute('a_size', 'float', mainGlGlyph.vbo_s)
    this.prog.set_attribute('a_angle', 'float', mainGlGlyph.vbo_a)

    // Draw directly or using indices. Do not handle indices if they do not
    // fit in a uint16; WebGL 1.0 does not support uint32.
    if (indices.length == 0)
      return
    else if (indices.length === nvertices)
      this.prog.draw(this.gl.POINTS, [0, nvertices])
    else if (nvertices < 65535) {
      // On IE the marker size is reduced to 1 px when using an index buffer
      // A MS Edge dev on Twitter said on 24-04-2014: "gl_PointSize > 1.0 works
      // in DrawArrays; gl_PointSize > 1.0 in DrawElements is coming soon in the
      // next renderer update.
      const ua = window.navigator.userAgent
      if ((ua.indexOf("MSIE ") + ua.indexOf("Trident/") + ua.indexOf("Edge/")) > 0) {
         logger.warn('WebGL warning: IE is known to produce 1px sprites whith selections.')
       }
      this.index_buffer.set_size(indices.length*2)
      this.index_buffer.set_data(0, new Uint16Array(indices))
      this.prog.draw(this.gl.POINTS, this.index_buffer)
    } else {
      // Work around the limit that the indexbuffer must be uint16. We draw in chunks.
      // First collect indices in chunks
      const chunksize = 64000;  // 65536
      const chunks: number[][] = []
      for (let i = 0, end = Math.ceil(nvertices/chunksize); i < end; i++) {
         chunks.push([])
      }
      for (let i = 0, end = indices.length; i < end; i++) {
        const uint16_index = indices[i] % chunksize
        const chunk = Math.floor(indices[i] / chunksize)
        chunks[chunk].push(uint16_index)
      }
      // Then draw each chunk
      for (let chunk = 0, end = chunks.length; chunk < end; chunk++) {
        const these_indices = new Uint16Array(chunks[chunk])
        const offset = chunk * chunksize * 4
        if (these_indices.length === 0) {
          continue
        }
        this.prog.set_attribute('a_x', 'float', mainGlGlyph.vbo_x, 0, offset)
        this.prog.set_attribute('a_y', 'float', mainGlGlyph.vbo_y, 0, offset)
        this.prog.set_attribute('a_size', 'float', mainGlGlyph.vbo_s, 0, offset)
        this.prog.set_attribute('a_angle', 'float', mainGlGlyph.vbo_a, 0, offset)
        if (this.vbo_linewidth.used) {
          this.prog.set_attribute('a_linewidth', 'float', this.vbo_linewidth, 0, offset)
        }
        if (this.vbo_fg_color.used) {
          this.prog.set_attribute('a_fg_color', 'vec4', this.vbo_fg_color, 0, offset * 4)
        }
        if (this.vbo_bg_color.used) {
          this.prog.set_attribute('a_bg_color', 'vec4', this.vbo_bg_color, 0, offset * 4)
        }
        // The actual drawing
        this.index_buffer.set_size(these_indices.length*2)
        this.index_buffer.set_data(0, these_indices)
        this.prog.draw(this.gl.POINTS, this.index_buffer)
      }
    }
  }

    _set_visuals() {

      const color = color2rgba(this.glyph.visuals.line.line_color.value(), this.glyph.visuals.line.line_alpha.value());
      const cap = this.CAPS[this.glyph.visuals.line.line_cap.value()];
      const join = this.JOINS[this.glyph.visuals.line.line_join.value()];

      this.prog.set_uniform('u_color', 'vec4', color);
      this.prog.set_uniform('u_linewidth', 'float', [this.glyph.visuals.line.line_width.value()]);
      this.prog.set_uniform('u_antialias', 'float', [0.9]);  // Smaller aa-region to obtain crisper images

      this.prog.set_uniform('u_linecaps', 'vec2', [cap, cap]);
      this.prog.set_uniform('u_linejoin', 'float', [join]);
      this.prog.set_uniform('u_miter_limit', 'float', [10.0]);  // 10 should be a good value
      // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit

      const dash_pattern = this.glyph.visuals.line.line_dash.value();
      let dash_index = 0; let dash_period = 1;
      if (dash_pattern.length) {
        [dash_index, dash_period] = this.dash_atlas.get_atlas_data(dash_pattern);
      }
      this.prog.set_uniform('u_dash_index', 'float', [dash_index]);  // 0 means solid line
      this.prog.set_uniform('u_dash_phase', 'float', [this.glyph.visuals.line.line_dash_offset.value()]);
      this.prog.set_uniform('u_dash_period', 'float', [dash_period]);
      this.prog.set_uniform('u_dash_caps', 'vec2', [cap, cap]);
      return this.prog.set_uniform('u_closed', 'float', [0]);  // We dont do closed lines
    }

    draw(indices, mainGlyph, trans) {
      const mainGlGlyph = mainGlyph.glglyph;

      if (mainGlGlyph.data_changed) {
        if (!(isFinite(trans.dx) && isFinite(trans.dy))) {
          return;  // not sure why, but it happens on init sometimes (#4367)
        }
        mainGlGlyph._baked_offset = [trans.dx, trans.dy];  // float32 precision workaround; used in _bake() and below
        mainGlGlyph._set_data();
        mainGlGlyph.data_changed = false;
      }
      if (this.visuals_changed) {
        this._set_visuals();
        this.visuals_changed = false;
      }

      // Decompose x-y scale into scalar scale and aspect-vector.
      let { sx } = trans; let { sy } = trans;
      const scale_length = Math.sqrt((sx * sx) + (sy * sy));
      sx /= scale_length; sy /= scale_length;

      // Do we need to re-calculate segment data and cumsum?
      if (Math.abs(this._scale_aspect - (sy / sx)) > Math.abs(1e-3 * this._scale_aspect)) {
        mainGlGlyph._update_scale(sx, sy);
        this._scale_aspect = sy / sx;
      }

      // Select buffers from main glyph
      // (which may be this glyph but maybe not if this is a (non)selection glyph)
      this.prog.set_attribute('a_position', 'vec2', mainGlGlyph.vbo_position);
      this.prog.set_attribute('a_tangents', 'vec4', mainGlGlyph.vbo_tangents);
      this.prog.set_attribute('a_segment', 'vec2', mainGlGlyph.vbo_segment);
      this.prog.set_attribute('a_angles', 'vec2', mainGlGlyph.vbo_angles);
      this.prog.set_attribute('a_texcoord', 'vec2', mainGlGlyph.vbo_texcoord);
      //
      this.prog.set_uniform('u_length', 'float', [mainGlGlyph.cumsum]);
      this.prog.set_texture('u_dash_atlas', this.dash_atlas.tex);

      // Handle transformation to device coordinates
      const baked_offset = mainGlGlyph._baked_offset;
      this.prog.set_uniform('u_pixel_ratio', 'float', [trans.pixel_ratio]);
      this.prog.set_uniform('u_canvas_size', 'vec2', [trans.width, trans.height]);
      this.prog.set_uniform('u_offset', 'vec2', [trans.dx - baked_offset[0], trans.dy - baked_offset[1]]);
      this.prog.set_uniform('u_scale_aspect', 'vec2', [sx, sy]);
      this.prog.set_uniform('u_scale_length', 'float', [scale_length]);

      this.I_triangles = mainGlGlyph.I_triangles;
      if (this.I_triangles.length < 65535) {
        // Data is small enough to draw in one pass
        this.index_buffer.set_size(this.I_triangles.length*2);
        this.index_buffer.set_data(0, new Uint16Array(this.I_triangles));
        return this.prog.draw(this.gl.TRIANGLES, this.index_buffer);
        // @prog.draw(@gl.LINE_STRIP, @index_buffer)  # Use this to draw the line skeleton
      } else {
        // Work around the limit that the indexbuffer must be uint16. We draw in chunks.
        // First collect indices in chunks
        indices = this.I_triangles;
        const nvertices = this.I_triangles.length;
        const chunksize = 64008;  // 65536 max. 64008 is divisible by 12
        const chunks = [];
        for (let i = 0, end = Math.ceil(nvertices/chunksize); i < end; i++) {
           chunks.push([]);
        }
        for (let i = 0, end = indices.length; i < end; i++) {
          const uint16_index = indices[i] % chunksize;
          const chunk = Math.floor(indices[i] / chunksize);
          chunks[chunk].push(uint16_index);
        }
        // Then draw each chunk
        for (let chunk = 0, end = chunks.length; chunk < end; chunk++) {
          const these_indices = new Uint16Array(chunks[chunk]);
          const offset = chunk * chunksize * 4;
          if (these_indices.length === 0) {
            continue;
          }
          this.prog.set_attribute('a_position', 'vec2', mainGlGlyph.vbo_position, 0, offset * 2);
          this.prog.set_attribute('a_tangents', 'vec4', mainGlGlyph.vbo_tangents, 0, offset * 4);
          this.prog.set_attribute('a_segment', 'vec2', mainGlGlyph.vbo_segment, 0, offset * 2);
          this.prog.set_attribute('a_angles', 'vec2', mainGlGlyph.vbo_angles, 0, offset * 2);
          this.prog.set_attribute('a_texcoord', 'vec2', mainGlGlyph.vbo_texcoord, 0, offset * 2);
          // The actual drawing
          this.index_buffer.set_size(these_indices.length*2);
          this.index_buffer.set_data(0, these_indices);
          this.prog.draw(this.gl.TRIANGLES, this.index_buffer);
        }
      }
    }