Procedural flowers demo

[Evgeny Demidov]

A few spline based procedural flowers and trees demo (toy like yet :) at
http://www.ibiblio.org/e-notes/Splines/garden/demo.htm
Nexus 10 renders smoothly ~40 instanced apple trees (an instance has
~64k indexed points) e.g. at
http://www.ibiblio.org/e-notes/Splines/garden/apple_foggy.htm
but 50 trees are very much slower.
Any comments or suggestions?

Evgeny

[Lorne Covington]

Wow, the garden loaded so fast I thought it was just an image, but I
clicked on it and it moved! Very cool.

But the second one only shows as light blue with no content. I'm
running FireFox 36.0.1 on Win7 x64, Intel HD 4000 laptop graphics.

- Lorne


http://noirflux.com

--

http://noirflux.com

[Ben Adams]

2nd one I'd suggest raising chrome bug.

For me its very smooth in IE, mostly smooth in FF, but quite jerky in Chrome 

Platform:	Win32
Browser User Agent:	Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.89 Safari/537.36
Context Name:	webgl
GL Version:	WebGL 1.0 (OpenGL ES 2.0 Chromium)
Shading Language Version:	WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor:	WebKit
Renderer:	WebKit WebGL
Unmasked Vendor:	Google Inc.
Unmasked Renderer:	ANGLE (Intel(R) HD Graphics 3000 Direct3D11 vs_4_1 ps_4_1)
Antialiasing:	Available
ANGLE:	Yes, D3D11
Major Performance Caveat:	No

Evgeny

--
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.

[Kenneth Russell]

Very nice! The stylized look of the flowers and plants is great. Nice
fast loading time!

I noticed that you're drawing the scene in your event callbacks, which
isn't recommended. These events often come in very quickly -- more
quickly than the GPU can keep up. I think this is why the scene is
jerky on mobile devices. The best practice is to return as quickly as
possible from your event handlers. The structure would then be in your
event handler:

- Do whatever computation needed to update the position of the camera
- Check the flag to see whether a render is pending
- If the flag is false:
-- Call requestAnimationFrame to render the scene
-- set the flag to true

In your requestAnimationFrame callback:
- Draw the scene with the camera's current position
- set the flag to false

Could you try that?

-Ken

> --
> 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.

[Ben Adams]

Ah didn't see that; using event handlers to do the draw rather than requestAnimationFrame would really hurt perf.

Ken's suggestion should fix that and give great battery life.

[Evgeny Demidov]

Thank you Ken. I've updated my scripts at
http://www.ibiblio.org/e-notes/Splines/garden/apple_foggy.htm
http://www.ibiblio.org/e-notes/Splines/garden/apple_foggy100.htm
100 instances behave reasonable (~2.5 times slower) on Nexus 10 now.
Scripts are (and was) not smooth only in Firefox under key (W) events
(Windows 7, Intel I5, GeForce 560).
I'll check them at home on AMD Kabiny (128 shaders).

Evgeny

3/18/2015 2:36 AM, Kenneth Russell

[Catalin]

Very good .

Can you make one tutorial about :
http://www.ibiblio.org/e-notes/Splines/garden/apple_foggy.htm

I saw you use shaders and some procedual instance.

Evgeny

--
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.

[Evgeny Demidov]

I have one (usually I write short comments :)
http://www.ibiblio.org/e-notes/Splines/Intro.htm
I wrote
"Tensor product Bezier patches with m×n control points are used (ususally 3×3). x, y, z coordinates and r, g, b colors are set for every control point by hand. Next regular sm×sn rectangular mesh is generated. Flowers are constructed from these patches by rotations and translations."

"branch" is constructed "by hand" of leaves, flowers and stem by rotations and translations
"branch3" is constructed of 3 "branch"s and stem by rotations and translations
"branch_big" is constructed of 3 "branch3"s and stem by rotations and translations
and so on to get bigger and bigger tree (I've finished rather arbitrarily :)

then use WebGL instancing to get garden (forest)...
May be I'd like to populate procedural terrains
http://www.ibiblio.org/e-notes/Splines/terra/subdivision2d.htm
but it is not easy and fast

Can you point me what do you like more clear?
and don't  you like to make more worlds or flowers?

Evgeny

3/18/2015 4:13 PM, Catalin

[Kenneth Russell]

Thanks Evgeny, it looks better now. Tested on a Moto X with Adreno 320 GPU.


On Tue, Mar 17, 2015 at 11:44 PM, Evgeny Demidov

[Tony Parisi]

This is quite beautiful. Nice work Gene!

Tony Parisi                             tpa...@gmail.com

Founder, Third Eye                http://www.thirdeye.gl/

Follow me on Twitter!             http://twitter.com/auradeluxe

Read my blog at                     http://www.tonyparisi.com/

Learn WebGL                         http://learningwebgl.com/

Mobile                                    415.902.8002

Skype                                     auradeluxe

Read my books!
Programming 3D Applications in HTML5 and WebGL
http://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966
WebGL, Up and Running
http://www.amazon.com/dp/144932357X

[Evgeny Demidov]

Thank you Tony,

if all of You like it, I'll add roses opening animation. It is very simple.
May be I (or anyone else ;) shall add Tchaikovsky's "Waltz of the Flowers"?  (thank you Google translator :)

and it is difficult (and annoying) to avoid ("by hand") petals and leaves intersections
therefore I'll try "to charge" 10-100 small flowers (in a big complex bud) and simulate
"electrostatic repelling" for the bud opening.

I've found in the Web, how to make a smooth tree branch node from 6 Bezier patches.
Any other "crazy" ideas?

Evgeny

3/18/2015 9:23 PM, Tony Parisi

[Evgeny Demidov]

> Any other "crazy" ideas?
by the way,
now there are animated hare (really rabbit), fox, wolf, bear, forest
glade (3D WebGL spline based models)
i.e. all we need for a "skazka" (Russian folktale)...
rabbit is walking (e.g. around opening roses), fox is running for them,
both jump in a (bear) hole...
rabbit runs to the left, fox to the right and bear for the fox...

is it enough for a WebGL VR action movie? :)

Evgeny

[Tony Parisi]

Yes ! 

Tchaikovsky

Sent from my iPad

[Tony Parisi]

Sounds great to me

Maladetz!

Sent from my iPad

[Evgeny Demidov]

Procedural rose animation (dirty draft). "Call Tchaikovsky please" :)
http://www.ibiblio.org/e-notes/Splines/garden/rose_anim.htm
all the rest is more difficult and slowly...

Evgeny

[Ben Adams]

That is some excellent work :)

--
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.

[Evgeny Demidov]

"Electric flowers" self organized animations.
"Waltz of the Roses" with 7 Roses and 5MB audio WebM file.
How to make procedural plants tutorial draft

Evgeny

3/18/2015 4:13 PM, Catalin:

[Catalin]

Thank you for tutorial draft , also this examples are very good.

--
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.