WebGL4J - Simple GWT based WebGL wrapper for Java

Engines, Libraries and Tools
#1

WebGL4J is a WebGL wrapper library for the Java programming language which allows to use Java to write HTML5 applications using GWT (Google Web Toolkit) which uses WebGL to draw 2D / 3D hardware accelerated graphics using a HTML5 Canvas.
[h1]Design[/h1]
WebGL4J aims to provide static methods to all the WebGL functions, and also the extensions present in the Khronos WebGL Registry. This provides a similar interface to people who are coming from legacy OpenGL environments (by legacy, I mean desktop) to use WebGL easily, yet having the same interface to the users coming from JavaScript.

[tr]
[td]Class[/td]
[td]Description[/td]
[/tr]
[tr]
[td]WebGL10[/td]
[td]Contains all the constants and functions defined in the WebGL 1.0 specification[/td]
[/tr]
[tr]
[td]WebGL20[/td]
[td]Contains all the constants and functions defined in the WebGL 2.0 specification[/td]
[/tr]
[tr]
[td]{ExtName}[/td]
[td]Contains all the constants and functions defined in the extension {ExtName}[/td]
[/tr]

As you have seen above, that is how the functions are structured in the wrapper, allowing to use WebGL functions from any where in the app once the context is created. All the functions have the OpenGL prefixes and suffixes, to help the users coming from the native desktop OpenGL.
[h1]Installation[/h1]
Download the webgl4j.jar from releases and add it in the classpath of your GWT application. Now inherit the WebGL4J in your modules that use this library by adding the following line to your GWT module XML file.


<inherits name="com.shc.webgl4j.client" />

That should let you use WebGL4J in your project. You can now start writing WebGL applications using GWT.
[h1]Context Creation[/h1]
To create a WebGL context, you can use the createContext method from the WebGL10 class or the WebGL20 class, with a canvas element from GWT.


Canvas canvas = Canvas.createIfSupported();
WebGLContext.Attributes ctxAttributes = WebGLContext.Attributes.create();
ctxAttributes.setStencil(true);

// Create the context now
WebGL10.createContext(canvas, ctxAttributes);

Don’t forget to attach the canvas to the root pane or you won’t be able to see it on the page. The above example creates a WebGL 1.0 context with a stencil buffer. Note that it is completely optional to pass context attributes object to the createContext method if you need none.
[h1]Links[/h1]
There are a lot of other features including multiple contexts, extensions, fullscreen support, a builtin timer etc., See the README of the GitHub project for information on using them.


GitHub repository | Online Examples | Examples (Source)

Special thanks to NegativeZero for the awesome logos. The logos are under Creative Commons licence and the library is under MIT licence. If you have anything to talk, please post either here or on the IRC #WebGL4J on Freenode.

#2

Hi

What does your project bring compared to GwtGL, gwt-g3d and the WebGL binding of Tea VM?

Are you allowed to use the trademark “WebGL” that way? Have you read the Khronos Group’s guidelines?

#3

Is this bound to GWT? That could pose as a roadblock, as you have to use GWT for this to work.

#4

That’s like saying a Java library could pose as a roadblock, as you have to use the java compiler for that to work. GWT is a toolkit plus compiler, it compiles Java code into JavaScript code ready to be executed on the web.

GwtGL is a library I have myself used previously, and it lacks extensions and also it doesn’t support WebGL context attributes. Not only that, but I find it different (even WebGL is for that matter) that it returns objects instead of integers which we the desktop users are used to. And I liked the LWJGL’s design style, so I wrote this library. This has static functions which we can just static import. This makes porting LWJGL games to WebGL a lot easy, since the functions also have the same prefixes and suffixes.

gwt-g3d is a high level library, and doesn’t expose WebGL directly. It provides several utility classes like Camera, Mesh, StaticMesh etc., where I myself wanted a low level library. WebGL4J will be a low level library and it allows the developer to use WebGL just like he wishes without any additional overhead.

I have not found Tea VM until today, so I really cannot say anything about it. But since it is just a Java to JS compiler just like GWT, one should compare GWT with TeaVM, and not my library with it. And I see that the classes in it’s WebGL binding is very similar to GwtGL so all the things I said there apply to it.

And above all, no other library supports WebGL2 bindings till now, WebGL4J provides them too. It even provides all the Khronos ratified extensions. Another issue I find in GwtGL is it includes TypedArrays while they are present in GWT-User library itself. Above all, the last release is done in December 2011 and is showing it’s age.

I’m not sure whether I’m allowed to use it that way or not, I need suggestions on that matter. I chose this name because it brings WebGL to the Java language, so I called it WebGL4J. If it is not legal, I’m happy to change it to a legal name. Thanks for telling this so soon, it would have been difficult after some time.

#5

This library seems pretty cool and useful for porting existing codebases to the web.

However the roadblock that I always run into is sound. If you could also add bindings for OpenAL that would be the final piece in making it super awesome and useful to a lot more java libraries, engines and games.

The cool thing is the EMScripten project has already implemented OpenAL in the browser (I believe it wraps the Web Audio API). Its already used by many projects including the web version of the Unreal Engine. Therefore I assume to implement a binding its just a matter of linking to the javascript methods of the Emscripten OpenAL implemention.

#6

Thanks a lot! That is actually the original idea, and is why I have purposefully added the gl prefix and suffixes to the WebGL function names and made them static. With some small changes, I can say that one can port the existing codes easily.

That’s a good idea, in fact I was looking for the same thing, and I found the WebAL project, which is a new API that is almost similar to WebGL and uses WebAudio or HTML5 Audio or even a flash fallback depending on the browser support.

Take a look at this: https://github.com/benvanik/WebAL

I however didn’t test it, will do it pretty soon. I will also look into the EMScripten library that you mentioned.

#7

Yeh I’ve come across that but looks a bit dead as its not had any commits to the main source code in over 5 years (maybe it’s just complete?).

Emscripten’s OpenAL implementation is just a single js file (library_openal.js), last updated 2 months ago.

Interestingly just noticed that Emscripten also seem to have a GLFW3 implemetation. Maybe its not to far fetched to think that it might be possible to write an API compatible subset of LWJGL3 that can run in the browser and desktop :slight_smile:

#8

You’re right, WebAL is actually very old but the API idea is quite nice, did you take a look at the IDL that defines the spec? It’s pretty close to the design of WebGL. Of course it’s not the complete API but the style is good. I need some more time to understand the emscripten’s port of the library, but will we have permission for using their’s?

And then, there is an issue with Web Audio API, it is not available in internet explorer, but it is present in Edge. Also it has some alternate function names in mobile safari. I think we should be writing our own API using Web Audio API.

By the way, this is getting off topic of thread, shall we talk about this more in PMs or IRC? I prefer IRC for this.

#9

Not really looked to deeply into WebAL but does look well organised.

Emscripten uses the MIT license so there is no real problem about permission to use.

Writing and maintaining your own OpenAL implementation around Web Audio API would have its advantages (more control, faster fixes, etc) but also disadvantages (more code to maintain, write, test, etc).

I wouldn’t worry too much about supporting internet explorer at this point, Microsoft have already put their weight behind Edge and there is not much point in complicating your code base for a browser that’s on the decline. Any serious application using the library won’t be ready for at least a year or so in which time it’ll have declined even more. Besides WebGL support is pretty rubbish on IE anyway so not much use jumping so many hoops to support it. Alternatively if you must support it you could go for a library like SoundManager2 which adds more backends.

Sorry for going off topic, maybe a seperate thread would be a better idea.

#10

The idea sounds very interesting! I have been developing games both in HTML5 and Java but I never felt interested going for WebGL just yet. So if I understand the idea correctly, I am able to develop a game in Java and with some tweaks export it to HTML5? Because that would be really awesome!

Normally I would go for Google Chrome but Edge really really works nice. A hell lot better compared to IE.

#11

That’s the basic idea behind idea behind GWT, you write in Java and get that compiled to JavaScript sources which are executed in the web browser.

This library provides a binding to the WebGL API to the Java language. That means you can use Java to write your game, but you must use the WebGL bindings that this library provides to compile to HTML5. No other tweaks are required. It can be used to port Java games made using OpenGL. It doesn’t support Java2D and other libraries though.

I’m not sure if I understood your reply clearly, did I answer your question? If I had misunderstood you, will you please re-phrase your question?

#12

Yes you did. Thanks!

#13

[quote=“kappa,post:7,topic:55777”]
that would be very good! :slight_smile:

#14

Just made a bug fixing release, fixing two really important bugs: Release v0.2.7

The first bug, is the occurrence of ClassCastException when you invoke the generic any return methods (like glGetShaderParameter). GWT is returning JS integers with generics as JavascriptObject and not as expected java.lang.Integer or such, resulting in a ClassCastException being thrown. This release fixes this bug by boxing the javascript primitives into java objects which are then unboxed.


// This old code in LWJGL
-if (!glGetShaderParameterb(shaderID, GL_COMPILE_STATUS))
-    // ...

// Becomes like this in WebGL4J
+if (!WebGL10.<Boolean> glGetShaderParameter(shaderID, GL_COMPILE_STATUS))
+    // ...

The second bug, is a missing function glGetVertexAttrib() from the WebGL20 class. For some reason, I have added the native method before and not a public java method which wraps it, which this release fixes.

Another important note:

I know that the generic any return functions are inefficient due to boxing and unboxing (although GWT detects them and removes boxing and unboxing sometimes), those methods are added to keep the API similar to the javascript API. The next version v0.3.1 will be adding typed methods as alternatives.

#15

Nice project.

#16

WebGL4J 0.2.7 is now on maven central, you can now use Maven or Gradle to get WebGL4J as a dependency.

[icode]Maven[/icode]


<dependency>
    <groupId>com.goharsha</groupId>
    <artifactId>webgl4j</artifactId>
    <version>0.2.7</version>
    <scope>compile</scope>
</dependency>

[icode]Gradle[/icode]


compile group: 'com.goharsha', name: 'webgl4j', version: '0.2.7'

// or shorthand notation
compile 'com.goharsha:webgl4j:0.2.7'

Very happy to share this information.

#17

WebGL4J 0.2.8 is now in the maven central. Also released on GitHub for who are not using maven.

This is a bug fix version over v0.2.7 that fixes an important bug with the conversion of webgl objects to integer handles that generates two or more objects with the same handle if deleting objects is performed. It is recommended that all users using 0.2.7 to immediately switch to v0.2.8 to prevent that from happening.

[icode]Maven[/icode]


<dependency>
    <groupId>com.goharsha</groupId>
    <artifactId>webgl4j</artifactId>
    <version>0.2.8</version>
    <scope>compile</scope>
</dependency>

[icode]Gradle[/icode]


compile group: 'com.goharsha', name: 'webgl4j', version: '0.2.8'

// or shorthand notation
compile 'com.goharsha:webgl4j:0.2.8'
#18

Nice.

#19

Just wanted to say… Thank you!!! gwt-g3d was so painful, because it hid WebGL too much.

So far, I’m finding your library so much cleaner and easier to use!

I have one question regarding textures with alphas. In the texture example:
https://github.com/sriharshachilakapati/WebGL4J/blob/master/examples/src/main/java/com/shc/webgl4j/examples/client/TextureExample.java.

If switch the image to be an image that contains some alpha values, and I set the background colour of the canvas to a colour, say blue:
canvas.getElement().getStyle().setBackgroundColor(“blue”);

I would have thought the image would bleed nicely into the blue. However, it does bleed, but it seems to get a white tinge to it, as if there is some white in the background somewhere.

I’m wondering if the vertex shader, or fragment shader need to be modified? Or if I need to do something else?

Any help would be much appreciated. And a huge thank you again for the brilliant library!

#20

Thanks for your complements @Ranger, I’m glad that this is useful to you.

Regarding the background thing, I don’t recommend setting the background color through the elements, instead use the [icode]glClearColor()[/icode] function. And to get transparency working, you need to enable blending and set a blend function.


glClearColor(0, 0, 1, 1); // Set to blue
glClear(GL_COLOR_BUFFER_BIT);

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

I think that should work for you. Hope this helps.