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

pixi3d

Package Overview
Dependencies
Maintainers
1
Versions
45
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pixi3d - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

types/platform.d.ts

6

package.json
{
"name": "pixi3d",
"version": "0.6.0",
"version": "0.7.0",
"description": "The 3D rendering library which makes it simple to composite both 3D and 2D content on the web",

@@ -14,3 +14,4 @@ "main": "dist/pixi3d.js",

"prepare": "npm run build",
"serve": "webpack-dev-server --open --config examples/example.config.js"
"serve": "webpack-dev-server --open --config examples/example.config.js",
"docs": "typedoc src/index.ts"
},

@@ -33,2 +34,3 @@ "repository": {

"ts-loader": "^6.2.0",
"typedoc": "^0.17.0-3",
"typescript": "^3.8.3",

@@ -35,0 +37,0 @@ "url-loader": "^3.0.0",

@@ -5,3 +5,4 @@ # Pixi3D

* Load models from file or create procedural generated meshes
* Supports physically-based rendering (PBR) and image-based lighting (IBL)
* Physically-based rendering (PBR) and image-based lighting (IBL)
* Dynamic shadows
* Transformation, morphing and skeletal animations

@@ -97,17 +98,4 @@ * Customized materials and shaders

### Lighting environment
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 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.
```javascript
let light = Object.assign(new PIXI3D.Light(), {
type: "point", x: -1, y: 0, z: 3, range: 10, intensity: 10
})
PIXI3D.LightingEnvironment.main.lights.push(light)
```
*Adds a point light to the main lighting environment. The drone should now be illuminated by the light.*
### Position, rotation and scale
All objects 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.
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.

@@ -123,2 +111,21 @@ 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.

### Lighting environment
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 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.
```javascript
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", x: -1, y: 0, z: 3, range: 10, intensity: 10
})
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.*
### Playing animations

@@ -132,2 +139,17 @@ 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.

### Casting shadows
To enable lights to cast shadows, there are two different components needed. First is a shadow casting light, which wraps the normal 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.
The second component needed, is the shadow render pass, which renders shadows using the shadow casting light. Finally, shadows must be enabled for an object to both receive and cast shadows.
```javascript
let shadowCastingLight = new PIXI3D.ShadowCastingLight(
app.renderer, dirLight, 512, 15, 1, PIXI3D.ShadowQuality.medium)
let shadowPass = PIXI3D.ShadowRenderPass.addAsRenderPass(app.renderer)
shadowPass.lights.push(shadowCastingLight)
shadowPass.enableShadows(model, shadowCastingLight)
```
*Creates a shadow casting light. Also creates the shadow render pass, adds the casting light and enables shadows for the drone model.*
### 2D and 3D

@@ -158,2 +180,5 @@ 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.

## API
The API documentation is available at https://pixi3d.org/docs/
## Building

@@ -160,0 +185,0 @@ Build *pixi3d.js* to *dist* folder with production settings.

@@ -60,4 +60,2 @@ import * as PIXI from "pixi.js";

get projection(): Float32Array;
/** Returns the target position. */
get target(): Float32Array;
/** Returns the view matrix. */

@@ -64,0 +62,0 @@ get view(): Float32Array;

@@ -32,1 +32,4 @@ export { glTFLoader } from "./loader/gltf-loader";

export { Joint } from "./skinning/joint";
export { ShadowRenderPass } from "./shadow/shadow-render-pass";
export { ShadowCastingLight } from "./shadow/shadow-casting-light";
export { ShadowQuality } from "./shadow/shadow-quality";

@@ -6,4 +6,2 @@ import { Container3D } from "../container";

type: LightType;
/** The direction of the light (only applicable when type is directional or spot). */
direction: number[];
/** The color of the light. */

@@ -15,6 +13,6 @@ color: number[];

intensity: number;
/** The inner cone angle specified in radians. */
/** The inner cone angle specified in degrees. */
innerConeAngle: number;
/** The outer cone angle specified in radians. */
/** The outer cone angle specified in degrees. */
outerConeAngle: number;
}

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

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

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

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

@@ -9,2 +9,3 @@ import * as PIXI from "pixi.js";

import { StandardMaterialDebugMode } from "./standard-material-debug-mode";
import { ShadowCastingLight } from "../../shadow/shadow-casting-light";
/**

@@ -16,3 +17,3 @@ * The standard material is using Physically-Based Rendering (PBR) which makes

export declare class StandardMaterial extends Material {
private _lighting?;
private _lightingEnvironment?;
private _unlit;

@@ -27,2 +28,3 @@ private _alphaMode;

private _transparent;
private _shadowCastingLight?;
/** The roughness of the material. */

@@ -58,2 +60,5 @@ roughness: number;

set alphaMode(value: StandardMaterialAlphaMode);
/** The shadow casting light of the material. */
get shadowCastingLight(): ShadowCastingLight | undefined;
set shadowCastingLight(value: ShadowCastingLight | undefined);
/** The debug rendering mode of the material. */

@@ -73,4 +78,4 @@ get debugMode(): StandardMaterialDebugMode | undefined;

*/
get lighting(): LightingEnvironment | undefined;
set lighting(value: LightingEnvironment | undefined);
get lightingEnvironment(): LightingEnvironment | undefined;
set lightingEnvironment(value: LightingEnvironment | undefined);
/**

@@ -77,0 +82,0 @@ * Value indicating if the material is unlit. If this value if set to true,

@@ -6,3 +6,4 @@ import * as PIXI from "pixi.js";

static build(renderer: PIXI.Renderer, features: string[]): StandardShader;
get name(): string;
addGeometryAttributes(geometry: MeshGeometry3D): void;
}

@@ -11,4 +11,7 @@ export declare namespace Mat4 {

function perspective(fovy: number, aspect: number, near: number, far: number, out: Float32Array): Float32Array;
function ortho(left: number, right: number, bottom: number, top: number, near: number, far: number, out: Float32Array): Float32Array;
function invert(a: Float32Array, out: Float32Array): Float32Array | null;
function transpose(a: Float32Array, out: Float32Array): Float32Array;
function fromScaling(v: Float32Array, out: Float32Array): Float32Array;
function fromTranslation(v: Float32Array, out: Float32Array): Float32Array;
}

@@ -6,2 +6,3 @@ export declare namespace Quat {

function fromEuler(x: number, y: number, z: number, out: Float32Array): Float32Array;
function conjugate(a: Float32Array, out: Float32Array): Float32Array;
}
import { Mesh3D } from "../mesh/mesh";
import { Model } from "../model";
import { Camera } from "../camera/camera";
/**
* Hit area which uses the shape of a mesh to determine interaction. Only works
* correctly when the specified mesh is rendered using the main camera.
* Hit area which uses the shape of an object to determine interaction.
*/
export declare class PickingHitArea implements PIXI.IHitArea {
object: Mesh3D | Model;
camera?: Camera | undefined;
private _manager;
/** The id which maps to the mesh. */
/** The id which maps to the object. */
id: Uint8Array;
/**
* Creates a new hitarea using the specified mesh.
* @param renderer The renderer which has the picking manager plugin.
* Creates a new hitarea using the specified object.
* @param renderer The renderer to use.
* @param object The model or mesh to test for interaction.
* @param camera The camera to use when rendering the object.
*/
constructor(renderer: PIXI.Renderer, object: Mesh3D | Model);
constructor(renderer: PIXI.Renderer, object: Mesh3D | Model, camera?: Camera | undefined);
contains(x: number, y: number): boolean;
}

@@ -5,3 +5,3 @@ import * as PIXI from "pixi.js";

/**
* Pass used for rendering mesh materials.
* Pass used for rendering materials.
*/

@@ -8,0 +8,0 @@ export declare class MaterialRenderPass implements RenderPass {

@@ -14,2 +14,3 @@ import * as PIXI from "pixi.js";

private _forward?;
private _target?;
private _array;

@@ -35,2 +36,4 @@ /**

get forward(): Float32Array;
/** Returns the target (position + forward) vector of the matrix. */
get target(): Float32Array;
copyFrom(matrix: TransformMatrix): this;

@@ -37,0 +40,0 @@ /**

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

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