WebGL effort

Information, contacts and source code for ports to Linux, Windows, etc.

Moderators: winston, another_commander

Post Reply
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

WebGL effort

Post by grondilu »

Hello,

so I bought a Chromebook lately and apparently there's no way to run Oolite on this machine (unless I go in developper mode but I'd like not to do that). It is a shame because it's my only machine with decent GPU power.

Google's philosophy is to do everything in the browser, including gaming. And WebGL is supposed to be the way to go.

Rewriting Oolite completely in WebGL would be a huge endeavor, but I'd be happy to have at least pieces of working code to experiment with. WebGL is also an interesting technology per se. So I started learning about it and tried to render Oolite's models with it.

Here is for instance my attempt at modelling the Cobra Mk.III

Image

http://grondilu.github.io/oolite/cobra3.html

As you can see the texture is messed up, but it's encouraging for a first attempt. Fixed: Ok I have a better grasp on how textures work now. Just need to write a script to automate the mapping from the .dat.

I will report progress on this thread if it raises interests.
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

Re: WebGL effort

Post by grondilu »

Good news. The script I wrote for mesh conversion seems to work.

Here is a test with the Anaconda:

Image

Now I need to set the code to display all the ships and have the viewer select them with the drop-down list.
User avatar
Day
---- E L I T E ----
---- E L I T E ----
Posts: 545
Joined: Tue Mar 03, 2015 11:35 am
Location: Paris

Re: WebGL effort

Post by Day »

Hmm... I've made some professional webgl application in 2012 (nuclear plant decommissioning software prototype) with the gecko engine.

At the time, my biggest limitation was the size of the models and textures (download time, size in memory, limited speed of manipulation). Is this better now?

My Oolite installation uses something like 4gb of ram...
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

Re: WebGL effort

Post by grondilu »

My conversion script seems to be working fine, and I finally understood how to show several models in the same screen without reloading all the buffers.

A very difficult part was to preload all texture images. If I don't some models just don't show up.

Thanks to this guy who provided a weird, yet efficient solution.

Six ships so far : Anaconda, Asp, Boa, CobraIII, constrictor and krait. Adding a ship only takes a few seconds but I'll focus on the Coriolis station from now on.

Since this is HTML5, it is totally possible to add those to the Oolite website for decoration purpose. Feel free to do so.

http://grondilu.github.io/oolite/ships.html
another_commander
Quite Grand Sub-Admiral
Quite Grand Sub-Admiral
Posts: 6683
Joined: Wed Feb 28, 2007 7:54 am

Re: WebGL effort

Post by another_commander »

Good job. Is it possible to do this for the newer ships (the post-1.80 ones)?
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

Re: WebGL effort

Post by grondilu »

another_commander wrote:
Good job. Is it possible to do this for the newer ships (the post-1.80 ones)?
I can try, but I'm not sure where they are or how to identify them.
another_commander
Quite Grand Sub-Admiral
Quite Grand Sub-Admiral
Posts: 6683
Joined: Wed Feb 28, 2007 7:54 am

Re: WebGL effort

Post by another_commander »

grondilu wrote:
I can try, but I'm not sure where they are or how to identify them.
In the 1.82 release Resource folder, look inside Models for oolite-*.dat and inside Textures for oolite-*.png files. These are the ones Oolite uses at the moment.
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

Re: WebGL effort

Post by grondilu »

another_commander wrote:
grondilu wrote:
I can try, but I'm not sure where they are or how to identify them.
In the 1.82 release Resource folder, look inside Models for oolite-*.dat and inside Textures for oolite-*.png files. These are the ones Oolite uses at the moment.
It seems that they are much bigger. cobra3_redux.dat has less than 15 vertices while oolite_cobra3.dat has more than a thousand.

The format is also a bit different (the first field in the TEXTURES section is just 1 for oolite_cobra3.dat, which was unexpected).

It will require some tweaking but it's doable.

Also, I remember now that I did not use oolite_cobra3.dat because it provides a reference to two 'materials' called 'Gun' and 'Hull' and no obvious reference to textures. And I don't know how to deal with materials yet.
another_commander
Quite Grand Sub-Admiral
Quite Grand Sub-Admiral
Posts: 6683
Joined: Wed Feb 28, 2007 7:54 am

Re: WebGL effort

Post by another_commander »

