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

pixi3d

Package Overview
Dependencies
Maintainers
1
Versions
45
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pixi3d - npm Package Compare versions

Comparing version 0.9.9 to 1.0.0

types/debug.d.ts
types/message.d.ts

13

CHANGELOG.md

@@ -7,2 +7,15 @@ # Changelog

## [1.0.0] - 2021-11-01
### Added
- Debug object which can be used to more easily debug on mobile devices.
### Changed
- Vertex skinning now uses textures for joint matrices as default.
- Better error handling when vertex skinning is not supported on device/environment.
- Use lower case for `SpriteBillboardType` "spherical" and "cylindrical".
### Fixed
- Fixed an issue which caused shadows to be displayed incorrectly when using multiple lights.
- Fixed an issue which caused a crash if application/renderer was destroyed.
## [0.9.9] - 2021-09-30

@@ -9,0 +22,0 @@ ### Added

15

package.json
{
"name": "pixi3d",
"version": "0.9.9",
"version": "1.0.0",
"description": "The 3D renderer for PixiJS. Seamless integration with 2D applications.",

@@ -14,6 +14,7 @@ "main": "dist/pixi3d.js",

"prepare": "rimraf dist types && npm run build",
"serve": "webpack-dev-server --open --config examples/example.config.js",
"docs": "typedoc src/index.ts",
"serve": "webpack-dev-server --open --config serve/serve.config.js",
"docs": "typedoc",
"preversion": "npm run build",
"version": "npm run docs && git add . && git reset -- docs/CNAME"
"version": "npm run docs && git add . && git reset -- docs/CNAME",
"test": "webpack-dev-server --open --config test/webpack.config.js"
},

