[SOLVED]CSS 2D/3D transform almost finished

Discussion of features and help with problems encountered while using libRocket

[SOLVED]CSS 2D/3D transform almost finished

Postby wolfmanfx on Thu Nov 03, 2011 9:31 am

Hi,
I have modified libRocket to support css3 transform i created the current image with this CSS snippet:
Code: Select all
   
transform:  translateZ(-450)  rotateZ(5) rotateY(-15) rotateX(-35);
transform-origin-x: 512px;
transform-origin-y: 384px;


css3D.JPG
css3D.JPG (52.4 KiB) Viewed 7220 times


But as u see i am almost done except the "setScissorTest" issuse.
libRocket use scissor test to mask out fragments which are outside the scissor region and thats good if you do not have transformation stuff (like i have now) so maybe the libRocket maintainer
could give me an hint how to solve this. (i want to really finish this up because i have already planned the next feature => CSS shaders aka filters ;) )
Last edited by wolfmanfx on Fri Nov 04, 2011 5:38 pm, edited 1 time in total.
wolfmanfx
 
Posts: 19
Joined: Sat Jul 16, 2011 8:42 am

Re: CSS 2D/3D transform almost finished

Postby robn on Fri Nov 04, 2011 6:53 am

Wow, this looks great! Have you got the code somewhere? I'm having trouble thinking about how exactly this is working in relation to the RenderInterface (where scissoring is finally done) but I'd like to be able to offer some help with your question, if I can.
robn
 
Posts: 11
Joined: Sun Oct 02, 2011 5:06 am

Re: [SOLVED]CSS 2D/3D transform almost finished

Postby wolfmanfx on Fri Nov 04, 2011 5:41 pm

Thx but i solved it using the stencilbuffer :)

css3DFixed.JPG
css3DFixed.JPG (39.91 KiB) Viewed 7160 times


So when no transformation is applied i use the ScissorRegion otherwise i use the stencil buffer (it renders a quad as a mask so it cost one draw call extra with 5 vertices :) ).
wolfmanfx
 
Posts: 19
Joined: Sat Jul 16, 2011 8:42 am

Re: [SOLVED]CSS 2D/3D transform almost finished

Postby Skrylar on Mon Nov 07, 2011 10:06 am

Nice!

If you combine this with keyframe animations (a webkit extension? not sure if its full CSS3) and the scripting DOM, libRocket would become a pretty good contender for an indie's Scaleform. With the right custom editor and these things, I could see becoming a standard open source GUI ;)
Skrylar
 
Posts: 4
Joined: Mon Nov 07, 2011 10:02 am

Re: [SOLVED]CSS 2D/3D transform almost finished

Postby lloydw on Mon Nov 07, 2011 10:09 am

Nice work wolfman! This looking very promising.
lloydw
Rocket Engineer
Rocket Engineer
 
Posts: 380
Joined: Tue Jan 15, 2008 10:56 pm

Re: [SOLVED]CSS 2D/3D transform almost finished

Postby dwat on Thu Apr 14, 2016 6:13 pm

Hi all, any news about these features?
dwat
 
Posts: 1
Joined: Thu Apr 14, 2016 6:09 pm


Return to Using libRocket


cron