W3C home > Mailing lists > Public > public-fx@w3.org > October to December 2011

Re: [css shaders] Request for additional UA uniform variables

From: Vincent Hardy <vhardy@adobe.com>
Date: Fri, 14 Oct 2011 19:07:56 -0700
To: Dean Jackson <dino@apple.com>, Chris Subagio <chris.subagio@gmail.com>
CC: "public-fx@w3.org" <public-fx@w3.org>
Message-ID: <CABE37FA.1CBC8%vhardy@adobe.com>
Hi Chris,

From: Dean Jackson <dino@apple.com<mailto:dino@apple.com>>
Date: Fri, 14 Oct 2011 17:15:29 -0700
To: Chris Subagio <chris.subagio@gmail.com<mailto:chris.subagio@gmail.com>>
Cc: "public-fx@w3.org<mailto:public-fx@w3.org>" <public-fx@w3.org<mailto:public-fx@w3.org>>
Subject: Re: [css shaders] Request for additional UA uniform variables

On 13/10/2011, at 4:16 AM, Chris Subagio wrote:

First, I'd like you to consider a clock parameter.

This would be a constantly increasing value that you could use for ambient animations, like say a waving flag or lapping waves.

Ideally this u_clock would be something like a (float) seconds since 1970, unix style. Someone might find a neat use for the actual absolute time, versus just an incrementing number. Unfortunately the precision on these constant registers can vary wildly from hardware to hardware, and it's unlikely that such large numbers would work. So perhaps running time since page load would be sufficient, with some way to also pass in the absolute clock time when the page was loaded?

As an optimization, the clock parameter could be an option enabled from the filter declaration (defaulted to off!), effectively switching the element from a transition only animation to an ambient animation.

I think this should be done with a parameter to the shader and animated via CSS.

Just adding it automatically is saying "please redraw this as often as possible for the entire time the effect is applied" which could kill battery. It's much better to be explicit. For example:

filter: shader("flag.vs", "flag.fs", .. timeoffset 0);
animation: wave-the-flag 3s 10;  /* wave the flag over 3s, repeat 10 times */

keyframes {

from {
   filter: shader("flag.vs", "flag.fs", .. timeoffset 0);

to {
   filter: shader("flag.vs", "flag.fs", .. timeoffset 1);


(Yes, my syntax is wrong but you should get the idea)

This way you could have the wave apply on hover, etc.

This is exactly how we do it in all the examples that we have created along the prototype implementation. We initially thought, as Chris, that we would need a uniform to tie in the animation engine, but it turned out that it was not necessary in the use cases we had.

Regarding the transform to page space uniform, I added this to the list of issues for shaders:


@chris: thanks for your kind words and encouragements for the spec!

Received on Saturday, 15 October 2011 02:08:27 UTC

This archive was generated by hypermail 2.3.1 : Monday, 22 June 2015 03:33:46 UTC