@@ -31,3 +32,7 @@ "repository": {

"devDependencies": {
"chai": "^4.3.4",
"gl-matrix": "^3.3.0",
"mocha": "^9.1.3",
"mocha-loader": "^5.1.5",
"pixelmatch": "^5.2.1",
"pixi.js": "^6.0.2",

@@ -37,3 +42,3 @@ "rimraf": "^3.0.2",

"tslib": "^2.3.0",
"typedoc": "^0.17.0-3",
"typedoc": "^0.22.6",
"typescript": "^4.2.4",

@@ -40,0 +45,0 @@ "url-loader": "^3.0.0",

160

README.md
# Pixi3D
Pixi3D is a JavaScript library which makes it easy to render 3D graphics on the web. It works for both desktop and mobile web browsers and includes several components which makes it easy to create nice looking 3D scenes out-of-the-box:
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.
* Load models from file (glTF) or create procedural generated meshes
* Physically-based rendering (PBR) and image-based lighting (IBL)
* Customized materials and shaders
* 3D sprites
* Transformation, morphing and skeletal animations
* Customized materials and shaders
* Sprites in 3D
* Built on top of PixiJS, seamless integration with 2D applications.

@@ -46,22 +45,22 @@ ## Getting started

### Install with npm
Pixi3D is also available as a npm package, to install the latest release you can run the following command:
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.
`npm install pixi3d --save-dev`
## Examples
Examples are available as sandboxes at https://codesandbox.io to quickly get started.
This requires that an up-to-date version of Node.js is already installed.
| Example | Description | Sandbox |
|-------------------|-------------------------------------------------------------------------|:-------:|
| Getting started | Create application, rotating cube | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/getting-started) |
| Standard material | Load glTF model, image-based lighting, physically-based rendering | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/standard-material) |
| Animation | Model animation, dynamic shadows | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/model-animation) |
| Custom material | Custom material/shader | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/custom-material) |
| Sprites | Billboard sprites in 3D space | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/sprites-3d) |
| Punctual lights | Directional light, spot light, point light | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/punctual-lights) |
| Custom geometry | Mesh with custom vertex attributes | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/custom-geometry) |
| Interaction | Mesh picking | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/mesh-interaction) |
| Post processing | Post processing sprite with filters | [View](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/post-processing-sprite) |
### Examples
The source code includes a collection of examples which shows how to use some of the different features of Pixi3D. To be able to run the examples, download or clone the repository from https://github.com/jnsmalm/pixi3d and run *npm install*. Browse the examples inside the *examples/src* folder and run them using the *serve* script. For example, to run the *getting-started* application:
`npm run serve -- --env.example=getting-started`
The *serve* script can also be used for trying out Pixi3D without having to do any additional setup. Just create a new file i.e. *testing-feature.js* in the examples folder and run it with the *serve* script:
`npm run serve -- --env.example=testing-feature`
## Quick guide
The overall goal of Pixi3D is to make it easy to render 3D graphics on the web. It's built on top of PixiJS, which is at it's core, an established 2D rendering library. Even though Pixi3D targets developers already familiar and productive using PixiJS, it's easy to get started without any previous knowledge of PixiJS. PixiJS contains many features which makes it easier to create interactive graphic intense applications. For example: loading assets, managing a scene graph or handling user interaction. Because Pixi3D is built on top of PixiJS, all of those features are available in Pixi3D as well. Learn more about PixiJS at https://www.pixijs.com
An introduction to Pixi3D and a overview of the core concepts and components. Go to the [Quick guide sandbox](https://codesandbox.io/s/github/jnsmalm/pixi3d-sandbox/tree/master/quick-guide) to view a real-time demo of the scene created with this guide.
Go to https://pixi3d.org/demo/drone/ to view a real-time demo of the scene created with this guide. The source code is available at [examples/src/quick-guide.js](examples/src/quick-guide.js) and assets used can be found in the examples/assets folder.
### Creating an application

@@ -72,27 +71,24 @@ 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({
backgroundColor: 0x555555, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)
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 dark-grey background.*
page with a grey background.*
### Loading a 3D model
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.
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/
> glTF™ (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications. glTF minimizes both the size of 3D assets, and the runtime processing needed to unpack and use those assets. glTF defines an extensible, common publishing format for 3D content tools and services that streamlines authoring workflows and enables interoperable use of content across the industry.
Learn more about glTF at https://www.khronos.org/gltf/
For testing purposes and to get started more quickly, glTF 2.0 sample models can be found at https://github.com/KhronosGroup/glTF-Sample-Models. The specific model used in this guide was downloaded from [Sketchfab](https://skfb.ly/TBnX). License: [Creative Commons Attribution-NonCommercial](https://creativecommons.org/licenses/by-nc/4.0/)
```javascript
app.loader.add("assets/buster_drone/scene.gltf")
app.loader.add(
"teapot.gltf",
"https://raw.githubusercontent.com/jnsmalm/pixi3d-sandbox/master/assets/teapot/teapot.gltf"
);
app.loader.load((loader, resources) => {
let model = app.stage.addChild(
PIXI3D.Model.from(resources["assets/buster_drone/scene.gltf"].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 drone should appear. For now, it will be rendered black because there is no lighting.*
*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.*

@@ -102,10 +98,10 @@ ### Position, rotation and scale

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, because of that there is a method *setEulerAngles* used for changing the rotation.
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.
```javascript
model.position.y = 0.3
model.scale.set(2)
model.rotationQuaternion.setEulerAngles(0, 25, 0)
teapot.position.y = -1;
teapot.scale.set(1.2);
teapot.rotationQuaternion.setEulerAngles(0, 15, 0);
```
*Moves the model to 0.3 on the y-axis. Rotates it to 25 degrees on the y-axis and scales it on all axes.*
*Moves the model to -1 on the y-axis. Rotates it to 15 degrees on the y-axis and scales it on all axes.*

@@ -115,3 +111,3 @@ ### Lighting environment

There are two different kinds of lights which can be used, and punctual lights is one of them. There are a few types of punctual 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.
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.

@@ -121,37 +117,58 @@ ```javascript

type: "directional", intensity: 0.5, x: -4, y: 7, z: -4
})
dirLight.rotationQuaternion.setEulerAngles(45, 45, 0)
PIXI3D.LightingEnvironment.main.lights.push(dirLight)
});
dirLight.rotationQuaternion.setEulerAngles(45, 45, 0);
PIXI3D.LightingEnvironment.main.lights.push(dirLight);
let pointLight = Object.assign(new PIXI3D.Light(), {
type: "point", x: -1, y: 0, z: 3, range: 10, intensity: 10
})
PIXI3D.LightingEnvironment.main.lights.push(pointLight)
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 drone should now be illuminated by the light.*
*Adds a directional light and a point light to the main lighting environment. The teapot should now be illuminated by the light.*
### Changing the material
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.
```javascript
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.*
### Playing animations
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. Transformation animations are used for moving, rotating and scaling entire objects.
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.
```javascript
model.animations[0].play()
setInterval(() => {
teapot.animations.forEach((anim) => anim.play());
}, 1500);
```
*Starts playing the first animation in the model.*
*Starts playing all animations in the model every 1.5 seconds.*
### Casting shadows
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. Both directional and spot light types have support for casting shadows.
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.
```javascript
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.
```javascript
let shadowCastingLight = new PIXI3D.ShadowCastingLight(app.renderer, dirLight, {
shadowTextureSize: 512, quality: PIXI3D.ShadowQuality.medium
})
shadowCastingLight.softness = 1
shadowCastingLight.shadowArea = 15
let pipeline = app.renderer.plugins.pipeline
pipeline.enableShadows(model, shadowCastingLight)
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);
```
*Creates a shadow casting light and enables it for the model using the standard pipeline.*
*Enables shadows to be casted and received for both the model and the ground.*

