5 ms·

Pixi3D – 3D rendering library for the web

98 points by nassimsoftware 4y ago

qiller 4y ago
How does this compare to Threejs or Babylon?
- pontilanda 4y ago
  Given PixiJS is a 2D renderer by default I wouldn’t expect performance as high as Three.js. Pixi3D seems to be a way to add the occasional 3D object to your 2D drawn application.
  - jnsmalm 4y ago
    PixiJS renders 2D exactly the same as 3D is rendered using Three/Babylon, it's all WebGL (with vertex data, textures and shaders) in the end. Pixi3D should perform very similar to the other 3D renders on the web.
- vlz 4y ago
  I expect this to have an easier story combining 3D and 2D elements than threejs, in which you are basically left alone placing html or svg elements over your canvas and synchronizing them to your 3D state (which is ok as well, you can get 2D coordinates from three for your objects with some calculating). Also three does not really support having your 3d scene with a transparent background before some other 2D or web stuff (you basically have to bring everything into three somehow, e.g. as a texture). Pixie seems to support that when they say you can have 3D and 2D Containers on top of each other.
nassimsoftware 4y ago
For examples go to : https://pixi3d.org/ https://pixi3d.org/
noduerme 4y ago
Love it! PixiJS is awesome. Highly performant, the best webgl/canvas screen graph out there for me. Apart from occasional tooling issues with imports and TS definitions, usually when I upgrade, firing up an art/code project is almost as easy as in the good old days with AS3. I'm looking forward to adding 3D straight into my next project without using any ThreeJS or other libraries!
astlouis44 4y ago
Can't help but feel that the big game engines are going to have the most impact for 3D on the web. Our team at Wonder has brought Unreal Engine support back to HTML5 for newer versions of the engine, and we're offering an entire platform and suite of tools to enable developers to publish, manage, host, and monetize their games and 3D experiences on the web. Full blog post with demos below: https://theimmersiveweb.com/blog https://theimmersiveweb.com/blog
- nmfisher 4y ago
  I've kept an eye on WebGL/WebGPU/etc for my own app but haven't really made any moves in that direction yet. What's the market for 3d rendering in the browser at the moment (beyond your demos)? In theory it sounds nice to load up a webpage and jump straight into a game but the reality is probably quite different, what with long asset loading times and (I'm guessing) fractured userbase in terms of hardware. I know it's your product so you're bullish either way, but a candid answer would be appreciated.
  - oplav 4y ago
    I'm not the person you are responding to but I've been working on a web 3D rendering focused product for a bit now. One issue that we've run into is that by default on laptops, Windows will not use an available discrete GPU in the browser. The only way to work around this is if you go to your power settings (not in the browser) and tell Windows to use the discrete GPU over an integrated one.
    - nmfisher 4y ago
      I wasn't aware of that (though I don't know why I would be). That's very useful to know. Is this by default on battery, or by default full stop?
      - oplav 4y ago
        Our testing showed default full stop.
wffurr 4y ago
How does it compose 2D and 3D content? Is it using a WebGL canvas for the rendering surface? Or a 2D canvas and rasterising the 3D content in an offscreen canvas and transferring to bitmap to place in the 2D canvas?
- vlz 4y ago
  The readme describes some options you have for combining 2D and 3D.[1] It seems you can either have 3D and 2D on top each other (without transformations applying to both) or include a 3D sprite in 2D. I guess that means 2D and 3D are generally not composed together but separately. [1]: https://github.com/jnsmalm/pixi3d#2d-and-3d https://github.com/jnsmalm/pixi3d#2d-and-3d
riddleronroof 4y ago
Amazing project! Looks like it needs to control the DOM. Is there a way to use this with react?
- jnsmalm 4y ago
  Yes. I have used this in projects together with PixiJS React (another project).
villgax 4y ago
I want one but to do custom UI elements on iOS & Android without having to make an opengl nightmare or unity based video game inadvertently
bovermyer 4y ago
So, if I wanted to load a PNG image file as an input to another shader for this, how would I go about doing that? I don't actually need an answer to that question, I just want to know if it's possible.

