three_js porting of three.js: current status and updates

[jdaniele71]

Hi, first of all, I really love this port and I would like to thank @Knightro63 and the other contributors for this amazing work.

At the same time, I wonder how updates of three_js are handled, to keep it up to date to the original three.js project.
I'm writing this lines because, for example, days ago, I needed the PCDLoader (PointCloud Data loader) that three.js has, but I didn't find the corresponding class implementation in three_js, so I had to write one, based on the other loaders.

So the first question is: how can I know which is latest version of three.js implemented by three_js?

Another very interesting aspect is that three.js is now supporting WebGPU technology, that is way faster than WebGL2.

Will WebGPU support ever be introduced in the flutter three_js package?
In general, the main question is: will three_js be updated to the latest version of three.js, and if "yes", when (and how)?
How much frequently?
Don't get me wrong, I know keeping it up to date takes a lot of work, dedication, and time.
So I'm not complaining about this fantastic free and open port you've made.
It's just to better understand what I can expect in the future.

Thanks.
Best regards
Daniele

[Knightro63]

Hi @jdaniele71 ,

Thanks for using the repo. I have been updating to the latest versions of three.js webgl2 parts. I have been working on a webgpu version but it is taking some time to port everything over. One of the biggest problems is that it will only be for web and no other devices until the flutter team catches up on the GPU part.

As for some of the parts of three.js that are missing, if it does not have a specific part that is required by the core I will wait for someone to make a request for it e.g.(PCDLoader) and it does not rely on some other repo that needs to be ported or might take months for one person to do like DracoLoader.

Let me know if you have any requests or need some assistance. I will take a look at porting PCDLoader.

[jdaniele71]

Hi @Knightro63,

thanks a lot for your kind reply.

Let me start by saying: I've been developing software since 1983 (on Sinclair ZX-81), first out of passion and then as a job, but I'm new to Dart, Flutter, and three.js, so don't be surprised if I ask some silly questions.

Nice to know you are working on the WebGPU porting.

If I understand correctly, WebGPU APIs are available within browsers, but they are not available as a callable Dart/Flutter wrapper for other targets such as desktop and native mobile versions.
Anyway, the mobile Chrome supports WebGPU since latest versions.

From what I read in the following very well written tutorial, there are two implementations available for the desktop:
wgpu-native and Dawn.
https://eliemichel.github.io/LearnWebGPU/getting-started/hello-webgpu.html

So, for the desktop targets, a Dart wrapper should be implemented, calling the WebGPU C++ library.
As far as I can read in the following page, it is possible to integrate C++ library into Dart/Flutter.
https://dev.to/ayon_ssp/supercharge-your-flutter-apps-seamlessly-integrate-c-with-dart-using-dlls-2nc2

Do you think it's feasible?

About the missing parts, it would be useful to find a list of them, somewhere, because when I read that your library is a porting of three.js, I could expect that I will find anything the three.js offers as functionalities.
You could write this list in the project home and, for every item, specifying the status (WIP, no plan, ...) and that everything not listed there, is already implemented and fully funcional.

Relating to PCDLoader, yes it would be fantastic if you could implement it in the library.
It is not urgent for me, because, as I wrote, I managed to implement a "quick and dirty" version of it, so take your time.

