Nativescript: OpenGL support

[cime]

Is there any plan to support OpenGL (full screen mode)? It would be nice to have some cross plaftorm OpenGL ES support...

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[zephraph]

Ahhh, that would be neat. I haven't personally I worked with OpenGL on mobile platforms though. Is the api fairly consistent?

[RangerMauve]

I would assume that this would be OpenGL ES which is a bit more low level.

Would this API be compatible with WebGL?

[valentinstoychev]

Hi @cime and all, thank you for this feedback and suggestion. We are thinking in this direction and it will help as a lot if you share a specific scenario that we can try to enable.

[bfattori]

@cime, @valentinstoychev, maybe you could just depend on the WebView? OpenGL ES and WebGL are basically the same thing. Would that not be the same thing?

[ligaz]

The problem with the WebView's WebGL performance is that it is not there yet :turtle: The right solution is to use something like EjectaJS's implementation.

[bfattori]

Maybe on ios, but on Android the WebGL engine is quite fast. For example:
http://lo-th.github.io/Oimo.js/index.html
On Jun 19, 2015 10:38 AM, "Stefan Dobrev" [email protected] wrote:

The problem with the WebView's WebGL performance is that it is not there
yet [image: :turtle:] The right solution is to use something like EjectaJS's
implementation https://github.com/phoboslab/ejecta.

—
Reply to this email directly or view it on GitHub
https://github.com/NativeScript/NativeScript/issues/289#issuecomment-113533267
.

[RangerMauve]

That's the thing, though. I doubt that the WebGL implementation in the browser could be easily ported to NativeScript. What'd be easier is to essentially do what EjectaJS did but in NativeScript and across both platforms.

[cime]

I would rather have a NS implementation that calls GLSurfaceView on Android and OpenGLES on iOS, and calls native OpenGL ES 2.0+ functions (glClearColor, glClear, glEnable).
I started porting an Android example to NativeScript but didn't managed to get a working version - here is a gists of the relevant part of the code https://gist.github.com/cime/eec1a872ad2b14661ff5

So what I would like to do using NS is:

1. Android example that uses OpenGL ES 2.0+ and draws a simple triangle
2. iOS example that uses OpenGL ES 2.0+ and draws a simple triangle
3. Abstraction of OpenGL ES 2.0+ that draws a simple triangle (this would probably include a widget for both platforms, which can be placed anywhere into layout, like a normal widget like Button for example)

And having this would be a base for creating NS game engines for example :)

[fela98]

Hi,
You might able to just use Ejecta, and something equivalent for Android (gles.js). My suggestion in any case, independent of whether you use an existing implementation or write your own, would be to make it adhere to the WebGL spec. I've heard that WebGL maps pretty straight-forward to OpenGL ES 2.0.

The most resource intensive work is then done natively, while most of the application logic still stays in the NS environment. This would also make it possible to use existing Javascript WebGL rendering engines ((2D) pixi.js and (3D) three.js).

Keep up the good work :+1:

[sixman9]

It would be very useful to have a decent 3D API. To that aim, I'd like to offer the following WebGL API reference resources, in the hope that someone, with more time/knowledge than myself, might be able to implement this as a singular, cross-platform, NativeScript API, or at least make a start on an [Canvas 3D] implementation:

WebGL rendering context interface spec function list (v1.0) @ Khronos

A Java implementation of the WebGL rendering context spec, from which functions/implementation might be extracted (from the GWTGL project)

These documents should contain references to all the functions and magic values the a WebGL-compliant Canvas implementation should offer.

Hopefully, the above documents can be used to create a NativeScript-native WebGL canvas, it should then be possible to use pre-existing WebGL code and libraries with little modification, assuming that these WebGL API functions are 'glued' to, or wrap, their corresponding, platform OpenGL ES calls, as suggested by @bfattori, earlier in the thread.

I'm certain someone will be willing to take up the challenge.

[cime]

Gles.js is on Github from yesterday - https://github.com/borisvanschooten/glesjs/

[bfattori]

That looks like the perfect answer for android.

