[webkit-qt] TextureMapper activation and use without OpenGL (with underlying DirectFB backend)

Wed Nov 2 09:46:17 PDT 2011

Hi Sebastien.
-webkit-transform is not enough.
You need to do one of the following:
1. use a CSS animation instead of JavaScript.  
2. Use translate3d instead of translate.

  el.style["WebkitTransform"] = "translate3d(" + (goRight ? "" : "-") + "80px, 0, 0)";

will do the trick, though CSS animations is always a better idea than using JS, as the animation itself could be optimized in the engine rather than having the engine deal with every frame separately.

btw this is not a QtWebKit issue - it's CSS3D best practices. See http://www.webkit.org/blog/386/3d-transforms/
Also Ariya's blog on the subject (http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/) can be helpful.

No'am
________________________________________
From: webkit-qt-bounces at lists.webkit.org [webkit-qt-bounces at lists.webkit.org] on behalf of ext Sébastien Royer [sroyer at wyplay.com]
Sent: Wednesday, November 02, 2011 9:35 AM
To: webkit-qt at lists.webkit.org
Subject: Re: [webkit-qt] TextureMapper activation and use without OpenGL (with underlying DirectFB backend)

Thx No'am,

    I have tried your suggestion, replacing 'left' changes with
"-webkit-transform" use (controlled by Javascript).
    The result is the same (lots of "drawTextItem()" calls)
    Here is the function which does this stuff. Maybe something wrong :

function onTimer()
{
  goRight = !goRight;
  var el = document.getElementById("myText");
  el.style["WebkitTransform"] = "translate(" + (goRight ? "" : "-") +
"80px, 0)";
  setTimeout("onTimer()", 3500);
}

    I'm sure I'm not so far from solution ;)..

Sebastien

Le 02/11/2011 15:04, noam.rosenthal at nokia.com a écrit :
> Hi Sebastien
> Accelerated animations only work on -webkit-transform and opacity properties, not on "left", "size" or anything else.
> You should be able to achieve your animation with "-webkit-transform", and that should not give you the excess of drawTextItem calls.
> No'am
>
> On Nov 2, 2011, at 2:35 AM, ext Sébastien Royer wrote:
>
>
>> Hi,
>>
>>    I only used QWebView. In that case I saw just flat objects (in the
>> "circle" example:
>> http://webkit.org/blog-files/3d-transforms/poster-circle.html)
>>    When I use a QGraphicsWebView, in that case, I can see 3D objects now.
>>    So, in this new configuration, I retried my very simple web site
>> which only contains a text moving from left to right periodically, and
>> using CSS3 "left" property animation (declaring it as
>> "-webkit-transition:all 1s ease-in-out;").
>>    In that precise case, which normally must have texturemapping being
>> activated (As I understand), I still have the graphics method
>> "QPaintEngine::drawTextItem()" being called for every frame during
>> animation, and "not only once" at first draw need.
>>    (Even not needed, and to answer your question, I checked that
>> QWebSettings::AcceleratedCompositingEnabled is really set to true)
>>
>>    Do you agree that this method "QPaintEngine::drawTextItem()" has not
>> to be called every frame to redraw my "hello" text during animation ?
>>
>>    Here is the content of my page:
>>
>> <html>
>> <head>
>> <style type="text/css">
>> #myText
>> {
>>        top: 100px;
>>        left: 100px;
>>        position: absolute;
>>        -webkit-transition:all 1s ease-in-out;
>> }
>> </style>
>>
>> <script language="javascript">
>> var goRight = false;
>> function onTimer()
>> {
>>  goRight = !goRight;
>>  document.getElementById("myText").style.left = goRight ? '300px' :
>> '100px';
>>  setTimeout("onTimer()", 3500);
>> }
>>
>> setTimeout("onTimer()", 500);
>> </script>
>> </head>
>> <body>
>> <span id="myText">Hello</span>
>> </body>
>> </html>
>>
>>
>>
>> Thx
>> Sebastien
>>
>>
>> Le 28/10/2011 15:11, noam.rosenthal at nokia.com a écrit :
>>
>>> (Replying to list)
>>> It probably means that you have accelerated compositing turned off.
>>> Are you building from trunk, or using a release?
>>> In any case, in the releases accelerated-compositing only works for QGraphicsWebView and needs QWebSettings::AcceleratedCompositingEnabled to be set to true,
>>> and in trunk it should work both for QWebView and for QGraphicsWebView.
>>>
>>> No'am
>>>
>>> On Oct 28, 2011, at 12:39 PM, ext Sébastien Royer wrote:
>>>
>>>
>>>
>>>> Hi No'am
>>>>
>>>>  Thanks for you answer.
>>>>  Yes I use very light weight web sites that use webkit transforms/CSS.
>>>>  I have tried the know web site you mention, and I can see the
>>>> "circle" but with "flat" objects. Does it means TextureMapping is really
>>>> "acting" ?
>>>>
>>>>  In fact, in my case, I have a <div> that contains 1 image + 1 text
>>>> ("Hello").
>>>>  When I apply a translation (through -webkit-transition) for this div
>>>> to shift 'smoothly' from one point to an other, I see in QT that the
>>>> text "Hello" is asked to be drawn for Each frame during the animation
>>>> (in QPaintEngine::drawTextItem() (text not accelerated yet)).
>>>>  I believed that TextureMapping would prevent those "non needed"
>>>> additionnal text drawings since the visual content of the div, which is
>>>> moved, has definitely not changed... and would have been drawn once in a
>>>> "texture".
>>>>
>>>> Thx
>>>> Sebastien
>>>>
>>>> NB: I am sorry to answer to your email directly since apparently you did
>>>> not reply to the mailing list. Sorry.
>>>>
>>>> Le 27/10/2011 21:16, noam.rosenthal at nokia.com a écrit :
>>>>
>>>>
>>>>> Hi Sebastien,
>>>>>
>>>>> On Oct 27, 2011, at 12:53 PM, ext Sébastien Royer wrote:
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>> Hi
>>>>>>
>>>>>> But my first tests show me that TextureMapper is not used yet in my case.
>>>>>> What is missing ? Or what do you suggest me to do for it to be used in
>>>>>> this context ?
>>>>>>
>>>>>>
>>>>>>
>>>>> As of today in trunk, TextureMapper only gets activated in web content that becomes "composited", meaning code with CSS animations/3D. Does your web content fall under that category?
>>>>> Have you tried it with one of the standard compositing tests (e.g. http://webkit.org/blog-files/3d-transforms/poster-circle.html)?
>>>>> Opening that web-page above, do you see the "3D" circle, or just flat objects?
>>>>>
>>>>> No'am
>>>>>
>>>>>
>>>>
>>>
>> _______________________________________________
>> webkit-qt mailing list
>> webkit-qt at lists.webkit.org
>> http://lists.webkit.org/mailman/listinfo.cgi/webkit-qt
>>
>

_______________________________________________
webkit-qt mailing list
webkit-qt at lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-qt