@@ -163,7 +180,10 @@ ### 2D and 3D

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 together with 2D objects. This method also makes it possible to use regular PixiJS filters with 3D objects.
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.
```javascript
let vignette = app.stage.addChild(
new PIXI.Sprite(PIXI.Texture.from("assets/vignette.png")))
PIXI.Sprite.from(
"https://raw.githubusercontent.com/jnsmalm/pixi3d-sandbox/master/assets/vignette.png"
)
);

@@ -173,4 +193,4 @@ app.ticker.add(() => {

width: app.renderer.width, height: app.renderer.height
})
})
});
});
```

@@ -190,6 +210,6 @@ *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.*

## Development
For developing new features or fixing bugs, use *serve/src/index.js* with `npm run serve`.
## Building
Build *dist/pixi3d.js* (for development) and *dist/pixi3d.min.js* (for production).
```
> npm run build
```
Build to *dist* folder with `npm run build`.

2

types/capabilities.d.ts
import { Renderer } from "pixi.js";
export declare namespace Capabilities {
function getMaxVertexUniformVectors(renderer: Renderer): number;
function isFloatTextureSupported(renderer: Renderer): boolean;
function isFloatingPointTextureSupported(renderer: Renderer): boolean;
function isHalfFloatFramebufferSupported(renderer: Renderer): boolean;

@@ -6,0 +6,0 @@ function isFloatFramebufferSupported(renderer: Renderer): boolean;

5

types/index.d.ts

@@ -30,2 +30,3 @@ export { glTFLoader } from "./loader/gltf-loader";

export { MaterialRenderSortType } from "./material/material-render-sort-type";
export { MaterialFactory } from "./material/material-factory";
export { TextureTransform } from "./texture/texture-transform";

@@ -51,3 +52,3 @@ export { CubemapLoader } from "./loader/cubemap-loader";

export { ShadowQuality } from "./shadow/shadow-quality";
export { PostProcessingSprite } from "./sprite/post-processing-sprite";
export { PostProcessingSprite, PostProcessingSpriteOptions } from "./sprite/post-processing-sprite";
export { Ray } from "./math/ray";

@@ -64,1 +65,3 @@ export { Plane } from "./math/plane";

export { SpriteBillboardType } from "./sprite/sprite-billboard-type";
export { RenderPass } from "./pipeline/render-pass";
export { Debug } from "./debug";

18

types/lighting/image-based-lighting.d.ts
import { Texture } from "pixi.js";
import { Cubemap } from "../cubemap/cubemap";
/**
* A collection of components used for image-based lighting (IBL).
* Collection of components used for image-based lighting (IBL), a
* rendering technique which involves capturing an omnidirectional representation
* of real-world light information as an image.
*/
export declare class ImageBasedLighting {
private _diffuse;
private _brdf;
private _specular;
/** The default BRDF integration map lookup texture. */
static defaultLookupBrdf: Texture<import("pixi.js").Resource>;
/** Cube texture used for the diffuse component. */
get diffuse(): Cubemap;
/** BRDF integration map lookup texture. */
get brdf(): Texture<import("pixi.js").Resource>;
/** Cube mipmap texture used for the specular component. */
get specular(): Cubemap;
/** BRDF integration map lookup texture. */
lookupBrdf?: Texture;
/**
* Creates a new image-based lighting object.
* @param diffuse Cube texture used for the diffuse component.
* @param specular Cube mipmap texture used for the specular component.
* @param brdf BRDF integration map lookup texture.
* @param diffuse Cubemap used for the diffuse component.
* @param specular Cubemap used for the specular component.
*/
constructor(diffuse: Cubemap, specular: Cubemap, brdf?: Texture);
constructor(diffuse: Cubemap, specular: Cubemap);
/**

@@ -24,0 +26,0 @@ * Value indicating if this object is valid to be used for rendering.

6

types/lighting/lighting-environment.d.ts

@@ -10,3 +10,4 @@ import { Renderer, IRendererPlugin } from "pixi.js";

renderer: Renderer;
private _imageBasedLighting?;
/** The image-based lighting object. */
imageBasedLighting?: ImageBasedLighting;
/** The lights affecting this lighting environment. */

@@ -21,6 +22,5 @@ lights: Light[];

constructor(renderer: Renderer, imageBasedLighting?: ImageBasedLighting);
get imageBasedLighting(): ImageBasedLighting | undefined;
destroy(): void;
/** Value indicating if this object is valid to be used for rendering. */
get valid(): boolean;
destroy(): void;
}

4

types/material/standard/standard-material-feature-set.d.ts

@@ -1,2 +0,2 @@

import * as PIXI from "pixi.js";
import { Renderer } from "pixi.js";
import { MeshGeometry3D } from "../../mesh/geometry/mesh-geometry";

@@ -7,4 +7,4 @@ import { StandardMaterial } from "./standard-material";

export declare namespace StandardMaterialFeatureSet {
function build(renderer: PIXI.Renderer, mesh: Mesh3D, geometry: MeshGeometry3D, material: StandardMaterial, lightingEnvironment: LightingEnvironment): string[] | undefined;
function build(renderer: Renderer, mesh: Mesh3D, geometry: MeshGeometry3D, material: StandardMaterial, lightingEnvironment: LightingEnvironment): string[] | undefined;
function hasSkinningTextureFeature(features: string[]): boolean;
}

2

types/material/standard/standard-material.d.ts

@@ -22,2 +22,3 @@ import { Renderer, Shader } from "pixi.js";

private _lightingEnvironment?;
private _lightingEnvironmentConfigId;
private _unlit;

@@ -33,3 +34,2 @@ private _alphaMode;

private _shadowCastingLight?;
private _lightsCount?;
private _instancingEnabled;

@@ -36,0 +36,0 @@ private _skinUniforms;

1

types/picking/picking-interaction.d.ts

@@ -18,2 +18,3 @@ import { IRendererPlugin, Renderer } from "pixi.js";

constructor(renderer: Renderer);
private _update;
destroy(): void;

@@ -20,0 +21,0 @@ /**

3

types/shadow/shadow-renderer.d.ts
import { Renderer } from "pixi.js";
import { Mesh3D } from "../mesh/mesh";
import { ShadowCastingLight } from "./shadow-casting-light";
import { SkinningShader } from "./skinning-shader";
import { TextureShader } from "./texture-shader";
export declare class ShadowRenderer {

@@ -11,3 +13,4 @@ renderer: Renderer;

constructor(renderer: Renderer);
getSkinningShader(): SkinningShader | TextureShader | undefined;
render(mesh: Mesh3D, shadowCastingLight: ShadowCastingLight): void;
}

1

types/shadow/shadow-shader.d.ts

@@ -8,2 +8,3 @@ import { Renderer, Geometry } from "pixi.js";

constructor(renderer: Renderer, features?: string[]);
get maxSupportedJoints(): number;
createShaderGeometry(geometry: MeshGeometry3D): Geometry;

@@ -10,0 +11,0 @@ get name(): string;

1

types/shadow/skinning-shader.d.ts

@@ -9,2 +9,3 @@ import { Renderer } from "pixi.js";

get maxSupportedJoints(): number;
static getMaxJointCount(renderer: Renderer): number;
constructor(renderer: Renderer);

@@ -11,0 +12,0 @@ createShaderGeometry(geometry: MeshGeometry3D): import("pixi.js").Geometry;

1

types/shadow/texture-shader.d.ts

@@ -9,2 +9,3 @@ import { Renderer } from "pixi.js";

static isSupported(renderer: Renderer): boolean;
get maxSupportedJoints(): number;
constructor(renderer: Renderer);

@@ -11,0 +12,0 @@ createShaderGeometry(geometry: MeshGeometry3D): import("pixi.js").Geometry;

4

types/sprite/sprite-billboard-type.d.ts

@@ -8,7 +8,7 @@ /**

*/
Spherical = "spherical",
spherical = "spherical",
/**
* Sprite will be rotated towards the viewer on the y-plane.
*/
Cylindrical = "cylindrical"
cylindrical = "cylindrical"
}
types/console.d.ts
dist/pixi3d.js

Sorry, the diff of this file is too big to display

dist/pixi3d.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc