Java-Gaming.org Hi !
Featured games (90)
games approved by the League of Dukes
Games in Showcase (714)
Games in Android Showcase (214)
games submitted by our members
Games in WIP (787)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1] 2
  ignore  |  Print  
  WebGL4J - Simple GWT based WebGL wrapper for Java  (Read 35179 times)
0 Members and 1 Guest are viewing this topic.
Offline SHC
« Posted 2015-10-21 05:58:45 »



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.

Design


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.

ClassDescription
WebGL10Contains all the constants and functions defined in the WebGL 1.0 specification
WebGL20Contains all the constants and functions defined in the WebGL 2.0 specification
{ExtName}Contains all the constants and functions defined in the extension {ExtName}

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.

Installation


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.

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

That should let you use WebGL4J in your project. You can now start writing WebGL applications using GWT.

Context Creation


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.

1  
2  
3  
4  
5  
6  
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.

Links


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.


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.

Offline gouessej
« Reply #1 - Posted 2015-10-21 20:18:32 »

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?

Offline DarkCart

JGO Kernel


Medals: 121
Projects: 9
Exp: 50 years


It's all in the mind, y'know.


« Reply #2 - Posted 2015-10-21 21:28:05 »

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

The darkest of carts.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline SHC
« Reply #3 - Posted 2015-10-22 05:42:28 »

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

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.

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

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.

Quote from: gouessej
Are you allowed to use the trademark "WebGL" that way? Have you read the Khronos Group's guidelines?

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.

Offline kappa
« League of Dukes »

JGO Kernel


Medals: 115
Projects: 15


★★★★★


« Reply #4 - Posted 2015-10-22 09:52:51 »

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.
Offline SHC
« Reply #5 - Posted 2015-10-22 10:11:55 »

Quote from: kappa
This library seems pretty cool and useful for porting existing codebases to the web.

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.

Quote from: kappa
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.

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.

Offline kappa
« League of Dukes »

JGO Kernel


Medals: 115
Projects: 15


★★★★★


« Reply #6 - Posted 2015-10-22 10:43:24 »

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 Smiley
Offline SHC
« Reply #7 - Posted 2015-10-22 11:57:52 »

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.

Offline kappa
« League of Dukes »

JGO Kernel


Medals: 115
Projects: 15


★★★★★


« Reply #8 - Posted 2015-10-22 15:37:06 »

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.
Offline TheBoneJarmer

Junior Devvie


Medals: 6
Exp: 1-3 months


hi!


« Reply #9 - Posted 2015-10-22 16:48:08 »

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!

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.

Normally I would go for Google Chrome but Edge really really works nice. A hell lot better compared to IE.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline SHC
« Reply #10 - Posted 2015-10-22 17:19:16 »

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!

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?

Offline TheBoneJarmer

Junior Devvie


Medals: 6
Exp: 1-3 months


hi!


« Reply #11 - Posted 2015-10-22 18:11:40 »

I'm not sure if I understood your reply clearly, did I answer your question?

Yes you did. Thanks!
Offline basil_

« JGO Bitwise Duke »


Medals: 412
Exp: 13 years



« Reply #12 - Posted 2015-10-22 19:15:35 »

... it might be possible to write an API compatible subset of LWJGL3 that can run in the browser and desktop Smiley

that would be very good! Smiley
Offline SHC
« Reply #13 - Posted 2015-11-09 11:42:03 »

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.

1  
2  
3  
4  
5  
6  
7  
// 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.

Offline tberthel
« Reply #14 - Posted 2015-11-10 00:17:01 »

Nice project.

Offline SHC
« Reply #15 - Posted 2015-12-17 01:55:16 »

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

Maven

1  
2  
3  
4  
5  
6  
<dependency>
    <groupId>com.goharsha</groupId>
    <artifactId>webgl4j</artifactId>
    <version>0.2.7</version>
    <scope>compile</scope>
</dependency>


Gradle

1  
2  
3  
4  
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.

