B4J Library [B4J] WebGL Library

Hi all,

after a long develop making it to work exactly as I wanted ...

... since I promised a fully functional 3D library to some users who requested it ...
... and with permission of my cat, that says: Yes I Like it, you can release on the B4X forum

... I'm very happy today to release the B4J WebGL library.

This library fully exposes the super powerful THREEJS JavaScript library (You will have to download separately).

The B4J WebGL library fully exposes:

1. WebGL 1.0
2. WebGL 2.0
3. WebGPU

renderers, fully rendered by hardware of your graphic card.

Note that because JavaFX WebView does not exposes WebGL functionality, the 3D view cannot be
embedded on top of JavaFX, instead it is exposed over HTTP and accessible over external browser.
If some peoples know a way to integrate WebGL on JavaFX WebView or a replacement of it, I can provide to update the library
to work on top of JavaFX, but unless this happen the only way to work is to use external browser.

If you need something that involves 3D and is not a problem that it shows on external browser (even on remote devices) this is probably the library for you, because of it's incredible powerful you can develop with it any sort of 3D, from simples to very complex scenes, from realistic scenes to realistic or unrealistic effects with even an addon of advanced post-processing and more physic engines.

B4J WebGL Library is completely FREE, and come out of the box with all you need to develop professional 3D that even works on the web.
If you plain to use in your projects, please consider to make a donation ... Because the develop required a lot of work, time and knowledge,
I would be grateful if you do it.

Any modern browser should support WebGL renderers, but to be sure your browsers support it, you can visit: https://webglreport.com
To get more on THREEJS library you can visit: https://threejs.org/
To get some examples on what you can develop with this library you can visit: https://threejs.org/examples/
scroll down a long list of examples and test them on your browser, these are just simple examples to show the threejs library functionalities,
they are very good point to start, on every example you can get (by clicking on the bottom-right symbol) the code to get the scene.
All these example codes will work on B4J WebGL library.

The B4J WebGL library acts as bridge to help write JavaScript code and have some useful methods to do it, it is small and minimalistic (with few commands) and very simple to use, but you need at least some JavaScript knowledge, the more you are expert here, the more you are able to get best results in a small time using it.

With this library you can:

• Develop offline and online 3D games
• Develop realistic 3D scenes with static or animated objects
• Import any sort of 3D CAD models, without or with textures applied, without or with animations and with full control of these
• Export to many CAD models
• Import and export GLTF models and scenes, as JSON or binary files. https://en.wikipedia.org/wiki/GlTF
• Add an integrated GUI to iteract in realtime with the scene. https://github.com/georgealways/lil-gui
• Create 3D programs
• Create 3D presentations
• Create 3D cartoons
• Create special effects
• Create Virtual Reality scenes and use cubic cameras
• In general develop any sort of 3D applications

WHAT'S UNDER THE HOOD

- It's cross platform. Because it uses external browser, the 3D scene is rendered on any device with any operating system, Windows, Mac, iOS, Android, probably Android TV and Android Auto, Linux, including all Single Board Computers such the Jetson Nano, ODROID, Raspberry PI and more... here may you have to enable the 3D driver. You only need to know if your browser support WebGL extension. All created scenes will works local and even over the web.
- The library do not only manage 3D renderings, but is even able to manage 3D spatial audio.
- The library offers more than one physical 3D engine, support collisions, cloth simulator and more.
- The library has more controls and camera views, orbit mouse control, first person, fly control and more, and with my addon class I wrote (a bit experimental, I will release next), it support up 4 gamepads fully recognized by the browser using the Gamepad Web API. For advanced users who use microcontrollers such ESP32, if interested I will explain in another detailed post how to use ESP32 as a BLE Gamepad and/or Mouse and/or Keyboard, regularly known by every operating system and browser and thus being able to create custom (and wireless) controls capable of controlling anything inside threejs and in general inside JS code.
- The threejs library already have a lots of classes to help you to do anything, but even can be expanded by creating more custom classes and/or integrate any JS code or library.
- The library have some useful methods to transform JS arrays to B4X List and viceversa and to transform JS objects to B4X maps and viceversa.
- The library have a Console command to output on JS console and Alert command to show JS alert boxes.
- The official threejs site offer a very good and detailed informations on methods of most classes, sometime with code and sometime with inline 3D view. Documentation scroll down the list on the left or search on top. You noticed that docs even support more languages, I'm happy to see it support italian too. ...
- If you encounter some issues during development you can ask to Mentor ChatGPT that is expert on THREEJS, or just join to Discord or StackOverflow officials threejs forums. You can find more infos on threejs site.
- The web is full of threejs tutorials, even there are online developer tools where you can write threejs code and see the final results. One of most popular is codepen. All these codes will work on B4J WebGL library.
- The web is full of sites where you can find free or paid detailed 3D models, without or with textures, without or with animations. One of most popular is sketchfab.
- Come with a full and advanced debugger (like B4X IDE but to debug JS), just press F12 to show your browser DevTools, here you can inspect your JS code, inspect variables and constants, put breakpoints, advance line by line, view a full HTML code, view any resource file used and track any HTTP request. You can refer to DevTools documentation of your browser to get more infos.
- More secure. All is managed internally using XmlHttpRequests and modern techniques where the security is at top level.
- Come with step by step simple setup guide and with 5 demo projects, fully commented and disposed as small tutorial to start with it.