grondilu wrote:
Also, I remember now that I did not use oolite_cobra3.dat because it provides a reference to two 'materials' called 'Gun' and 'Hull' and no obvious reference to textures. And I don't know how to deal with materials yet.
For textures corresponding to materials, check shipdata.plist in the Config folder. It is not entirely straightforward, but all the information is there. For example, cobra3-trader has a like_ship reference to oolite_template_cobra3-trader, which in turn has a like_ship reference to oolite_template_cobra3, which references the Hull and Gun materials as having diffuse maps oolite_cobra3_diffuse.png and oolite_cobra3_subents.png respectively. It can work in similar way for the rest of the ships.
Crush
Competent
Competent
Posts: 35
Joined: Tue Oct 20, 2009 2:07 pm

Re: WebGL effort

Post by Crush »

All looks great so far :-)
User avatar
Norby
---- E L I T E ----
---- E L I T E ----
Posts: 2577
Joined: Mon May 20, 2013 9:53 pm
Location: Budapest, Hungary (Mainly Agricultural Democracy, TL10)
Contact:

Re: WebGL effort

Post by Norby »

grondilu wrote:
I don't know how to deal with materials yet.
The following wiki pages describe the related config files:
[wiki]Materials in Oolite[/wiki]
[wiki]Shipdata.plist[/wiki]
Subentities will be your next challenge.
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

Re: WebGL effort

Post by grondilu »

Well, I have some difficulties with the textures of the 1.8+ version of the CobraIII.

First, I don't know yet how to apply several textures on a mesh, so I tried with only one.

And then, something went wrong anyway. Maybe skipping one of the texture messes up the vertex affectation. This needs some work.

I pushed it on github anyway so you can check it out.

Image
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

Re: WebGL effort

Post by grondilu »

Well, this is hard. Especially since I've realized I could not reuse Oolite's default shaders :

Image

A bit of googling tells me that although webGL is supposed to be a javascript OpenGL API, it's not fully compatible.

I don't think I'll be able to render the 1.8+ models any time soon. But I can keep musing with the old models which are easy to translate.
Commander_X
---- E L I T E ----
---- E L I T E ----
Posts: 675
Joined: Sat Aug 09, 2014 4:16 pm

Re: WebGL effort

Post by Commander_X »

grondilu wrote:
Well, this is hard.
True.
grondilu wrote:
I don't think I'll be able to render the 1.8+ models any time soon. But I can keep musing with the old models which are easy to translate.
For the adder 1.8+ model you have on the page ATM, here's a quick hack (the main function of the fragment shader) to allow it to render properly:

Code: Select all

    void main(void) {
        vec4 color = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        gl_FragColor = vec4(color.r, color.g, color.b, 1.0);
    }
The trick is the textures use alpha channel (I guess for emission or the sorts). By just replacing it with 1.0, you're mainly discarding its use (well, at least until there is something useful to do with it later :wink: ).
The 1.8+ cobra3 in your image looks wrongly UV mapped. The easiest way to fix it (another hack :oops: ) is to replace all the "1"s in the first column for the TEXTURES section of the .dat file with 0 (that is to make it single texture), and use only the diffuse (hull) texture. The gun will be textured a bit weird, but the main hull will look OK (this is what I used to get the model converted for Blender -- whole UV map is better than no UV map).
grondilu
Competent
Competent
Posts: 48
Joined: Sat Jun 27, 2015 2:48 pm

Re: WebGL effort

Post by grondilu »

Commander_X wrote:
For the adder 1.8+ model you have on the page ATM, here's a quick hack (the main function of the fragment shader) to allow it to render properly:

Code: Select all

    void main(void) {
        vec4 color = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        gl_FragColor = vec4(color.r, color.g, color.b, 1.0);
    }
The trick is the textures use alpha channel (I guess for emission or the sorts). By just replacing it with 1.0, you're mainly discarding its use (well, at least until there is something useful to do with it later :wink: ).
That does work indeed:


Image

Thanks. With this I may be able to render the Coriolis station. And if I have a Coriolis station and the ships, I can do a big part of the gameplay in space.
The 1.8+ cobra3 in your image looks wrongly UV mapped. The easiest way to fix it (another hack :oops: ) is to replace all the "1"s in the first column for the TEXTURES section of the .dat file with 0 (that is to make it single texture), and use only the diffuse (hull) texture.
The problem is that I thought what I did was amounting to doing exactly this. Apparently not.

I'm very much confused by what happened to the 1.8+ cobra3. I need to think on it hard to understand what's wrong.
Post Reply