I2Djs-v5
  • Introduction to I2Djs
  • Getting Started
    • Installation
    • Quick Start
    • Resources
  • Guide
    • Canvas: Create-animate
    • SVG: Create-animate
    • WebGL: Create-animate
    • PDF: Create
    • Data Join-Action
    • Animation-Chaining
    • Canvas: Textures & Sprite animation
    • Canvas: Heatmap
    • WebGL: Heatmap
    • WebGL: Custom Shaders
    • Canvas: GeoWorld Map with D3 modules
    • Canvas: Clipping, Masking, Pattern
    • SVG: Clipping, Masking, Pattern
    • I2Djs + Physics Engine - MatterJs
  • API Reference
    • Layers
      • Canvas Layer
      • SVG Layer
      • WebGL Layer
    • Elements API
    • Canvas additional features
    • WebGL additional features
      • Custom Shader
      • Geometry
      • Render Target
      • Texture Object
    • Join Action
    • Animation
    • Chaining
    • Path
    • Events
    • Behaviour
      • Zoom and Pan
      • Drag
  • Examples
    • PDF
    • Canvas
    • SVG
    • WebGL
Powered by GitBook
On this page
  • Mesh Geometry:
  • Line Geometry:
  • Points Geometry:
  1. API Reference
  2. WebGL additional features

Geometry

I2Djs provides a way to define custom geometry using a set of inbuilt geometry APIs. Geometries are used along with custom shader to create out of the box effects.

I2Djs provides APIs for Mesh, line, and points geometry.

Mesh Geometry:

Used for rendering mesh geometrical polygons. Default drawType is 'TRIANGLES'. Possible values are 'TRIANGLES' , 'TRIANGLE_STRIP' and 'TRIANGLE_FAN'.

meshInstance = new MeshGeometry();

Example of Mesh Geometry:

meshInstance = new MeshGeometry();

geometry.setAttr('a_position', {
		value: new Float32Array([]),
		size: 2
	});
	
geometry.setDrawRange(0, 6);

Line Geometry:

Used for rendering Line geometrical entities like lines, polylines. Default drayType is 'LINE'. Possible values are 'LINE', 'LINE_STRIP' and 'LINE_LOOP'.

lineInstance = new LineGeometry();

Example of Line Geometry :

lineInstance = new LineGeometry();

geometry.setAttr('a_position', {
		value: new Float32Array([]),
		size: 2
	});
	
geometry.setDrawRange(0, 6);

Points Geometry:

Used in rendering points. Default drawType is 'POINT'.

geometry = new PointsGeometry();

Example of Points Geometry :

geometry = new PointsGeometry();
geometry.setAttr('a_color', {
		value: new Float32Array([255,255,255,255]),
		size: 4
	});
geometry.setAttr('a_size', {
		value: new Float32Array([10]),
		size: 1
	});
geometry.setAttr('a_position', {
		value: new Float32Array([30,40]),
		size: 2
	});

PreviousCustom ShaderNextRender Target