How to use WebGL library (Step by step)

1. Download the attached jWebGL.zip file
2. Extract jWebGL.jar and jWebGL.xml files to your Additional Libraries folder
3. You will have to put the THREEJS library in a place where the system have permissions to read and write, the best place on any system is DirData. To know where DirData points on your system you can use:
   Log(File.DirData("B4XWebGL"))
   where B4XWebGL is not mandatory, but it is just to mantain compatibility with my example demos distribuited with this library. You can change it's name but then you need to change it on all example demos and on all your projects. I advise you to leave this name unchanged. This line show me on the log the follow on Windows 11: C:\Users\MyUserName\AppData\Roaming\B4XWebGL. Finally go to this position (eg. C:\Users\MyUserName\AppData\Roaming\ in my case) create a new folder and call it B4XWebGL
4. Go to THREEJS github page and download the distribution zip file. Note that I have tested it on version r164, but because it's community is very active, it will continue to evolve, improve, fix small bugs etc... You can just download the latest version (at moment I wrote this, the r171) or search old versions on the history. Searching very old versions (like r120-r130) helped on old devices that not fully support WebGL, but break some compatibility with new code. Here the github page where you can download the latest library version: https://github.com/mrdoob/three.js
5. After you download the zip file named three.js-dev.zip, open it, you will find a three.js-dev folder inside, double click and open it
6. Select all files and folders of threejs distibution, you will have to copy/paste inside the already created B4XWebGL folder
7. Download latest jServer library (4.02) from here on post #2 and put .xml and .jar files to your Internal Library folder replacing the existing ones or creating a backup.
8. Done setup complete !!! At this point you are able to use B4J WebGL library
9. Extract the Demos.zip examples in a place where you have your projects.
10. Open the B4J IDE, open the first demo project example jWebGL_Demo1
11. Compile it, you will end up with a small form with a button, press it to start the process
12. After you press the button, you will see some infos in the log, and at the end of log you will see 2 lines in magenta color, one to access the created scene, and one to get the library main page
13. OK now it's time to show our 3D scene created in the jWebGL_Demo1 project, copy from the log the magenta line to show the scene, paste it on your browser and if all it's ok, you will end up to see a brown cube at center of the screen with textures applied
14. You can use mouse LEFT button to rotate it, RIGHT button to translate, MIDDLE button (or wheel) to zoom
15. Compliments !!! This is your HelloWorld 3D scene with WebGL library !!!
16. Now copy from the log the line to view the library main page, paste it on your browser of development machine (or other devices in local network) here you will see the library main page and some useful infos and links you can view. You have even a link with files in the threejs distribution you placed inside B4XWebGL folder, examples, textures and more. They are all served over HTTP, you can access them from browser .... you can even test all threejs demos inside the /examples folder, they are the same that threejs site examples, but they are offline now, all served over HTTP on your local network

A big thank you to @Erel that sent me the latest version of B4J Server (4.02), that offers the possibility to get server logs without ciclically open every 10 seconds the server log file and get here if there are modifications.... it works really well. It even permits to set the correct log timestamp you can pass as GMT string.

The five demo projects I've provided are just simple demos, but disposed as small tutorial to start manage this, largely commented to explain a bit how you can start with WebGL library.

So now you can test all demos one by one, all works the same manner as previousely explained (from step 9). Just remember to terminate the current project before you start others
(because in these demo projects I used the same HTTP port for all projects) or the server will be unable to bind and serve the new scene because the port is already open and used by another process. Note that you can use more concurrent projects open in the browser at same time, just use a differtent HTTP port for any project.

These demo projects are pretty simples, they are just to show you a starting point, but absolutely you cannot see the library power from here.
From demo 4 you will start to see and know that if you want to make something complex, this library permits to do it, so probably you will
end up to know that actually you cannot do it other ways that using this library.

The space for upload is limited so I cannot post demos with complex scenes where I use animated detailed 3D models with textures, mipmapping and more ...
I promise I will write some other posts where I release some more complex demo scenes, with animated models, and with starting points to create some FPS and Flying games.
Probably I will put external links where you have to download additional resources like models and textures.

You will noticed that every time you access files over HTTP, the B4J WebGL library offer you a way to get the server logs for any request file, they are passed as string to the _ServerLog Event, you can use them to show them where you want, in a TextArea, collect all logs to a ListView and more.... in the demo projects we just show them in the log with different color based on the HTTP Response code that the message contains .... 202, 304, 404.

Note that every time you request an HTML file, you will see the server log for that file and for any file that HTML or JS code request, so class imports, textures, models, sounds, videos and more. The log help you to know what file a project request, if file is found etc.... Note that the log is even accessible if you compile the app and launch it from terminal, just they are single color.

After you tested some or all threejs provided examples, may you want a clean development system ....
To do this, open the B4XWebGL library where the threejs distribution is placed, here you can remove unused files, just used for examples.
You can remove some files but please do not change (or delete) the default folder structure.
Files you can remove are in /examples folder, open the /textures folder, here you can delete all folders and files inside or just what you don't plain to use in your projects,
at same way, open the /models folder, here you have a lots of models that consume a lots of space, another time you can remove all folders and files or just what you do not plain to use.
You can do the same with /sounds folder.
In the /fonts folder you can add more fonts and/or delete the existing if you plain to not use them.
You can even remove all html files examples that consume more space and even remove the /screenshots folder that contains the screenshots for examples.

Do not delete the /textures, /models and /sounds folders, here you need to put your personal textures, models and audio data to use in your projects.

After this you will have a clean development tool. You can put manually your personal textures, models and sounds you plain to use on one or more projects.
It is best practice to create subfolders where place all files divided by type, eg. in /textures create a folder /grass with all grass textures, /patterns with all patterns textures, /woods with all wood textures and so on ... This will help you when you use these files and open them in your projects.

You can even put files in your assets and copy them to the right position by code, to do this you can refer to ProjectFolder, it refer to the library folder (/examples), here an example code:

   Dim Separator As String = GetSystemProperty("file.separator","")
   Dim FilePath As String = $"textures${Separator}crate.gif"$
    If File.Exists(gl.ProjectFolder, FilePath) = False Then
        Wait For (File.CopyAsync(File.DirAssets, "crate.gif", gl.ProjectFolder, FilePath)) Complete (Success As Boolean)
        Log("crate.gif copy from assets. Success: " & Success & "   " & File.Combine(gl.ProjectFolder, FilePath))
        If Not (Success) Then
            LogError("You should place crate.gif in DirAsset")
            ExitApplication
        End If
    Else
        Log("crate.gif texture already exist: " & File.Combine(gl.ProjectFolder, FilePath))
    End If

An useful thing is to know how to use Blender (free), Freecad (free), or any other free or paid CAD to create customized objects and scenes, export them and then
import into your scene created with this library.

I'm happy to inform you, that I'm under development for the same library on B4A. Here because Android WebView fully support WebGL extensions, the library
is more powerful because it permits to integrate WebGL view inside our app (windowed or fullscreen, and even resizable with 3D rendering update) without use
of external browser. This even expand a lots the possibilities, because after a page with rendering is loaded, we cannot only change some things from JS
side, but we can even change anything from Android side on B4A, eg move a SeekBar or use Timers and change something in the 3D scene .... and this is awesome and
powerful.

I inform you in advance that, since developing the B4A WebGL library (more...more complex than this B4J WebGL)
required me more than 600 hours, I decided that it will be only available under donation.

