https://github.com/ryohey/webgl-react

webgl-react is a React library for 2D rendering in WebGL with screen coordinates.
https://github.com/ryohey/webgl-react

Last synced: 16 days ago
JSON representation

webgl-react is a React library for 2D rendering in WebGL with screen coordinates.

• Host: GitHub
• URL: https://github.com/ryohey/webgl-react
• Owner: ryohey
• License: mit
• Created: 2022-05-30T23:34:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-25T15:44:32.000Z (5 months ago)
• Last Synced: 2024-10-14T09:53:07.561Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 15.2 MB
• Stars: 9
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webgl-react

webgl-react is a React library for 2D rendering in WebGL with screen coordinates.

[![npm version](https://badge.fury.io/js/@ryohey%2Fwebgl-react.svg)](https://badge.fury.io/js/@ryohey%2Fwebgl-react)

![Node.js CI](https://github.com/ryohey/webgl-react/workflows/Node.js%20CI/badge.svg)

## Why?

In react, drawing large numbers of shapes with divs, etc. is a very heavy process. webgl-react provides a React component that uses WebGL to draw large numbers of shapes in a single draw call.

webgl-react uses different shaders for different shapes. If you do not find the shape you need, you can write your own shaders, please read the [Custom Shape](#custom-shape) section.

## Example

```ts

import { BorderedCircles, GLCanvas, Rectangles } from "@ryohey/webgl-react"

export const App = () => {

  const rects = [

    {

      x: 100,

      y: 200,

      width: 30,

      height: 50,

    },

  ]

  const circleRects = [

    {

      x: 10,

      y: 50,

      width: 10,

      height: 10,

    },

  ]

  return (

    <>

      
WebGL React

      

        

        

      

    >

  )

}

```


## GLCanvas

GLCanvas is a wrapper for the canvas component. You can use any of the canvas props.

## Shapes

- Rectangles

- BorderedRectangles

- BorderedCircles

## [Custom Shape](custom-shape)

1. Write a GLSL shader and pass it to `new Shader()`

2. Create a subclass of `InstancedBuffer` that matches the shader attributes

3. Create a wrapper for the `GLNode` component by passing them to `createShader` and `createBuffer`

## Transform

Specifies the transformation matrix to be applied to the child component. The specified transformation matrix will be multiplied by the projection matrix provided by `useProjectionMatrix`.

## Hooks

### useProjectionMatrix

Gets the projection matrix that the figure component reads internally. GLCanvas provides by default a matrix of orthographic projections that translates to the screen coordinate system.

### useRenderer (internal)

Gets the Renderer class responsible for WebGL rendering. Usually not used outside of the library.