Hey Devs,
I've been tinkering with the Pokémon 3D API, and it's raised an interesting question: how do we provide 3D models in the most developer-friendly way? Specifically, JSX components vs. GLB files.
My Perspective (as a "Client"):
For me, as someone building an application using the API, JSX components are incredibly appealing. Imagine rendering a Pokémon with just a few lines of code like they are simpler to render, whereas in glb we have to preprocess each file or do a manual setup while rendering to make them visible on UI
The Reality Check:
We know direct browser execution of fetched JSX has security risks and they also need to be compiled at runtime because which it doesn't work else download them but when there are more then 1k+ which could possibly reach to 2mb+ but when crossed 2k+ it will lead to 4mb as it will still load the glb models i.e makes load as 2-4 MB on fetch on site as the jsx one is just to simplify things and handling that many jsx comp is not good to be present in local. GLB files are safer, but the setup and preprocessing for each file..😩
Alternatives I've Explored:
- Server-Side Rendering (SSR): Processing JSX and GLBs on the server and provide it to user but need to setup webpack I don't even know does this will work or not.
- Custom DSL (Domain-Specific Language): Using JSON to describe 3D scenes, enabling safer and more controlled client-side rendering, yeah we can provide position, scale for models with api.
- WebAssembly (WASM): Compiling 3D processing code to WASM for better performance and potential security enhancements but I don't even know what is 'W' of WASM like never worked with it.
- NPM Module Delivery: Packaging JSX components and their dependencies as NPM modules for easy installation and import but is the ease of installation worth the increased bundle size?.
The Question For You:
- Which approach do you find simpler, and why?
- How do we balance security with developer experience?
- For beginners, does the simplicity of JSX outweigh the potential complexities of using GLB files?
- If the current GLB-only approach is sufficient, and we can effectively preprocess it, is there truly a need for JSX components?
- What solutions can we explore to make 3d model rendering easier for everyone?
- CDN Delivery: Providing GLB files via CDN links, like: https://cdn.jsdelivr.net/gh/Sudhanshu-Ambastha/Pokemon-3D/models/glb/alolan/103.glb or https://raw.githubusercontent.com/Sudhanshu-Ambastha/Pokemon-3D/main/models/glb/alolan/103.glb but still it is same or what we use to point to file in api (i.e I meant from githubusercontent one) but as i heard cdn one can improve performance as it provides caching & can only provide max to 15 MB etc so is it a good idea to switch from githubusercontent to cdn?
I'm genuinely curious to hear your thoughts! Let's discuss in the comments.
Top comments (0)