Note: To please my cat, I had to download some 3D fish models and display them animated on my 24 inch screen, after that my cat (who is the owner of my house) got up and approached the monitor, then gave me permission to release this library... I probably would never have released it without downloading the fish models and animating them on my screen, and without permission of my cat .... so many thanks to my cat and 3D fish models ...

That's all ...

If you create something with this library (not commercial), don't forget to put here some feedback and to share the code on this forum, so other users can get your scene and study your code.
If you create something functional (commercial or not) please put in the About of your app a link to this thread.

Enjoy with Real 3D.

 

[roncoa]

Great job Max. Your work shows all your passion and knowledge. Well done.

 

[Jmu5667]

When I run demo1 I get this:

Initializing WebGL Library ...
Starting 3D engine ...
[11:18:22] Threejs library folder (jsm) do not exists C:\Users\jmurp\AppData\Roaming\B4XWebGL\jsm
[11:18:22] ERROR: Threejs library do not exist on C:\Users\jmurp\AppData\Roaming\B4XWebGL
Unable to initialize WebGL Library

 

[max123]

Hi @Jmu5667 probably you extracted it wrong way ?

When you open the threejs zip file, you will find a folder inside, you don't have to extract that folder,
instead you have to open that folder and extract all it's content, as I wrote on step 5 and 6.

To avoid confusion, now I marked double click and open it in bold on step 5.

Please do a try, if you need support I'm here.

To other users, please confirm this work for you ... Thanks

I attached the screenshot that show my B4XWebGL folder with extracted content.

 

[max123]

When some peoples test it (and do some feedback here) I can move
to the next step and release more demo projects to the community.

 

[byz]

Excellent library. It's also a library well worth testing and applying. But we still need some knowledge of 3D to use it.

 

[max123]

@byz Apart the fact I've tried to create some other 3D libraries in the past (but without success), I ensure you I'm not a 3D expert.

I simply followed some tutorials on the web, there are hundreds of them on threejs, and after a while I understand that they all do different things, but the basis is always the same.

Without having any previous knowledge of JavaScript or even 3D (except that I use CAD and have a 3D printer) in 6 months I wrote this library and I also learned to juggle JavaScript quite well to the point of being able to write my own ES6 JS module to be able to use the Gamepads and be able to import it just like all the other libraries in every project in which I need it. I also created (starting from threejs examples) some simple 3D games, just to test it.

At this point, with WebGL library, I can access threejs from B4J, when I access it, I can import 3d party JavaScript libraries (as exported ES6 modules) and even my libraries I created to extend something. I ensure you this is an amazing challenge.

You don't have to manage things at low level (like OpenGL), threejs just do it for you, but it even permits to manage low level and you need these only for some complex and complicated things. Generally you only manage 3D code at high level. Next I will release more complex code.

You can start from my Demos, they are simple to know and study the code, I wrote these as small introduction to threejs for users, so start from Demo1, Demo2 and so on... and read comments I wrote in the code, this may help you.

On the web you can start from here but the web if full of tutorials, just I advice you do no follow too old tutorials, may something changed in threejs:
https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
https://discoverthreejs.com/


For anyone who has any doubts about what THEEJS is, this is from discoverthreejs book main page: https://discoverthreejs.com/

three.js is the world's most popular JavaScript framework for displaying 3D content on the web.​

With three.js, you no longer need a fancy gaming PC or console to display photorealistic 3D graphics. You don't even need to download a special application. Now everyone can experience stunning 3D applications in the palm of their hand using nothing more than a smartphone and a web browser.

This amazing library and the vibrant community that surrounds are all you need to create games, music videos, scientific and data visualizations, or pretty much anything else you can imagine, right in your browser, on your laptop, tablet, or smartphone!

This book covers everything you need to start creating amazing, professional-quality, high-performance 3D web applications that run on any operating system and device, from smartphones to laptops to smart-watches, even if you are completely new to web development and computer graphics. three.js is the most accessible computer graphics framework that has ever existed, and we will take full advantage of that to guide you to a high level of expertise, in no time at all.

Here, we introduce all the foundational concepts you need to create a basic three.js application, and with this knowledge you'll be creating amazing projects of your own in no time. With the power of the third dimension, the only limit is your imagination!

 

[yaqoob]

Excellent job and thank you, Max. I have complied demo 1. I got the following error:


WARNING: package com.sun.javafx.embed.swing.oldimpl not in javafx.swing
Waiting for debugger to connect...
Program started.
C:\Users\mydata\AppData\Roaming\B4XWebGL
Initializing WebGL Library ...
Starting 3D engine ...
WebGL library initialized
Found 5307 file/s in 524 folder/s - Total of 5831 folders and files.
Threejs distribution folder: C:\Users\mydata\AppData\Roaming\B4XWebGL
Threejs [build] folder: C:\Users\mydata\AppData\Roaming\B4XWebGL\build
Threejs [library] folder: C:\Users\mydata\AppData\Roaming\B4XWebGL\examples\jsm
Threejs [project] folder: C:\Users\mydata\AppData\Roaming\B4XWebGL\examples
Start http server on port 8888 serving C:\Users\mydata\AppData\Roaming\B4XWebGL
java.lang.RuntimeException: java.lang.NoSuchMethodError: 'void anywheresoftware.b4j.object.ServerWrapper.setLogsTimezone(java.lang.String)'
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:140)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:98)
at anywheresoftware.b4a.keywords.Common$3.run(Common.java:1118)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:428)
at java.base/java.security.AccessController.doPrivileged(AccessController.java:391)
at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:427)
at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
at java.base/java.lang.Thread.run(Thread.java:832)
Caused by: java.lang.NoSuchMethodError: 'void anywheresoftware.b4j.object.ServerWrapper.setLogsTimezone(java.lang.String)'
at b4j.example.webgl$ResumableSub_StartServer.resume(webgl.java:1461)
at b4j.example.webgl._startserver(webgl.java:1411)
at b4j.example.webgl$ResumableSub_GetEngine2.resume(webgl.java:836)
at anywheresoftware.b4a.BA.checkAndRunWaitForEvent(BA.java:156)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:105)
... 9 more

 

[AnandGupta]

WARNING: package com.sun.javafx.embed.swing.oldimpl not in javafx.swing

This maybe the reason

Note that because JavaFX WebView does not exposes WebGL functionality, the 3D view cannot be
embedded on top of JavaFX, instead it is exposed over HTTP and accessible over external browser.

 

[aeric]

java.lang.RuntimeException: java.lang.NoSuchMethodError: 'void anywheresoftware.b4j.object.ServerWrapper.setLogsTimezone(java.lang.String)'

The error occured at this line:

Wait For (gl.GetEngine(File.DirData("B4XWebGL"), Port, "GMT+2")) Complete (Success As Boolean)

related to Timezone as String.

 

[max123]

My apologies @yaqoob and all users, but today I was offline, I just read it now.

@AnandGupta no the problem is another, please see next.

@aeric you are completely right.
The main error is

java.lang.RuntimeException: java.lang.NoSuchMethodError: 'void anywheresoftware.b4j.object.ServerWrapper.setLogsTimezone(java.lang.String)'

To all users, @Erel sent me (on August) the latest jServer library that expose this new functionality to set logs timezone.
I do not know if the new jServer library was released on this forum until now, mine is 4.02, I attached a screenshot, it says that the internal is 4.01.

Anyway for peoples have this problem, this is the related thread, at post #2 download the new jServer 4.02 and put .xml and .jar files to B4J Internal Libraries folder replacing the old ones or create a backup.
https://www.b4x.com/android/forum/t...rver-logs-and-show-it-on-the-ide-logs.162402/

My apologies to all users, now with new jServer it will work as expected.
I've updated the main thread Step by Step, see step 7.

Merry Christmas to all with WebGL Library.
Max

 

[aeric]

After updated the jServer library, I modified the code as following:

Sub Process_Globals
    ' existing code
    Private AppName As String = "B4XWebGL"   ' added by aeric
    Private AppDir As String                 ' added by aeric
End Sub

xui.SetDataFolder(AppName)
AppDir = File.DirData(AppName)
Wait For (gl.GetEngine(AppDir, Port, "GMT+2")) Complete (Success As Boolean)

Copy "build" and "examples" folders from three.js-r171.zip into C:\Users\<username>\AppData\Roaming\B4XWebGL

 

[max123]

Thanks @aeric and Merry Christmas to you and all users.

Yes, you are free to manage it that way to be more simple and portable, the final result do not change.
I advice you to create some 3D templates (skeleton) with all WebGL library events as for my demos or customized by you, so when open these you just have to put your scene code inside the ReadyToCode callback and all will works as expected without rewrite redundant code every project.
If create some templates is difficult, you can just create it on any text editor, then on every project just copy/paste to B4X IDE.