Offline SHC
« Reply #16 - Posted 2016-01-01 16:39:21 »

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.

Maven

1  
2  
3  
4  
5  
6  
<dependency>
    <groupId>com.goharsha</groupId>
    <artifactId>webgl4j</artifactId>
    <version>0.2.8</version>
    <scope>compile</scope>
</dependency>


Gradle

1  
2  
3  
4  
compile group: 'com.goharsha', name: 'webgl4j', version: '0.2.8'

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

Offline tberthel
« Reply #17 - Posted 2016-01-02 03:00:18 »

Nice.

Offline Ranger
« Reply #18 - Posted 2016-01-31 05:41:47 »

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!
Offline SHC
« Reply #19 - Posted 2016-01-31 06:29:17 »

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
glClearColor()
function. And to get transparency working, you need to enable blending and set a blend function.

1  
2  
3  
4  
5  
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.

Offline Ranger
« Reply #20 - Posted 2016-01-31 20:49:04 »

Thank you again!  That worked perfectly!

I actually had to explicitly set the canvas to black canvas.getElement().getStyle().setBackgroundColor("black"); otherwise, the white from it would bleed through.

While I'm a beginner at WebGL, I've been working with GWT for about 6 years now, so if you have any issues with the GWT side of things, I'd be more than happy to lend a hand.
Offline quew8

JGO Knight


Medals: 53



« Reply #21 - Posted 2016-03-26 19:17:20 »

Hey @SHC
Just started using WebGL4J (literally few hours ago so might be missing something) but I think you're missing a function.

In WebGL there is a variant of glBufferData() which takes a long for initializing an empty buffer of a certain size.
1  
void bufferData(enum target, long size, enum usage)

That's its definition on the WebGL quick reference card.

Anyway it certainly works for me using WebGL straight from JS but doesn't seem to exist in WebGL4J. Obviously easily worked around but just letting you know.
Offline SHC
« Reply #22 - Posted 2016-03-27 04:21:55 »

@quew8

Thanks for the find, will push this into snapshot build immediately. Will let you know once the build is published.

EDIT:

WebGL4J 0.2.9-SNAPSHOT is up in the OSSRH snapshot repositories.

1  
compile 'com.goharsha:webgl4j:0.2.9-SNAPSHOT'

Also added documentation from docs.gl to some of the functions, so update daily to receive more documentations.

Offline quew8

JGO Knight


Medals: 53



« Reply #23 - Posted 2016-03-27 12:28:28 »

Thanks very much. I actually just found something else as well.

For glBufferSubData(), it's spec is,
1  
void bufferSubData(enum target, long offset, Object data)

but WebGL4J has a prototype like the desktop GL version with a size parameter: "glBufferSubData(int target, int offset, long size, ArrayBufferView data)" which causes a crash when you try to use it "No function was found that matched the signature provided."
Offline SHC
« Reply #24 - Posted 2016-03-28 15:07:13 »

Thanks again, I have fixed them. Now there are JS style standard glBufferData variants and also the desktop ones. The desktop style call is emulated with the WebGL standard function.

1  
glBufferSubData(GL_ARRAY_BUFFER, 5, 10, bufferView);

is the same as the following call.

1  
2  
DataView dataView = DataViewNative.create(bufferView.buffer(), 10);
glBufferSubData(GL_ARRAY_BUFFER, 5, dataView);

Notice that we only create a new view, not copy the data into another buffer. The snapshot build is also updated.

Offline quew8

JGO Knight


Medals: 53



« Reply #25 - Posted 2016-03-29 14:55:03 »

Amazing. Thanks so much. One last thing, not a bug this time I promise, a suggestion. I was updating my graphics driver the other day and once it installed it messed around with already open Chrome and long and the short I notice that the default behaviour for your library if it cannot get a WebGL context is to blast you with an alert saying you don't have WebGL which then takes you to the get WebGL website.

A lot of the time this is desirable behaviour but not always. For example WebGL might only be a section of the page and the other stuff is still useful even if the WebGL isn't working in which case it's pretty annoying if you keep getting redirected whenever you tried to load it up. Also redirecting with alerts like that can screw up the back button on some browsers I think (because you can't go back twice since you keep getting redirected). So perhaps A) include a function to test if WebGL is supported (also turns out you can test whether it is the browser not supporting WebGL or the hardware) and B) make the popup behaviour default but optional for the developer?

Anyway here is a quick function I wrote to test for WebGL support:
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
/**
 * Returns null is WebGL is supported otherwise a String giving the reason why not.
 */

private static native String isWebGLSupported() /*-{
    var canvas = $doc.createElement("canvas");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if(gl && gl instanceof $wnd.WebGLRenderingContext) {
        return null;
    } else {
        if($wnd.WebGLRenderingContext ) {
            return "Hardware does not support WebGL";
        } else {
            return "Browser does not support WebGL";
        }
    }
}-*/
;

I think there are a few reasons you might not be able to create a WebGL context if the browser supports it but I'm pretty sure I'm getting this from the WebGL spec on MDN so seems fairly legit. Also not 100% on the creating an offscreen canvas and canvas just to test for support but this is apparently the established method according to MDN again. Also if you incorporate this into the actual context creation then it's a non-problem.

Obviously just my penny's worth but what do you think?
Offline SHC
« Reply #26 - Posted 2016-03-29 15:07:25 »

Your idea is good, and it is already present in the WebGL4J library since 0.2.7. You can use the
WebGL10.isSupported()
to test for WebGL 1.0 support, and for WebGL2, there is
WebGL20.isSupported()
. These methods return a boolean so you can use them in a if check and they work pretty fine.

This method is also available in all the extensions too, and it is the recommended way if you want to get custom error handling.

Offline quew8

JGO Knight


Medals: 53



« Reply #27 - Posted 2016-03-30 21:11:00 »

Ah very good. Knew they existed for the extensions but just never thought to look on the core classes, sorry.
Offline quew8

JGO Knight


Medals: 53



« Reply #28 - Posted 2016-04-06 20:00:00 »

Hey @SHC, I found another little bug.

glGetUniformLocation() is supposed to return a "-1" if the uniform doesn't exist in regular OpenGL. Obviously WebGL returns a "null" instead but the WebGLObjectMap maps a null to a zero. I suppose technically not a bug but I'm thinking undesirable behaviour?
Offline SHC
« Reply #29 - Posted 2016-04-07 15:13:43 »

Done, I actually never noticed that, so used the 0th location as null. Corrected it as per the documentation. Thanks @quew8 for mentioning it.

The change is in the commit d61533f and there is now a new snapshot build uploaded into the OSSRH repository.

Pages: [1] 2
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 
Rule (35 views)
2017-03-19 12:43:22

Rule (22 views)
2017-03-19 12:42:17

Rule (33 views)
2017-03-19 12:36:21

theagentd (38 views)
2017-03-16 05:07:07

theagentd (46 views)
2017-03-15 22:37:06

theagentd (42 views)
2017-03-15 22:32:18

theagentd (38 views)
2017-03-15 22:31:11

ral0r2 (116 views)
2017-03-03 11:52:41

ral0r2 (113 views)
2017-03-03 11:42:24

Archive (305 views)
2017-02-27 19:41:49
List of Learning Resources
by elect
2017-03-13 14:05:44

List of Learning Resources
by elect
2017-03-13 14:04:45

SF/X Libraries
by philfrei
2017-03-02 08:45:19

SF/X Libraries
by philfrei
2017-03-02 08:44:05

SF/X Libraries
by SkyAphid
2017-03-02 06:38:56

SF/X Libraries
by SkyAphid
2017-03-02 06:38:32

SF/X Libraries
by SkyAphid
2017-03-02 06:38:05

SF/X Libraries
by SkyAphid
2017-03-02 06:37:51
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!