About your kind support, I have one question: why a lot of the examples I can find here (https://knightro63.github.io/three_js/) are not working?
For instance, trying to open WEBGL SPRITES example, is not loading correctly.
Looking at the console, I can see the following error:
GET https://knightro63.github.io/three_js/assets/textures/sprite0.png 404 (Not Found)

Trying to open WEBGL CAMERA ARRAY there are 256 error like this:
WebGL: INVALID_OPERATION: useProgram: program not valid
(completely reloading the main page, fixed this error)

Trying to open WEBGL LOADER GLTF:
GET https://knightro63.github.io/three_js/assets/models/gltf/DamagedHelmet/glTF/Default_albedo.jpg 404 (Not Found)

If I copy any of the direct link to the examples (let's say https://knightro63.github.io/three_js/webgl_camera) and paste it in a new tab, I always get the 404 not found. Very strange...

And so on...
I'm using Chrome, Version 143.0.7499.41 (Official Build) (64-bit), under Win10.

Thanks.
Regard.

[Knightro63]

Hi @jdaniele71,

The webgpu is feasible I have looked at other packages that do implement gpu but have not had the time to finish implementing it or going down the rabbit hole of making it work on every platform. This is for next year I am afraid.

I will work on a readme update to add the functions. This might take a while if an AI is unable to get me most of the information. Not sure how much is in three.js, It is a large library.

I have updated the github web example here. The 404 not found for the textures should be fixed since I have not updated it in a long time.

As for copying the links directly https://knightro63.github.io/three_js/webgl_camera having a 404 issue. This is due to how github handles the call, if i was to do this on its own page I would make a 404 page that routes it to the main page and parse the url to determine the location, if the location is a 404 show a different 404 page otherwise show the correct page, but I am not sure if a 404 router page is possible here. Maybe it is I have not looked to much into it.

I have finished the PCDLoader and will update three_js on pub dev soon.

If you need help you can always post a question. I have tested it with some AI's and they seem to know about three_js and can answer a lot of questions. You just need to specify that you are not using three.js e.g.("I am using the latest version of three_js from pub.dev how do I ...") and just make sure it is looking at 0.2.0 and above. I have seen that it reverts to 0.1.7 from other users.

Hope this helps.

[Knightro63]

Hi @jdaniele71,

I have updated the README with all of the modules that three.js has. There is a table with what is supported, needs to be requested, and will not be ported.

Let me know if this was helpful

[jdaniele71]

Dear @Knightro63, first of all, let me thank you again for the fantastic updates you made at the speed of light!! WOW! 😲
I opened the PCDLoader example and is working great! My compliment!🤩
It seems that the 404 errors disappeared. Great job!
The ones on the direct link are not so important, actually.

I had no much time to check every single example, but I will, with a bit of patience.
I just tested the first 28 examples and I found some minor issues.
Here below the results:

SANDBOX: something strange happens: moving the mouse I see a mess of lines, and for half second I heard an audio glitch and nothing more.

WEBGL SHADOWMAP VSM: after opening in sequence, one by one, the first 12 demos, this one failed with the following error:

Uncaught InvalidStateError: Failed to execute 'transferToImageBitmap' on 'OffscreenCanvas': Cannot transfer to ImageBitmap because WebGL context is lost.
    at Mb (skwasm.js:35:48)
    at skwasm.wasm:0x202ca5
    at skwasm.js:33:291
    at skwasm.js:32:165

After trying to get back (unsuccessfully) to the main page, I reloaded the main page and reopened WEBGL SHADOWMAP VSM, and this time, it worked fine.
Maybe, there is something leaking resources.

WEBGL LIGHTPROBE CUBE CAMERA: The rendered ball is completely black. Is it right?

WEBGL GEOMETRY DYNAMIC: it alternates two colors on the screen (very light blue and light blue). I think there is something strange.
After refreshing the main page it worked but is not so easy to understand what's happening.
There is like a sea rotating below the camera and any slight move up or down of the mouse could loss the focus on the right spot.

WEBGL INTERACTIVE POINTS: exact same error and behavior of WEBGL SHADOWMAP VSM. After refreshing the mail page, it worked.

Thanks for the hints about asking questions to AI. I will try it as I need.

About the home page update, the list you made is nearly perfect!
I would add the exact version of three.js you took as reference for the list.
I would also change "GPU" to "WebGPU" because is the exact name of the API in the "GPU is currently under development...".
(so if I search about "WebGPU" on Google, I will find you library)

The only thing that is not clear is that you state "GPU is currently under development..." but I can see the ❌ on any "GPU" related feature. And ❌ means "Not intended". I'm a bit confused...🙄

I don't know your plan for the future, but if you are willing to port all the ⚠️ items, having time available, I would change the meaning of it as follow:
⚠️ Low priority porting or higher priority upon request
I this way, the users will know you are willing to improve the porting, step by step, as you can, but if there is a specific request, you will do your best to accomplish it faster (as you did for mine!).

Could you please explain to me the meaning of "Not intended, unless a major update has been accomplished", maybe with an example?
The first part is clear: you are not willing to do that, ok.
The second part seems to say "if the feature X of the current version of three.js gets a major update, I will implement it".
Is my interpretation right?
I'm not able to catch the logic behind it, sorry.

Anyway, everything you did was very, very helpful!
So, again, thanks a lot 🙏💙 and I'll let you know about any other "issue" or "suggestion" that come to me.

My two cents.
Best regards!