Rendering algorithms implemented in raw WebGL 2

[Tarek Sherif]

Hi all,

I put together a collection of rendering algorithms implemented in raw WebGL 2 (with minimal use of helper classes, functions, etc.) as a way to get familiar with the new API: https://github.com/tsherif/webgl2examples

They run from very basic (draw a triangle) to more complex (order-independent transparency and SSAO). Others who are getting into WebGL 2 might find them useful.

Feedback is welcome, as well as suggestions for other algorithms that would demonstrate new features.

Tarek Sherif
http://tareksherif.net/

https://www.biodigital.com/

[Kirill Prazdnikov]

Sounds good, samples are clear and very understandable.

Thanks

[Kenneth Russell]

Yes, good work Tarek putting together these algorithms! They look great.

A few ideas for future examples:

 - Something using texture arrays to demonstrate more effective texture atlasing than was convenient in WebGL 1.0

 - Something using integer format textures and/or the new GLSL integer and bitwise operators -- some of these were emulated using floating-point in WebGL 1.0 and this is no longer necessary

 - Demonstrating multisampled HDR using the new MSAA renderbuffer formats?

-Ken

On Tue, Apr 4, 2017 at 2:21 AM, Kirill Prazdnikov <pki...@gmail.com> wrote:

Sounds good, samples are clear and very understandable.

Thanks

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-list+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Evgeny Demidov]

It's a good idea.
I'm using atlases for flowers (in WebGL 1) and have a few problems with
texture borders (my accuracy mainly) and texture minification (in near
future).

Evgeny

04.04.2017 23:07, Kenneth Russell пишет:

[Tarek Sherif]

Thanks all. Does anyone know of good resources for algorithms that use the features Ken suggested?

[Evgeny Demidov]

"A few ideas for future examples:"

 - compressed textures

1. if I have procedural texture, can I put uncompressed data?
2. how shall I put Uint8 data into COMPRESSED_R11_EAC texture?

Tarek, as for me, I'd like to see short comments (a few words or reference) about used algorithms.
E.g. I think there are many "order-independent transparency" algorithms.

Evgeny

05.04.2017 22:56, Tarek Sherif пишет:

[Evgeny Demidov]

I think I can't put uncompressed data. As WebGL and drivers do not support compression. So one has to use JS based compressor (theoretically :)

Evgeny

06.04.2017 8:43, Evgeny Demidov пишет:

"A few ideas for future examples:"
 - compressed textures

1. if I have procedural texture, can I put uncompressed data?
2. how shall I put Uint8 data into COMPRESSED_R11_EAC texture?

Tarek, as for me, I'd like to see short comments (a few words or reference) about used algorithms.
E.g. I think there are many "order-independent transparency" algorithms.

Evgeny

05.04.2017 22:56, Tarek Sherif пишет:

Thanks all. Does anyone know of good resources for algorithms that use the features Ken suggested?

On Wednesday, 5 April 2017 02:48:12 UTC-4, Evgeny wrote:

It's a good idea.
I'm using atlases for flowers (in WebGL 1) and have a few problems with
texture borders (my accuracy mainly) and texture minification (in near
future).

Evgeny

04.04.2017 23:07, Kenneth Russell пишет:
> A few ideas for future examples:
>
>  - Something using texture arrays to demonstrate more effective
> texture atlasing than was convenient in WebGL 1.0
>

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.

To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.

[Tarek Sherif]

Hi Evgeny,

Brandon Jones' texture tester is a pretty great resource for how to deal with compressed textures: https://github.com/toji/texture-tester

I do provide links in the source code to my references for the more complex algos:

https://github.com/tsherif/webgl2examples/blob/master/dof.html#L25

https://github.com/tsherif/webgl2examples/blob/master/ssao.html#L25

https://github.com/tsherif/webgl2examples/blob/master/oit.html#L25

I can make those more prominent, though.

[Evgeny Demidov]

06.04.2017 12:39, Tarek Sherif пишет:

Brandon Jones' texture tester is a pretty great resource for how to deal with compressed textures: https://github.com/toji/texture-tester

a bit outdated "Latest commit df41773 on 22 Apr 2015"
e.g. no ETC2 and EAC tests but
1. "No ETC2 and EAC compressed texture formats" in WebGL 2, only extension
2. as I have to compress myself procedural textures (generated in script), it is useless (or very difficult) for me

I do provide links in the source code to my references for the more complex algos:

https://github.com/tsherif/webgl2examples/blob/master/dof.html#L25

https://github.com/tsherif/webgl2examples/blob/master/ssao.html#L25

https://github.com/tsherif/webgl2examples/blob/master/oit.html#L25

thank you very much, very interesting

Evgeny