Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@plotly/regl

Package Overview
Dependencies
Maintainers
11
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@plotly/regl

regl is a fast functional WebGL framework.

  • 2.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
165K
decreased by-3.66%
Maintainers
11
Weekly downloads
 
Created

What is @plotly/regl?

@plotly/regl is a package that provides a functional abstraction for WebGL, making it easier to create complex visualizations and graphics in the browser. It is particularly useful for creating high-performance, interactive 2D and 3D graphics.

What are @plotly/regl's main functionalities?

Drawing a Simple Triangle

This code demonstrates how to draw a simple red triangle using @plotly/regl. It sets up the fragment and vertex shaders, defines the triangle's vertices, and renders it in a loop.

const regl = require('@plotly/regl')();

const drawTriangle = regl({
  frag: `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1, 0, 0, 1); // Red color
  }
  `,
  vert: `
  precision mediump float;
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0, 1);
  }
  `,
  attributes: {
    position: [
      [-1, 0],
      [0, -1],
      [1, 1]
    ]
  },
  count: 3
});

regl.frame(() => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  });
  drawTriangle();
});

Creating a 3D Cube

This code demonstrates how to create and render a rotating 3D cube using @plotly/regl. It sets up the shaders, defines the cube's vertices and faces, and uses a perspective projection to render the cube in 3D space.

const regl = require('@plotly/regl')();
const mat4 = require('gl-mat4');

const drawCube = regl({
  frag: `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(0, 0, 1, 1); // Blue color
  }
  `,
  vert: `
  precision mediump float;
  attribute vec3 position;
  uniform mat4 model, view, projection;
  void main() {
    gl_Position = projection * view * model * vec4(position, 1);
  }
  `,
  attributes: {
    position: [
      [-1, -1, -1], [1, -1, -1], [1, 1, -1], [-1, 1, -1],
      [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1]
    ]
  },
  elements: [
    [0, 1, 2], [2, 3, 0],
    [4, 5, 6], [6, 7, 4],
    [0, 1, 5], [5, 4, 0],
    [2, 3, 7], [7, 6, 2],
    [0, 3, 7], [7, 4, 0],
    [1, 2, 6], [6, 5, 1]
  ],
  uniforms: {
    model: mat4.identity([]),
    view: ({tick}) => mat4.lookAt([], [Math.cos(tick * 0.01) * 5, 2.5, Math.sin(tick * 0.01) * 5], [0, 0, 0], [0, 1, 0]),
    projection: ({viewportWidth, viewportHeight}) => mat4.perspective([], Math.PI / 4, viewportWidth / viewportHeight, 0.01, 1000)
  }
});

regl.frame(() => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  });
  drawCube();
});

Other packages similar to @plotly/regl

Keywords

FAQs

Package last updated on 15 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc