Pixi3D is a 3D rendering library for the web. It's built on top of PixiJS (which is at it's core, an established 2D rendering library). This makes Pixi3D have seamless integration with already existing 2D applications.
Let's create a simple application which renders a rotating cube. Start by getting the latest version of Pixi3D. Also get an up-to-date version of PixiJS (v5.3+) which is needed to use Pixi3D.
Next, create a file app.js with the following contents.
let app = new PIXI.Application({
backgroundColor: 0xdddddd, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)
let mesh = app.stage.addChild(PIXI3D.Mesh3D.createCube())
PIXI3D.LightingEnvironment.main.lights.push(
Object.assign(new PIXI3D.Light(), { x: -1, z: 3 }))
let rotation = 0
app.ticker.add(() => {
mesh.rotationQuaternion.setEulerAngles(0, rotation++, 0)
})
Then create index.html and include the required scripts.
<!doctype html>
<html lang="en">
<body>
<script type="text/javascript" src="pixi.js"></script>
<script type="text/javascript" src="pixi3d.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Pixi3D is also available as a npm package. Install the latest release with npm install pixi3d --save-dev. This requires that an up-to-date version of Node.js is already installed.
Examples are available as sandboxes at https://codesandbox.io to quickly get started.
| Example | Description | Sandbox |
|---|---|---|
| Getting started | Create application, rotating cube | View |
| Standard material | Load glTF model, image-based lighting, physically-based rendering | View |
| Animation | Model animation, dynamic shadows | View |
| Custom material | Custom material/shader | View |
| Sprites | Billboard sprites in 3D space | View |
| Punctual lights | Directional light, spot light, point light | View |
| Custom geometry | Mesh with custom vertex attributes | View |
| Interaction | Mesh picking | View |
| Post processing | Post processing sprite with filters | View |
An introduction to Pixi3D and a overview of the core concepts and components. Go to the Quick guide sandbox to view a real-time demo of the scene created with this guide.
The quickest way to get started is by creating an PixiJS application object. The application object creates a renderer and automatically starts the render loop. It also creates a canvas element which should be added to the HTML document.
let app = new PIXI.Application({
resizeTo: window, backgroundColor: 0xdddddd, antialias: true
});
document.body.appendChild(app.view);
Creates an application and adds the canvas element which results in an empty page with a grey background.
A model includes a hierarchy of 3D objects which are called meshes. A mesh contains the geometry and material used for rendering that object. Models are generally being loaded from a file which has been created in a 3D modeling tool like Maya or Blender. Pixi3D supports loading of models using the glTF 2.0 file format. Learn more about glTF at https://www.khronos.org/gltf/
app.loader.add(
"teapot.gltf",
"https://raw.githubusercontent.com/jnsmalm/pixi3d-sandbox/master/assets/teapot/teapot.gltf"
);
app.loader.load((_, resources) => {
let teapot = app.stage.addChild(
PIXI3D.Model.from(resources["teapot.gltf"].gltf));
})
Loads a glTF 2.0 file and creates a model. The silhouette of a teapot should appear. For now, it will be rendered black because there is no lighting.
All objects in a scene have a transform which is used for setting the position, rotation and scale of that object. The transform of an object is always relative to it's parent transform. So when changing the transform of the parent object, all of it's childrens transforms will be affected as well.
Both position and scale is represented by a vector with three components (x, y, z), one for each axis. Rotation is represented by a quaternion and has four components (x, y, z, w). A quaternion is not as straight forward to use as a vector, and because of that the method setEulerAngles is used to change the rotation.
teapot.position.y = -1;
teapot.scale.set(1.2);
teapot.rotationQuaternion.setEulerAngles(0, 15, 0);
Moves the model to -1 on the y-axis. Rotates it to 15 degrees on the y-axis and scales it on all axes.
Lights are needed to illuminate the objects in the scene, otherwise they may be rendered completely black (depending on the material being used). A lighting environment contains the different components used for lighting a scene. The lighting environment can be shared across objects, or each object can have it's own. The main lighting environment is created and used by default.
There are a few different types of lights available. The "point" type is a light that is located at a point and emits light in all directions equally. The "directional" type is a light that is located infinitely far away, and emits light in one direction only. The "spot" type is a light that is located at a point and emits light in a cone shape. Lights have a transform and can be attached to other objects.
let dirLight = Object.assign(new PIXI3D.Light(), {
type: "directional", intensity: 0.5, x: -4, y: 7, z: -4
});
dirLight.rotationQuaternion.setEulerAngles(45, 45, 0);
PIXI3D.LightingEnvironment.main.lights.push(dirLight);
let pointLight = Object.assign(new PIXI3D.Light(), {
type: "point", intensity: 10, range: 5, x: 1, y: 0, z: 3
});
PIXI3D.LightingEnvironment.main.lights.push(pointLight);
Adds a directional light and a point light to the main lighting environment. The teapot should now be illuminated by the light.
Each mesh contains a material, and the standard material is used by default. The standard material has several properties which can be used for changing the appearance of a mesh. It's also possible to create custom materials to achieve almost any visual effect.
teapot.meshes.forEach((mesh) => {
mesh.material.baseColor = PIXI3D.Color.fromHex("#ffefd5");
});
Gives the model a different color by setting the material color of each mesh.
Models can contain animations which has been created in a 3D modeling tool. There are three different kinds of animations: skeletal, morphing and transformation. Skeletal animation is often used for animating characters, but it can also be used to animate anything else as well. Morphing is used to animate per-vertex, for example to create a waving flag or a face expression. Transformation animations are used for moving, rotating and scaling entire objects.
setInterval(() => {
teapot.animations.forEach((anim) => anim.play());
}, 1500);
Starts playing all animations in the model every 1.5 seconds.
To enable lights to cast shadows, a shadow casting light is required. It wraps a light and gives it the ability to cast shadows. It has multiple settings for controlling the quality of the shadow, for example the size of the shadow texture and the softness of the shadow. Directional and spot light types have support for casting shadows.
let ground = app.stage.addChild(PIXI3D.Mesh3D.createPlane());
ground.y = -1;
ground.scale.set(10);
Creates a ground plane to have something to cast the shadows on.
The shadows must also be enabled (using the standard pipeline) for an object to both receive and cast shadows.
let shadowCastingLight = new PIXI3D.ShadowCastingLight(app.renderer, dirLight, {
shadowTextureSize: 512,
quality: PIXI3D.ShadowQuality.medium
});
shadowCastingLight.softness = 1;
shadowCastingLight.shadowArea = 8;
let pipeline = app.renderer.plugins.pipeline;
pipeline.enableShadows(teapot, shadowCastingLight);
pipeline.enableShadows(ground, shadowCastingLight);
Enables shadows to be casted and received for both the model and the ground.
Compositing 2D (PixiJS) and 3D (Pixi3D) containers is simple and can be combined in many ways. 2D containers can be added on top of 3D containers, and the other way around. Although the containers can be combined, the transforms used by 2D and 3D works differently from each other and are not compatible. The transforms won't be affected by each other, even if they have a parent-child relation.
To be able to convert 3D coordinates to 2D coordinates (or the other way around) the camera methods screenToWorld and worldToScreen can be used.
Another way of combining 2D and 3D objects is to render a 3D object as a sprite using PostProcessingSprite. Thay way, the 3D object can easily be positioned in 2D space. This method also makes it possible to use regular PixiJS filters with 3D objects.
let vignette = app.stage.addChild(
PIXI.Sprite.from(
"https://raw.githubusercontent.com/jnsmalm/pixi3d-sandbox/master/assets/vignette.png"
)
);
app.ticker.add(() => {
Object.assign(vignette, {
width: app.renderer.width, height: app.renderer.height
});
});
Adds a 2D vignette layer on top of the 3D scene to give it a more cinematic effect. Resizes the vignette to the size of the renderer.
The camera is used for controlling from which position and direction the 3D scene is rendered, it has a position and rotation which is used for changing the view. Like any other object which has a transform, it can be attached to another object. The camera can also be directly controlled by using a mouse or trackpad. The main camera is created and used by default.
let control = new PIXI3D.CameraOrbitControl(app.view)
Gives the user orbit control over the main camera using mouse/trackpad. Hold left mouse button and drag to orbit, use scroll wheel to zoom in/out.
The API documentation is available at https://api.pixi3d.org
For developing new features or fixing bugs, use serve/src/index.js with npm run serve.
Build to dist folder with npm run build.
[1.1.0] - 2021-11-20
StandardMaterial.FAQs
The 3D renderer for PixiJS. Seamless integration with 2D applications.
We found that pixi3d demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.