Jump to content

Pixi3D: The 3D rendering library which makes it simple to composite both 3D and 2D content on the web


jnsmalm
 Share

Recommended Posts

Hello!

I have been working on a 3D rendering library built on top of PixiJS, and just want to find out if anyone would be interested to try it and give feedback.

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:

  • Load models from file or create procedural generated meshes
  • Supports physically-based rendering (PBR) and image-based lighting (IBL)
  • Transformation, morphing and skeletal animations
  • Customized materials and shaders
  • Built on top of the widely used PixiJS library which makes it simple to combine 2D and 3D

You can go to https://pixi3d.org/demo/drone/ to view a real-time demo or visit https://github.com/jnsmalm/pixi3d to download and read more about it.

Link to comment
Share on other sites

@jnsmalm thank you, this looks very interesting and is relevant to a current project :)

We've been exploring 3D within Pixi and experimented with both Pixi-Projection and combining Pixi with ThreeJS.  I've quickly reviewed the Pixi3D codebase and admire the purity.  My initial conclusion was it lies somewhere between the two approaches: not as pixi-centric as pixi-projection and not as featured-rich as ThreeJS.

In your opinion what is the deciding factor for using Pixi3D over those alternatives?  E.g. strengths and weaknesses, ideal use case?

And, also, I'm curious why degrees were used so prevalently in this library?

Thanks again, and looking forward to exploring Pixi3D more.

 

Link to comment
Share on other sites

Quote

thank you, this looks very interesting and is relevant to a current project

Glad to hear it!

Quote

My initial conclusion was it lies somewhere between the two approaches: not as pixi-centric as pixi-projection and not as featured-rich as ThreeJS.

I would say that Pixi3D is as pixi-centric it can possibly be, it shares the same API and it doesn't even work without PixiJS ?

Quote

In your opinion what is the deciding factor for using Pixi3D over those alternatives?  E.g. strengths and weaknesses, ideal use case?

If you are already familiar with PixiJS API, and/or you want a simple way to combine both 2D and 3D you can choose Pixi3D. If you need all the features that ThreeJS provides, go with that (not sure how easy it is to integrate with PixiJS). Not sure if Pixi3D is really comparable with pixi-projection, as Pixi3D is built to load, render and animate 3D models. As far as I can understand, pixi-projection is more built to handle the actual transform from 2D to 3D (I can absolutely be wrong on this though).

My idea for designing the API has been that it should be really easy for almost anyone to use it, but if you need more than what the API offers - it should not be in your way. For example, the material API: you don't even have to know what a material is or how it's used. But if you need to, you can create any material/shader you want, Pixi3D doesn't do anything magic or automatically to your shader. Although, it gives you some tools to help you out, if you want.

The weakness of Pixi3D is that it's new.

Quote

And, also, I'm curious why degrees were used so prevalently in this library?

I you mean why I'm not using radians instead of degrees it's simply because degrees is more simple to work.

Link to comment
Share on other sites

1 hour ago, jnsmalm said:

Pixi3D is built to load, render and animate 3D models

... within a Pixi application.  Yes, "models" (and materials) is likely the key differentiator over pixi-projection (from an adoption perspective).

It's easy for me to identify projects that take a 2D concept (what I meant by "pixi-centric") and extend into the pseudo-third-dimension.  For that pixi-projection is a wonderful fit: same asset pipeline and skillset, effectively a decoration.

2 hours ago, jnsmalm said:

If you need all the features that ThreeJS provides, go with that

Whereas it's trickier for me to identify a production scope project that uses models and materials (or not inherently "pixi-centric") while not benefitting from the wider features that come with ThreeJS (or BabylonJS etc)?  So although bridging the two (PixiJS->ThreeJS) can be awkward, it's probably less of a pain than needing to reinvent all the 3D features needed for a full-on 3D game?

Thanks again, it is an impressive plugin.  I am genuinely evaluating Pixi3D for adoption and collaboration so am sharing my thoughts by way of initial feedback and debate.

Link to comment
Share on other sites

Quote

Whereas it's trickier for me to identify a production scope project that uses models and materials (or not inherently "pixi-centric") while not benefitting from the wider features that come with ThreeJS (or BabylonJS etc)?  So although bridging the two (PixiJS->ThreeJS) can be awkward, it's probably less of a pain than needing to reinvent all the 3D features needed for a full-on 3D game?

It would be interesting to know the specific features needed for your project that are available in ThreeJS, that's not in Pixi3D.

Quote

Thanks again, it is an impressive plugin.  I am genuinely evaluating Pixi3D for adoption and collaboration so am sharing my thoughts by way of initial feedback and debate.

Thanks, I appreciate the discussion ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...