3D CSS Transformation?

Discussion and feedback on Construct 2

Post » Wed Jun 27, 2012 10:35 am

B
96
S
25
G
20
Posts: 3,053
Reputation: 22,640

Post » Wed Jun 27, 2012 10:49 am

Thanks @Joannesalfa !
Quite amazing 3D effect ... if you have chrome or safari ios try Here ... it's really not too bad on a iphone 4 !naelian2012-06-27 11:03:01
B
16
S
5
G
3
Posts: 298
Reputation: 5,240

Post » Wed Jun 27, 2012 11:05 am

Looks like it could've been done in Construct 2 as well!
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,574

Post » Wed Jun 27, 2012 11:14 am

Explode sound and effect create big lags on Iphone 4 but 3D moving effects without this problem is really smooth ...... sure with some changes as the size which is more for the ipad or a chrome pc and some native "cocoonesque" magic inside it could be great ;-pnaelian2012-06-27 11:16:09
B
16
S
5
G
3
Posts: 298
Reputation: 5,240

Post » Wed Jun 27, 2012 9:35 pm

[QUOTE=Ashley] Looks like it could've been done in Construct 2 as well![/QUOTE]

Are you saying C2 is already implemented 3D CSS Transformations?
B
96
S
25
G
20
Posts: 3,053
Reputation: 22,640

Post » Wed Jun 27, 2012 10:05 pm

@Joannesalfa - no, 3D CSS transforms are slower and use more memory than a hardware-accelerated canvas - so we're sticking to the 2D canvas for now.
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,574

Post » Wed Jun 27, 2012 10:56 pm

[QUOTE=Ashley] @Joannesalfa - no, 3D CSS transforms are slower and use more memory than a hardware-accelerated canvas - so we're sticking to the 2D canvas for now.[/QUOTE]

Are you serious? i tried it 3D CSS on my iPod Touch 4 , it looks faster than Canvas, even can make primtive 3D objects using CSS without webGL.

CSS3D consumes more memory, is true.

If you're trying to target mobile, for example, CSS animations are your only choice because Canvas is too slow in general.

I know we can wait HTML5 goes to be 100% in 2014, well, actually, i believe it cannot guarantee the peformance on mobile devices from 2011-2012 that support latest HTML5.

Maybe CSS is another solution for mobile devices that don't need to go appstore.

B
96
S
25
G
20
Posts: 3,053
Reputation: 22,640

Post » Wed Jun 27, 2012 11:43 pm

If both CSS transformations and canvas 2D are GPU accelerated (which I think is true in Safari on iOS when not using PhoneGap), they should perform about the same. However since CSS has the extra overhead of being in the DOM tree, I would expect it to perform worse when using many sprites.
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,574

Post » Thu Jun 28, 2012 11:12 am

@Ashley, @Joannesalfa : CSS 3D transform are indeed hardware accelerated on iOS. However, you must be careful with them, because WebKit falls back to CPU when you mixed them with other DOM transform, it depends.
For example, text & box shadow makes everything back to the CPU.If the 3D transform is performed alone, everything is fine, but if the transform is performed over another transform, there's a performance hit, and so on...
However, it's pretty easy to hardware accelerate any transform, when it's possible.
If you just add
[quote]
-webkit-transform: translateZ(0);
[/quote]
to your CSS transform, even if that transform doesn't do anything, the matrix transformation involved activate the hardware acceleration.

So, if you want to accelerate the transform applied to a div, you simply need to do that in your CSS:

[quote]
div {
     -webkit-transform : translateZ(0);
     -o-transform : translateZ(0);
     -moz-transform : translateZ(0);
     transform : translateZ(0);

}
[/quote]
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Thu Jun 28, 2012 9:07 pm

Here is another post you may want to test it, i tried it with C2, performance boost is almost considered but little and it bothers to adjust the screen

http://29a.ch/2011/5/27/fast-html5-canvas-on-iphone-mobile-safari-performance
B
96
S
25
G
20
Posts: 3,053
Reputation: 22,640

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 13 guests