qiller 4y ago

How does this compare to Threejs or Babylon?

pontilanda 4y ago
Given PixiJS is a 2D renderer by default I wouldn’t expect performance as high as Three.js. Pixi3D seems to be a way to add the occasional 3D object to your 2D drawn application.
- jnsmalm 4y ago
  PixiJS renders 2D exactly the same as 3D is rendered using Three/Babylon, it's all WebGL (with vertex data, textures and shaders) in the end. Pixi3D should perform very similar to the other 3D renders on the web.
vlz 4y ago
I expect this to have an easier story combining 3D and 2D elements than threejs, in which you are basically left alone placing html or svg elements over your canvas and synchronizing them to your 3D state (which is ok as well, you can get 2D coordinates from three for your objects with some calculating). Also three does not really support having your 3d scene with a transparent background before some other 2D or web stuff (you basically have to bring everything into three somehow, e.g. as a texture). Pixie seems to support that when they say you can have 3D and 2D Containers on top of each other.

nassimsoftware 4y ago

For examples go to : https://pixi3d.org/ https://pixi3d.org/

noduerme 4y ago

Love it! PixiJS is awesome. Highly performant, the best webgl/canvas screen graph out there for me. Apart from occasional tooling issues with imports and TS definitions, usually when I upgrade, firing up an art/code project is almost as easy as in the good old days with AS3. I'm looking forward to adding 3D straight into my next project without using any ThreeJS or other libraries!

astlouis44 4y ago

Can't help but feel that the big game engines are going to have the most impact for 3D on the web. Our team at Wonder has brought Unreal Engine support back to HTML5 for newer versions of the engine, and we're offering an entire platform and suite of tools to enable developers to publish, manage, host, and monetize their games and 3D experiences on the web. Full blog post with demos below: https://theimmersiveweb.com/blog https://theimmersiveweb.com/blog

nmfisher 4y ago
I've kept an eye on WebGL/WebGPU/etc for my own app but haven't really made any moves in that direction yet. What's the market for 3d rendering in the browser at the moment (beyond your demos)? In theory it sounds nice to load up a webpage and jump straight into a game but the reality is probably quite different, what with long asset loading times and (I'm guessing) fractured userbase in terms of hardware. I know it's your product so you're bullish either way, but a candid answer would be appreciated.
- oplav 4y ago
  I'm not the person you are responding to but I've been working on a web 3D rendering focused product for a bit now. One issue that we've run into is that by default on laptops, Windows will not use an available discrete GPU in the browser. The only way to work around this is if you go to your power settings (not in the browser) and tell Windows to use the discrete GPU over an integrated one.
  - nmfisher 4y ago
    I wasn't aware of that (though I don't know why I would be). That's very useful to know. Is this by default on battery, or by default full stop?
    - oplav 4y ago
      Our testing showed default full stop.

wffurr 4y ago

How does it compose 2D and 3D content? Is it using a WebGL canvas for the rendering surface? Or a 2D canvas and rasterising the 3D content in an offscreen canvas and transferring to bitmap to place in the 2D canvas?

vlz 4y ago
The readme describes some options you have for combining 2D and 3D.[1] It seems you can either have 3D and 2D on top each other (without transformations applying to both) or include a 3D sprite in 2D. I guess that means 2D and 3D are generally not composed together but separately. [1]: https://github.com/jnsmalm/pixi3d#2d-and-3d https://github.com/jnsmalm/pixi3d#2d-and-3d

riddleronroof 4y ago

Amazing project! Looks like it needs to control the DOM. Is there a way to use this with react?

jnsmalm 4y ago
Yes. I have used this in projects together with PixiJS React (another project).

villgax 4y ago

I want one but to do custom UI elements on iOS & Android without having to make an opengl nightmare or unity based video game inadvertently

bovermyer 4y ago

So, if I wanted to load a PNG image file as an input to another shader for this, how would I go about doing that? I don't actually need an answer to that question, I just want to know if it's possible.