3D or 3D-like effects in Scenic

[Eiji7]

Purpose

Hey, many web apps especially those with galleries often adds various effects like for example:

https://www.w3schools.com/howto/howto_css_flip_card.asp

That's CSS simple solution just to show what people would like to have.

@boydm

The matrix code also needs to be rewritten. It is currently 4x4 matrices, which is what you need for 3d. But I think it is safe to say Scenic is totally 2d and will stay that way, so 2x3 matrices are all that is needed.

Basically... if you can do it in canvas, then I want to support it in Scenic

Canvas and WebGL

Firstly some history:

WebGL evolved out of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla.

Source: https://en.wikipedia.org/wiki/WebGL#History

WebGL definition:

WebGL (Short for Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas.

Source: https://en.wikipedia.org/wiki/WebGL

A possible solutions:

1. 2D workarounds to simulate 3D animations, for example: https://jsfiddle.net/wr7qy4tm/
2. Support WebGL-like API for 2D and 3D animations like in canvas, for example: https://www.taccgl.org/

I don't like any workarounds, so for me 1st have :-1: from start and because of number of features 2nd point have definitely :+1: for me. However such API may not be easy to implement which for @boydm may be a huge :-1:.

Limitation

nanovg drawing library we use does not support 3D at all.

Interesting questions

1. Can we by creating 3rd-party library (let's call it scenic_3d) extend scenic core?
2. Maybe we should leave it to specific driver (if possible)?
3. Would we consider using other rendering libraries in future or for each driver?

[boydm]

Are the main goals reflect and flip like transform effects?

[Eiji7]

@boydm The answer is not obvious (for me) … In short I may say Yes, BUT(!) …

Just for sure, I have mention flip effect as the idea comes from my experience. I have used such effect many times and from that I know how important are such "small", but nice things.

Please don't see such feature as a developer's guilty pleasure, but something which improves end-user experience. Look that end-user does not cares what scenic is. If he see two apps A and B where A is nice looking app with smooth animations and B is simple app which shows just plain content then he/she would not consider app B.

Please pay attention how important today is look of application. Look how many apps and services changed their color themes. Do you think that previous themes were bad? Or maybe you would say that those apps/services does not have anything else more important than changing something as simple as colors? Definitely no …

Also pay attention that such effects are used not only for pet projects, but also in business apps too. Just for example previously mentioned galleries are often in CMS services.

Summing it up … Originally I refer to flip animation by experience and all 3D effects in general. However I believe that other, much more experienced developers, could give few other examples of using 3D in 99% 2D apps.

[crertel]

3D is outside the scope of Scenic, but we can still do 3D-style flipping of cards like @Eiji7 is asking for.

You can use a 3x3 matrix to handle this; some talk about that is in the scenic refactor discussion.