Brett
On Sep 5, 2015 12:29 PM, "Andrej Cimperšek" [email protected]
wrote:

Gles.js is on Github from yesterday -
https://github.com/borisvanschooten/glesjs/

—
Reply to this email directly or view it on GitHub
https://github.com/NativeScript/NativeScript/issues/289#issuecomment-137972721
.

[sixman9]

Furthering my earlier post, would it not be possible to recreate a WebGL canvas-like environment entirely within the NativeScript environment, 'simply' by 'linking' the WebGL function list to the equivalent mobile-platform-specific OpenGL ES API calls (all within NativeScript)?

As laziness is a programming virtue , I'd like to offer the following WebGL javascript function API function list, NO Java function extraction acrobatics required:

*WebGL API (JavaScript) - webgl.js

*Differences Between WebGL and OpenGL ES 2.0

[fela98]

@sixman9 The webgl.js link is dead.

[sixman9]

Yeah, that'll teach me to drop the version query string, I've updated the URL to the newer Github link.

[N3ll]

You can vote in our voting-ideas-site here: https://nativescript.ideas.aha.io/ideas/NS-I-58.

[cime]

https://github.com/NativeScript/nativescript-canvas

[bradmartin]

Is OpenGL supported with android? I have some native libraries that depend upon openGL, before I dive in I'd like to know of limitations (if any).

[enchev]

Hey @bradmartin,

Do you have any progress with this? As far as we know OpenGL is supported in Android and should work normally in {N} as well. Of course if you want to expose your native lib to JavaScript you will need Java wrapper.

[bradmartin]

Hey @enchev - this is the lib https://github.com/Yalantis/StarWars.Android. I've wanted to do this for a loooong time. Earlier this year, probably in March it wouldn't work. I don't recall the exact error (if any was thrown) but never could get it to just work 😄 . No worries though on this specific thread.

[3kynox]

Reloading this. I would suggest to looking more onto ThreeJS as it implements really well OpenGL ES library and we start to find cool angular2 / typescript integrations on github.

[jpryne]

This is a key point, imho. Rather than transpiling a relatively large framework like THREE.js, seems to me that mapping a handful of low-level functions would suffice. I would be interested in working on this. provided I can work with someone with experience developing Nativescript itself.

[dagatsoin]

I think OpenGL ES and WebGL ES are both needed.

1. WebGL because it would allow all three.js/whatever renderer to easily port their JS/WebGL code into native script. An interesting repo is https://github.com/react-community/react-native-webgl which implements WebGL interface.
2. A more low level set of OpenGL ES commands for writing our own renderer.

[alg]

No doubt having great wrapper around OpenGL ES is fantastic, but in our project I live without it pretty easily. Here's how I initialize the GLKView inside the custom component:

  var context = EAGLContext.alloc().initWithAPI(kEAGLRenderingAPIOpenGLES2);
  var glkView = GLKView.alloc().initWithFrameContext(frame, context);

  glkView.layer.opaque = true;

  container.ios.addSubview(glkView);

[raould]

hi, is there per chance any traction here? it would be great to be able to experiment with making games via N+GL w/out it being a hacky guessing game uphill both ways battle. :-)

[Franziskus1988]

I'm currently trying to get Nativescript + OpenGL running for an Android scenario. Therefore I've tried to get the basic OpenGL triangle example from android docs running in an Angular-Nativescript app, but it does not work. When I use a Java implementation of the GLSurfaceView.Renderer it works. Here is the repo: https://github.com/Franziskus1988/nativescript-opengl. So yeah, a wrapper would be great.

_And I'm grateful to anyone who can help making the rendering work in my app_ :)

[jdnichollsc]

Any update of this? 😳

[jdnichollsc]

I think we can use this example: https://github.com/expo/expo/blob/master/packages/expo-gl/README.md

[triniwiz]

If it's 2D/WebGL you're looking for check out this, the three.js plugin uses it

[triniwiz]

Check out the canvas plugin it has 2D/WebGL/WebGL2 if direct access to the OpenGLES api is needed we can look for a way to expose it ... feel free to open issue there