jnsmalm / pixi3d

The 3D renderer for PixiJS. Seamless integration with 2D applications.
https://pixi3d.org
MIT License
752 stars 43 forks source link

Base64 #155

Closed TheRealTR closed 1 year ago

TheRealTR commented 1 year ago

Possible to load glTF data directly into a model? For instance, keep a library of models as vars and load them dynamically?

jnsmalm commented 1 year ago

Yes, if you export from Blender as embedded glTF you can load like this:

const json = {
  "asset": {
    "generator": "Khronos glTF Blender I/O v3.2.40",
    "version": "2.0"
  },
  "scene": 0,
  "scenes": [
    {
      "name": "Scene",
      "nodes": [
        0
      ]
    }
  ],
  "nodes": [
    {
      "mesh": 0,
      "name": "Cube"
    }
  ],
  "materials": [
    {
      "doubleSided": true,
      "name": "Material",
      "pbrMetallicRoughness": {
        "baseColorFactor": [
          0.800000011920929,
          0.800000011920929,
          0.800000011920929,
          1
        ],
        "metallicFactor": 0,
        "roughnessFactor": 0.4000000059604645
      }
    }
  ],
  "meshes": [
    {
      "name": "Cube",
      "primitives": [
        {
          "attributes": {
            "POSITION": 0,
            "NORMAL": 1,
            "TEXCOORD_0": 2
          },
          "indices": 3,
          "material": 0
        }
      ]
    }
  ],
  "accessors": [
    {
      "bufferView": 0,
      "componentType": 5126,
      "count": 24,
      "max": [
        1,
        1,
        1
      ],
      "min": [
        -1,
        -1,
        -1
      ],
      "type": "VEC3"
    },
    {
      "bufferView": 1,
      "componentType": 5126,
      "count": 24,
      "type": "VEC3"
    },
    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 24,
      "type": "VEC2"
    },
    {
      "bufferView": 3,
      "componentType": 5123,
      "count": 36,
      "type": "SCALAR"
    }
  ],
  "bufferViews": [
    {
      "buffer": 0,
      "byteLength": 288,
      "byteOffset": 0
    },
    {
      "buffer": 0,
      "byteLength": 288,
      "byteOffset": 288
    },
    {
      "buffer": 0,
      "byteLength": 192,
      "byteOffset": 576
    },
    {
      "buffer": 0,
      "byteLength": 72,
      "byteOffset": 768
    }
  ],
  "buffers": [
    {
      "byteLength": 840,
      "uri": "data:application/octet-stream;base64,AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAPwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AACAPwAAAAAAAACAAACAvwAAAAAAAACAAAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAvwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AAAgPwAAAD8AACA/AAAAPwAAID8AAAA/AADAPgAAAD8AAMA+AAAAPwAAwD4AAAA/AAAgPwAAgD4AACA/AACAPgAAID8AAIA+AADAPgAAgD4AAMA+AACAPgAAwD4AAIA+AAAgPwAAQD8AACA/AABAPwAAYD8AAAA/AADAPgAAQD8AAAA+AAAAPwAAwD4AAEA/AAAgPwAAgD8AACA/AAAAAAAAYD8AAIA+AADAPgAAgD8AAAA+AACAPgAAwD4AAAAAAQAOABQAAQAUAAcACgAGABMACgATABcAFQASAAwAFQAMAA8AEAADAAkAEAAJABYABQACAAgABQAIAAsAEQANAAAAEQAAAAQA"
    }
  ]
}

let model = Model.from(glTFAsset.load(json))
jnsmalm commented 1 year ago

https://api.pixi3d.org/classes/glTFAsset.html#load

TheRealTR commented 1 year ago

Thank you for your prompt and useful reply.

I have a project that would benefit from PIXI3D, which I think is under-exploited. Are you available for paid consultation?

TR

On Jan 17, 2023, at 10:22 PM, Jens Malmborg @.***> wrote:

https://api.pixi3d.org/classes/glTFAsset.html#load

— Reply to this email directly, view it on GitHub https://github.com/jnsmalm/pixi3d/issues/155#issuecomment-1386659906, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXVARKHPC45PBEOIHGSQNPDWS6R5ZANCNFSM6AAAAAAT6PF5SU. You are receiving this because you authored the thread.

jnsmalm commented 1 year ago

I have a project that would benefit from PIXI3D

Cool!

Are you available for paid consultation?

Sure, if you want to talk specifics you can contact me on [removed]

TheRealTR commented 1 year ago

I’m getting this error: ReferenceError: Can't find variable: glTFAsset

Am I missing a file inclusion?

On Jan 17, 2023, at 10:21 PM, Jens Malmborg @.***> wrote:

Yes, if you export from Blender as embedded glTF you can load like this:

const json = { "asset": { "generator": "Khronos glTF Blender I/O v3.2.40", "version": "2.0" }, "scene": 0, "scenes": [ { "name": "Scene", "nodes": [ 0 ] } ], "nodes": [ { "mesh": 0, "name": "Cube" } ], "materials": [ { "doubleSided": true, "name": "Material", "pbrMetallicRoughness": { "baseColorFactor": [ 0.800000011920929, 0.800000011920929, 0.800000011920929, 1 ], "metallicFactor": 0, "roughnessFactor": 0.4000000059604645 } } ], "meshes": [ { "name": "Cube", "primitives": [ { "attributes": { "POSITION": 0, "NORMAL": 1, "TEXCOORD_0": 2 }, "indices": 3, "material": 0 } ] } ], "accessors": [ { "bufferView": 0, "componentType": 5126, "count": 24, "max": [ 1, 1, 1 ], "min": [ -1, -1, -1 ], "type": "VEC3" }, { "bufferView": 1, "componentType": 5126, "count": 24, "type": "VEC3" }, { "bufferView": 2, "componentType": 5126, "count": 24, "type": "VEC2" }, { "bufferView": 3, "componentType": 5123, "count": 36, "type": "SCALAR" } ], "bufferViews": [ { "buffer": 0, "byteLength": 288, "byteOffset": 0 }, { "buffer": 0, "byteLength": 288, "byteOffset": 288 }, { "buffer": 0, "byteLength": 192, "byteOffset": 576 }, { "buffer": 0, "byteLength": 72, "byteOffset": 768 } ], "buffers": [ { "byteLength": 840, "uri": "data:application/octet-stream;base64,AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAPwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AACAPwAAAAAAAACAAACAvwAAAAAAAACAAAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAvwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AAAgPwAAAD8AACA/AAAAPwAAID8AAAA/AADAPgAAAD8AAMA+AAAAPwAAwD4AAAA/AAAgPwAAgD4AACA/AACAPgAAID8AAIA+AADAPgAAgD4AAMA+AACAPgAAwD4AAIA+AAAgPwAAQD8AACA/AABAPwAAYD8AAAA/AADAPgAAQD8AAAA+AAAAPwAAwD4AAEA/AAAgPwAAgD8AACA/AAAAAAAAYD8AAIA+AADAPgAAgD8AAAA+AACAPgAAwD4AAAAAAQAOABQAAQAUAAcACgAGABMACgATABcAFQASAAwAFQAMAA8AEAADAAkAEAAJABYABQACAAgABQAIAAsAEQANAAAAEQAAAAQA" } ] }

let model = Model.from(glTFAsset.load(json)) — Reply to this email directly, view it on GitHub https://github.com/jnsmalm/pixi3d/issues/155#issuecomment-1386658587, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXVARKBFDAYILYU3O4NOACLWS6RZPANCNFSM6AAAAAAT6PF5SU. You are receiving this because you authored the thread.

jnsmalm commented 1 year ago

Yes, if you are using npm you have to:

import { Model, glTFAsset } from "pixi3d"

If you are just importing pixi3d.js as a script:

let model = PIXI3D.Model.from(PIXI3D.glTFAsset.load(json))

TheRealTR commented 1 year ago

Thanks Jens- all better now.I’ve got a small team working on a content platform that we hope to launch in June. It’s almost entirely written in Javascript (to be packaged as a PWA) and relies on PIXI for all display, thus our interest in PIXI3D. We have long history with CGI- we were part of the team that developed the original Lightwave 3D.The implementation is fairly unorthodox, which makes it challenging to understand for programmers who are used to building websites. We don’t use HTML or CSS to put things on the screen and the design metaphor is more like TV than the print emulation that HTML was based upon.Cut to the chase, I believe we can do some very interesting things with PIXI3D if we can get guidance on some of the intricacies of the API- there’s not a lot of examples out there to draw on. Additionally, you have insight into PIXI and may be able to keep us from wasting time on simple problems. On some occasions, we may need minor modifications to a Javascript library to mesh with our method, but never something from scratch.We’ve been structuring our consulting relationships pretty loosely. We provide a monthly retainer and there is no time tracking, just addressing specific issues as they come up. Your time is yours to manage, we’ll just need a bit of it every once in a while.If this sounds do-able, let me know and we’ll get the process started.And thanks for the timely help!Todd RundgrenPatroNetOn Jan 18, 2023, at 8:08 PM, Jens Malmborg @.***> wrote: Yes, if you are using npm you have to: import { Model, glTFAsset } from "pixi3d" If you are just importing pixi3d.js as a script: let model = PIXI3D.Model.from(PIXI3D.glTFAsset.load(json))

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

jnsmalm commented 1 year ago

Sounds interesting, do you have a business mail where I can reach you?