For this....

Copy "build" and "examples" folders from three.js-r171.zip into C:\Users\<username>\AppData\Roaming\B4XWebGL

may you need some other files, but personally I do not tested.
I mean files like favicons and more inside the main folder... you can see if there are missing files from the Server log on B4J IDE.
May you can confirm that there are no 404 http requests by just copy these two folders.

Many thanks for testing WebGL library....

I will release new more complex scenes next days, with animated models and a base for FPS and Flying 3D games.
I even will release the Gamepads support.

Stay tuned.
Max

 

[yaqoob]

Thank you, Max. The problem is solved, and it is working perfectly.

​

 

[Mehrzad238]

This is a wow, the fact that a free library is enough.

 

[max123]

@Mehrzad238 Im glad you like the fact that the library is free, but please test it and report your experience here to the forum, I'm more happy if you like and use it.
You never immagine what you can do with this library. I will post new more complex demos next days. Stay tuned.

 

[Mehrzad238]

@Mehrzad238 Im glad you like the fact that is free, but please test it and report your experience here to the forum,
I'm more happy if you like and use it.
You never immagine what you can do with this library. I will post new more complex demos next days. Stay tuned.

Nicely done. I just saw you making the library for Android I could not be happier. This is how you start the new year

 

[max123]

@Mehrzad238 I'm happy to inform you, and all users... That I've almost completed the B4A WebGL library.
It is insane... because it is code compatible with this one, but even because it is more powerful.

It permits to show the 3D scene directly on Android WebView, and because this not necessary require external browser, B4A can iteract with the scene and
change anything during scene creation and even after the scene was created. The user can decide to make changes with JavaScript or with B4A or both.

It do not only works on a WebView, at same time it is even exposed over HTTP, so the user can open the 3D scene on any device using the browser,
just pointing to the right page served by android (the one displayed on the B4A IDE log). It is multiclient.

I only have physical old devices with android 6, so not fully compatible with WebGL, but all the demos attached to this thread works on emulator with Android 12, most of them at 60 fps, needed to set the right video driver in emulator settings, in my case I use native OpenGL because DirectX11 result slow on my system with my integrated videocard (on Ryzen7 13x13x5 cm minipc) and on same projects I have a lower framerate.

Please, note that my CPU have all 8 threads at 100% when I render any WebGL scene on emulator, even the simpler scene, but this depends on emulator or some settings, generally the emulator consume a lot of host CPU with any app. But apart high CPU usage for emulation, because 3D scene is really hardware accelerated (if selected right driver) I can archive high framerates. The fact that it is hardware accelerated is sure because on Windows 11 I see the GPU graphic usage that increases depending of the scene complexity and how I manage the scene with zoom, the more polygons are displayed, the more the GPU usage increases as expected, when the scene complexity increases, at certain point the framerate will start to decrease.

Finally the same even happen on this B4J WebGL library opening the scene in the browser, the GPU usage will increase, but here, because there are no hardweight emulator involved, the CPU usage is irrelevant, only the GPU usage will increase.

I will release B4A WebGL library next days as donationware...

... but before I release this I've to release some other more complex demos for B4J WebGL library and my JavaScript gamepad module I wrote to access up 4 gamepads, this module is compatible with all browsers that support Gamepad Web API, so it will works on all modern browsers, on desktop and even on android, the user just have to connect one or more gamepads and it will be recognized. Not only USB gamepads, it even support BLE gamepads and even custom controllers sees as gamepads, eg. I've used ESP32 to create BLE gamepads that my PC or all my Android devices sees, after connecting over bluetooth ESP32 will be a custom gamepad normally seen by any operating system and usable by code to control anything inside the 3D scene or in general inside JavaScript. I use the ESP32-BLE-Gamepad library to do it, will works with any ESP32, there are similar libraries to do this over USB but only works on ESP32-S3 or other chips with native USB.

Stay tuned.

 

[byz]

Congratulations

 

[max123]

Congratulations

Thanks,

this required a very big work to get it all working on different platforms the same way, and expecially with fully portable code between Desktop and Android.
Apart some small changes in libraries initializations a project can be ported from Desktop to Android or viceversa in no-time by just copy/paste in the B4X IDE.

For iOS I do not managed (I don't have B4i), but it should work as well on Android, may better.