WebGL 2 & C2/C3

hi,

just a short question for Ashley

is c2/c3 going to improve it's current export js file by updating it to support webgl2 ?

i've noticed that chrome is almost ready for webgl2 and some neat things are upcoming. at least according by

https://www.khronos.org/registry/webgl/ ... atest/2.0/

and

http://blog.tojicode.com/2013/09/whats- ... gl-20.html

i've noticed some interesting things (if you could shed a light on them ashley that would be great <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile"> ):

Multiple Render Targets

Currently exposed through the WEBGL_draw_buffers extension. Allows a single draw call to write out to multiple targets (textures or renderbuffers) with a single draw call.

Multisampled Renderbuffers

Previously if you wanted your WebGL content to be antialiased you would either have to render it to the default backbuffer or perform your own post-process AA (like FXAA) on content you've rendered to a texture.

3D Textures

This feature is pretty self-explanatory. A 3D texture is essentially just a stack of 2D textures that can be sampled with X, Y, and Z coords in the shader. This is useful for visualizing volumetric data (like medical scans), 3D effects like smoke, storing lookup tables, etc.

Sampler Objects

Sampler objects allow you to store all the information about how to sample data from a texture separately from the texture itself, which becomes nothing but a container for the image data.

Uniform Buffer Objects

Setting shader program uniforms is a huge part of almost any WebGL/OpenGL draw loop. This can make your draw calls fairly chatty as they make hundreds or thousands of gl.uniform____ calls. Uniform Buffer Objects attempts to streamline this process by allowing you to store blocks of uniforms in buffers stored on the GPU (like vertex/index buffers). This can make switching between sets of uniforms faster, and can allow more uniform data to be stored.

Sync Objects

With WebGL today the path from Javascript to GPU to Screen fairly opaque to developers. You dispatch draw commands and at some undefined point in the future the results (probably) show up on the screen. Sync objects allow the developer to gain a little more insight into when the GPU has completed it's work. Using gl.fenceSync, you can place a marker at some point in the GPU command stream and then later call gl.clientWaitSync to pause Javascript execution until the GPU has completed all commands up to the fence.

Query Objects

Query objects give developers another, more explicit way to peek at the inner workings of the GPU. A query wraps a set of GL commands for the GPU to asynchronously report some sort of statistic about. For example, occlusion queries are done this way: Performing a gl.ANY_SAMPLES_PASSED query around a set of draw calls will let you detect if any of the geometry passed the depth test. If not you know the object wasn't visible and may choose not to draw that geometry in future frames until something happens (object moved, camera moved, etc) that indicates the geometry might have become visible again.

there's much more.. just wondering when? & will it? improve performance of c2 and it's games, without native exportation ?

thanks a lot

Of course everyone would like to see wgl2 implemented once it is suppoerted.

Of course everyone would like to see wgl2 implemented once it is suppoerted.

Nahh, let's stick to good old canvas 2d, no one need those fancy webgl stuff!

> Of course everyone would like to see wgl2 implemented once it is suppoerted.

>

Nahh, let's stick to good old canvas 2d, no one need those fancy webgl stuff!

You don't say

I've been keeping an eye on WebGL 2, but most of those new features are of most utility to 3D engines. For 2D engines the biggest deal about WebGL 2 is it has proper non-power-of-two texture support, which means, finally, non-power-of-two textures can tile and mipmap properly. Realistically this means a small rendering quality improvement in niche cases. Not really the biggest deal in the world for a major new version of WebGL! I don't think there's any urgency to support this, but it will be nice to have the NPOT texture support when it comes.

i thought at least multiple render targets are gonna be usefull where you could draw one texture on multiple targets in single draw call.. maybe tiles could use this?

also what about AA? multisampled buffers?

and query objects? could that introduce culling in 2D?

Multiple render targets: useful for deferred 3D lighting rendering, not sure what it could do in 2D. It just means being able to draw the same set of objects to multiple surfaces at once, which our engine doesn't need to do.

Antialiasing/multisampling: this is generally a massive performance hit for a sometimes imperceptible improvement in rendering quality. Since most 2D games use alpha-channelled textures instead of geometry, I don't think there's anything to gain from it.

Query objects: I guess they could return some performance stats or debug info, but I'm not clear in what way that would be useful.

Culling: already done in the engine before it issues draw calls. I don't think there's any point moving it to the GPU, since it means submitting many more draw calls, which would probably actually degrade performance.

In other words, WebGL 1 has almost everything a 2D engine needs already.

What about textures skewing, distortion etc... is this still a thing? if I remember correctly it should be possible only with webgl2, right?

Wouldn't multiple render targets be useful to anyone working on a splitscreen game? Or is it the same as using the canvas object?

What about textures skewing, distortion etc...

Any form of expanded texture transformations are welcome as they are so incredibly nedded!

What about textures skewing, distortion etc... is this still a thing? if I remember correctly it should be possible only with webgl2, right?

It's possible with webgl now, even C2's webgl renderer can do it, although the canvas render can't as of now. Which is why it's not a feature currently.

I've utilized it in the draw textured quad action of my paster plugin, but had to use a workaround to make it work with canvas.

R0J0hound yeah, I've been playing around with textured quads in paster... but results are a bit hard to predict. Sometimes it will skew the polygon correctly but other times it will just make a rough visible cut into two triangles (to put it that way shortly) which kind of breaks the flow of the texture

shinkan

That's when webgl isn't used. The canvas workaround draws as two triangles and the anti-aliasing causes the seam.

R0J0hound That's interesting. As far as I can remember I've been playing with paster quads only on my desktop and only with webgl on. Just building basic 3d looking-perspective walls when I stumbled across triangles and seams.

shinkan

Well, with webgl on it uses the same drawing method that sprites use, and it is two triangles.

Oh wait, if you're trying to do perspective it won't look right because there is no z.

The picture here sums it up:

https://en.wikipedia.org/wiki/Texture_m ... orrectness

So basically the distortion only looks right if opposite sides of the quad are parallel. Something like a skew would work, but not if you do a trapezoid shape.