PixiJS
An Introduction
But first, WebGL
- It's an API for using the GPU to render 2D and 3D content onto a <canvas>
- Control code is written in JavaScript, shader code is written in GLSL (OpenGL Shading Language)
- Based on OpenGL ES
What is it used for?
- Interactive 3D (or fancy 2D) experiences
- Modeling (of objects, spaces, etc.)
- Data visualization and simulations
- Games (my personal favorite tbh)
Oh hey, support for this is pretty good.
Alright, on to PixiJS
Basically, it's an abstraction layer that sits on top of the WebGL/Canvas api.
const app = new PIXI.Application();
const graphics = new PIXI.Graphics();
// Just a lil rectangle, nbd
graphics.beginFill(0xDE3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();
app.stage.addChild(graphics);
document.body.appendChild(app.view);
Rainforest Foods:
https://rainforestfoods.com/experience
Gateway:
https://experience.practicalvr.com
Art4GlobalGoals:
https://art4globalgoals.com/en