8 ms·

Show HN: Tridiv - CSS 3D Editor

277 points by JulianGarnier 13y ago

fadomire 13y ago
that is the craziest work i have seen in a long time. you need to check this ! innovative, beautifull, usefull. big gratz. ps : too bad we cant upvote
- JulianGarnier 13y ago
  yeah weird
JulianGarnier 13y ago
A codepen demo I made to introduce Tridiv capabilities : http://codepen.io/juliangarnier/pen/hzDAF http://codepen.io/juliangarnier/pen/hzDAF
- SchizoDuckie 13y ago
  Holy moly. I'm going to throw this at anyone that doubts the capabilities of HTML5/CSS3
  - nickstinemates 13y ago
    While it's possible, the output reminds me of code/application generators of the past. That (hopefully) means that as technology progresses, we'll get better abstractions. And then the cycle will repeat itself. :)
    - skopp 13y ago
      Can you cite some examples of these generators you speak of?
  - skopp 13y ago
    Please throw it at the vast majority of mobile (smartphone) browser developers while you're at it.
- skopp 13y ago
  Wow jaw drops. Will these animations work in Opera Mini? (joke ;p)
carlosdp 13y ago
This is amazing, what's the plan for it? Open-source?
capnjngl 13y ago
Wow, pretty incredible stuff. Well done.
Sandman 13y ago
Not compatible with Firefox. Too bad.
- smickie 13y ago
  I'm on Firefox... this one's worth firing up Chrome for.
- walid 13y ago
  The dev just posted a another link: https://news.ycombinator.com/item?id=6251831 https://news.ycombinator.com/item?id=6251831
- trycatch 13y ago
  Seriously, it's just ridiculous. There is no legitimate reason whatsoever to make hard browser whitelist like that in 2013 -- without button like "use anyway" or something. It hard-blocks even the new Opera, while the new Opera uses the same exactly engine as Chrome. And you can't just simply spoof user agent in old-school way, no, it uses client-side detection, so you should make GreaseMonkey script just to run the app. On the other hand it doesn't warn Chrome users with HW-acceleration disabled, and just breaks. It's IE6 story all over again.
  - adizam 13y ago
    You okay?
arscan 13y ago
I don't often say "wow", but this is just amazing. And I was actually struggling this week to get the appropriate css transforms together for some simple 3d effects on a website of mine -- this will make things a TON easier. edit: ah, just saw that not all major browsers are supported, which makes it less useful in an immediate sense for me. But still an awesome little product that shows what's possible in a web browser (and hopefully all web browsers soon). edit edit: Would you mind discussing what it would take to make it work in other browsers? Is it not possible, or were there just too many browser-specific prefixes/workarounds required to make it a worthwhile effort for this initial version?
- walid 13y ago
  The app is using CSS transforms and it looks like it should work on all browsers since the styles are there for all browsers. I'm guessing the app isn't entirely complete for all browsers, which is why it is refusing to load on Firefox but you can look at the source code and search for the relevant CSS for the other browsers that you want to support, if they need prefixing that is. <div id="scene3D" class="scene" style="-webkit-transform:rotateX(0deg) rotateY(0deg); -moz-transform:rotateX(0deg) rotateY(0deg); -ms-transform:rotateX(0deg) rotateY(0deg); transform:rotateX(0deg) rotateY(0deg); "> Edit: The dev just posted an example https://news.ycombinator.com/item?id=6251831 https://news.ycombinator.com/item?id=6251831
- JulianGarnier 13y ago
  In theory every browsers that support the CSS property "transform-style: preserve-3d;" can run the app. But in practice it's not that simple, for example Firefox has some serious performance issues with 3D, and the overall experience using the app was really bad. I built the app with cross browsers in mind, so it will be really easy for me to expand the list of supported browsers in the future (hopefully).
swalsh 13y ago
This is extremely impressive! great work.
cdekok 13y ago
It's flat on chromium 28
- solox3 13y ago
  It is severely broken on Chromium. Ironically, his app works completely fine on Firefox (Canary), the browser he tried so hard to block.
coffeeyesplease 13y ago
Julian, that's very, very impressive. How long did it take to get this together?
- JulianGarnier 13y ago
  Hard to say, it was a side project I did in my spare time. All I know is that I started working on it 4 months ago, and spend my whole summer vacations working on it.
tcdent 13y ago
Are there any options (or plans) for import/export?
- renownedmedia 13y ago
  I'd love to see a high quality 2d image renderer or a common 3d format exporter.
amasad 13y ago
This is really cool. Wondering why not WebGL?
SchizoDuckie 13y ago
Wow. just. wow. So smooth. It has the features you expect for editing and easy cloning, very impressive. I've been looking in to using some 3d css to spice up my resumé timeline, you have just made my life a whole lot easier!
kin 13y ago
I got the chills checking this out. Really awesome stuff.
aroman 13y ago
At the rate of repeating what everyone else has said, this is truly impressive. Initial loading was a bit choppy and slow on Safari 6.1 on 10.8.4, but after that it was smooth. It's projects like this that reinforce my belief that A: browser plugins must die and never come back and B: "web apps" will ultimately become as powerful as (and replace) desktop apps.
- captainmuon 13y ago
  A: Browser plugins did this 15 years ago on computers that were orders of magnitude slower. Doing this all in the DOM with CSS has a redonkulous overhead. Whats even worse is that browsers have become these monolithic silo projects that only three or four companies on the planet can develop. They have become much more complex than the actual operating system. I still remember the days when a browser was mainly a layout engine, and all fancy stuff was deferred to plugins. If only we had safe sandboxing technology back then... B: The benefit of web apps are that you just go to an URL, no installation required. And you get "sync" for free. That's about it. The downsides are: - They are slower (or require faster computers) because of added overhead. - They run in the browser window (although that can actually be nice! I'd like to have native apps in tabs like in my browser sometimes) - Making them work offline is hard. You have to put all the business logic in JS, and can't rely on the server. - Accessing local files is hard - Communication between apps is hard, to impossible. * In the end you are back to mainframe computing like in the 70s, but with 3D effects. ----- *) One of the biggest reasons why Windows was so successful in the enterprise? COM and Automation. You could just slap an Excel spreadsheet onto your VB application, manipulate a Corel draw file from your MFC application, create database applications basically via drag and drop, and so on. There were (are) hundreds of shops selling custom components from shiny buttons to complete business report generators. And of course you could control almost every enterprise app with a little .js or .vbs script. Sure, all that stuff was ugly, unglamourous, and buggy, but it got the work done.
crazygringo 13y ago
Holy hell, that's amazing. (Just repeating everyone else, but it deserves it.) Is there an "About" page? How was it built? What are future plans? This is so crazy impressive I don't even know what to say.
- JulianGarnier 13y ago
  Maybe in the future.
juretriglav 13y ago
Julian, keep this stuff up. I think others should know about your impressive Codepen examples as well: http://codepen.io/juliangarnier http://codepen.io/juliangarnier Check out the Hartwig chess set (playable too!) and the solar system demo.
ergo14 13y ago
Not compatible with firefox...bye!
- walid 13y ago
  Wait: https://news.ycombinator.com/item?id=6251831 https://news.ycombinator.com/item?id=6251831
transphorm 13y ago
Wow you are very talented.
chinchang 13y ago
Mannnn...u rocked this big time with web. Its so performant!
transphorm 13y ago
Also I wanted to say...I hate how backend developers front end developers. You are proof that front end devs are no joke and we can do impressive work!
- walid 13y ago
  Your username is very fitting for the subject matter.
miniatureape 13y ago
This is amazing. Is it possible to create a sphere?
kemist 13y ago
I really love the hero unit. It's a great example of an animation that tells a short story, and gives you a feel for the app. First you see a flat rectangle with drag handles, which sets your expectation, 2D WYSIWYG editor. The rectangle animates into a 4 sided cube, 2D becomes 3D, it's a 3D tool. Then the cube breaks into 2 angle brackets, the output is just HTML and CSS. I'm left with a nice little feeling :) Awesome work
- Timothee 13y ago
  I had totally missed the fact that it ends as two angle brackets! Very smart logo and indeed very good way to introduce the product.
  - blktiger 13y ago
    Me too, that's clever.
- JulianGarnier 13y ago
  Thanks! Actually I wasn't sure people will understand all the ideas I have put in this animation. But you have perfectly described what I wanted to tell, I'm impressed!
smallarmsdealer 13y ago
Doesn't work with Firefox. Damned kids and their damned monoculture. Make it work with my shit!
agumonkey 13y ago
I just had a VRML flash.
program 13y ago
Safari on iOS 6 crashes every time I add a solid to the scene; which is kind of fascinating.
jbmartin 13y ago
In terms of rendering speed, how efficient is CSS compared to webGL or other related 3D technologies?
michaelbuddy 13y ago
can't seem to figure it out on chrome 29 on windows7. maybe I have a conflict or need bleeding edge chrome.
epo 13y ago
Very impressive demo. I see you're looking for work. I expect you will be inundated with offers, be picky.
ymow 13y ago
SO COOL
moeamaya 13y ago
With the plethora of webGL, canvas, css3d apps out there, the exceptional feature of this app is the user experience and interface. Every click feels intuitive and snappy and if I want to complete an action, it feels seamless. Nice job, seriously keep up the good work.
- JulianGarnier 13y ago
  Thanks. Making the UI was a big part of the fun.
ronreiter 13y ago
This is beyond amazing. You are a genius.
deleted 13y ago
[deleted]
andersnolsen 13y ago
I'm sure you'll have no problem finding a job now. Great work! Small thought - when you're moving an object, wouldn't it be logical to also allow for small step moves with the arrows?Now it will move the camera position.
- JulianGarnier 13y ago
  Yup, > roadmap :)
captainmuon 13y ago
This is really amazing... however we had something like that 15 years ago called VRML, and it probably was 1000 times faster. This is an incredible abuse of css, nevertheless very cool.
maxlibin 13y ago
amazing.
shaimoom 13y ago
Unreal!

277 points by JulianGarnier 13y ago

that is the craziest work i have seen in a long time. you need to check this ! innovative, beautifull, usefull. big gratz. ps : too bad we cant upvote

JulianGarnier 13y ago
yeah weird

JulianGarnier 13y ago

A codepen demo I made to introduce Tridiv capabilities : http://codepen.io/juliangarnier/pen/hzDAF http://codepen.io/juliangarnier/pen/hzDAF

SchizoDuckie 13y ago
Holy moly. I'm going to throw this at anyone that doubts the capabilities of HTML5/CSS3
- nickstinemates 13y ago
  While it's possible, the output reminds me of code/application generators of the past. That (hopefully) means that as technology progresses, we'll get better abstractions. And then the cycle will repeat itself. :)
  - skopp 13y ago
    Can you cite some examples of these generators you speak of?
- skopp 13y ago
  Please throw it at the vast majority of mobile (smartphone) browser developers while you're at it.
skopp 13y ago
Wow jaw drops. Will these animations work in Opera Mini? (joke ;p)

carlosdp 13y ago

This is amazing, what's the plan for it? Open-source?

capnjngl 13y ago

Wow, pretty incredible stuff. Well done.

Sandman 13y ago

Not compatible with Firefox. Too bad.

smickie 13y ago
I'm on Firefox... this one's worth firing up Chrome for.
walid 13y ago
The dev just posted a another link: https://news.ycombinator.com/item?id=6251831 https://news.ycombinator.com/item?id=6251831
trycatch 13y ago
Seriously, it's just ridiculous. There is no legitimate reason whatsoever to make hard browser whitelist like that in 2013 -- without button like "use anyway" or something. It hard-blocks even the new Opera, while the new Opera uses the same exactly engine as Chrome. And you can't just simply spoof user agent in old-school way, no, it uses client-side detection, so you should make GreaseMonkey script just to run the app. On the other hand it doesn't warn Chrome users with HW-acceleration disabled, and just breaks. It's IE6 story all over again.
- adizam 13y ago
  You okay?

arscan 13y ago

I don't often say "wow", but this is just amazing. And I was actually struggling this week to get the appropriate css transforms together for some simple 3d effects on a website of mine -- this will make things a TON easier. edit: ah, just saw that not all major browsers are supported, which makes it less useful in an immediate sense for me. But still an awesome little product that shows what's possible in a web browser (and hopefully all web browsers soon). edit edit: Would you mind discussing what it would take to make it work in other browsers? Is it not possible, or were there just too many browser-specific prefixes/workarounds required to make it a worthwhile effort for this initial version?

walid 13y ago
The app is using CSS transforms and it looks like it should work on all browsers since the styles are there for all browsers. I'm guessing the app isn't entirely complete for all browsers, which is why it is refusing to load on Firefox but you can look at the source code and search for the relevant CSS for the other browsers that you want to support, if they need prefixing that is. <div id="scene3D" class="scene" style="-webkit-transform:rotateX(0deg) rotateY(0deg); -moz-transform:rotateX(0deg) rotateY(0deg); -ms-transform:rotateX(0deg) rotateY(0deg); transform:rotateX(0deg) rotateY(0deg); "> Edit: The dev just posted an example https://news.ycombinator.com/item?id=6251831 https://news.ycombinator.com/item?id=6251831
JulianGarnier 13y ago
In theory every browsers that support the CSS property "transform-style: preserve-3d;" can run the app. But in practice it's not that simple, for example Firefox has some serious performance issues with 3D, and the overall experience using the app was really bad. I built the app with cross browsers in mind, so it will be really easy for me to expand the list of supported browsers in the future (hopefully).

swalsh 13y ago

This is extremely impressive! great work.

cdekok 13y ago

It's flat on chromium 28

solox3 13y ago
It is severely broken on Chromium. Ironically, his app works completely fine on Firefox (Canary), the browser he tried so hard to block.

coffeeyesplease 13y ago

Julian, that's very, very impressive. How long did it take to get this together?

JulianGarnier 13y ago
Hard to say, it was a side project I did in my spare time. All I know is that I started working on it 4 months ago, and spend my whole summer vacations working on it.

tcdent 13y ago

Are there any options (or plans) for import/export?

renownedmedia 13y ago
I'd love to see a high quality 2d image renderer or a common 3d format exporter.

amasad 13y ago

This is really cool. Wondering why not WebGL?

SchizoDuckie 13y ago

Wow. just. wow. So smooth. It has the features you expect for editing and easy cloning, very impressive. I've been looking in to using some 3d css to spice up my resumé timeline, you have just made my life a whole lot easier!

kin 13y ago

I got the chills checking this out. Really awesome stuff.

aroman 13y ago

At the rate of repeating what everyone else has said, this is truly impressive. Initial loading was a bit choppy and slow on Safari 6.1 on 10.8.4, but after that it was smooth. It's projects like this that reinforce my belief that A: browser plugins must die and never come back and B: "web apps" will ultimately become as powerful as (and replace) desktop apps.

captainmuon 13y ago
A: Browser plugins did this 15 years ago on computers that were orders of magnitude slower. Doing this all in the DOM with CSS has a redonkulous overhead. Whats even worse is that browsers have become these monolithic silo projects that only three or four companies on the planet can develop. They have become much more complex than the actual operating system. I still remember the days when a browser was mainly a layout engine, and all fancy stuff was deferred to plugins. If only we had safe sandboxing technology back then... B: The benefit of web apps are that you just go to an URL, no installation required. And you get "sync" for free. That's about it. The downsides are: - They are slower (or require faster computers) because of added overhead. - They run in the browser window (although that can actually be nice! I'd like to have native apps in tabs like in my browser sometimes) - Making them work offline is hard. You have to put all the business logic in JS, and can't rely on the server. - Accessing local files is hard - Communication between apps is hard, to impossible. * In the end you are back to mainframe computing like in the 70s, but with 3D effects. ----- *) One of the biggest reasons why Windows was so successful in the enterprise? COM and Automation. You could just slap an Excel spreadsheet onto your VB application, manipulate a Corel draw file from your MFC application, create database applications basically via drag and drop, and so on. There were (are) hundreds of shops selling custom components from shiny buttons to complete business report generators. And of course you could control almost every enterprise app with a little .js or .vbs script. Sure, all that stuff was ugly, unglamourous, and buggy, but it got the work done.

crazygringo 13y ago

Holy hell, that's amazing. (Just repeating everyone else, but it deserves it.) Is there an "About" page? How was it built? What are future plans? This is so crazy impressive I don't even know what to say.

JulianGarnier 13y ago
Maybe in the future.

juretriglav 13y ago

Julian, keep this stuff up. I think others should know about your impressive Codepen examples as well: http://codepen.io/juliangarnier http://codepen.io/juliangarnier Check out the Hartwig chess set (playable too!) and the solar system demo.

ergo14 13y ago

Not compatible with firefox...bye!

walid 13y ago
Wait: https://news.ycombinator.com/item?id=6251831 https://news.ycombinator.com/item?id=6251831

transphorm 13y ago

Wow you are very talented.

chinchang 13y ago

Mannnn...u rocked this big time with web. Its so performant!

transphorm 13y ago

Also I wanted to say...I hate how backend developers front end developers. You are proof that front end devs are no joke and we can do impressive work!

walid 13y ago
Your username is very fitting for the subject matter.

miniatureape 13y ago

This is amazing. Is it possible to create a sphere?

kemist 13y ago

I really love the hero unit. It's a great example of an animation that tells a short story, and gives you a feel for the app. First you see a flat rectangle with drag handles, which sets your expectation, 2D WYSIWYG editor. The rectangle animates into a 4 sided cube, 2D becomes 3D, it's a 3D tool. Then the cube breaks into 2 angle brackets, the output is just HTML and CSS. I'm left with a nice little feeling :) Awesome work

Timothee 13y ago
I had totally missed the fact that it ends as two angle brackets! Very smart logo and indeed very good way to introduce the product.
- blktiger 13y ago
  Me too, that's clever.
JulianGarnier 13y ago
Thanks! Actually I wasn't sure people will understand all the ideas I have put in this animation. But you have perfectly described what I wanted to tell, I'm impressed!

smallarmsdealer 13y ago

Doesn't work with Firefox. Damned kids and their damned monoculture. Make it work with my shit!

agumonkey 13y ago

I just had a VRML flash.

program 13y ago

Safari on iOS 6 crashes every time I add a solid to the scene; which is kind of fascinating.

jbmartin 13y ago

In terms of rendering speed, how efficient is CSS compared to webGL or other related 3D technologies?

michaelbuddy 13y ago

can't seem to figure it out on chrome 29 on windows7. maybe I have a conflict or need bleeding edge chrome.

epo 13y ago

Very impressive demo. I see you're looking for work. I expect you will be inundated with offers, be picky.

ymow 13y ago

SO COOL

moeamaya 13y ago

With the plethora of webGL, canvas, css3d apps out there, the exceptional feature of this app is the user experience and interface. Every click feels intuitive and snappy and if I want to complete an action, it feels seamless. Nice job, seriously keep up the good work.

JulianGarnier 13y ago
Thanks. Making the UI was a big part of the fun.

ronreiter 13y ago

This is beyond amazing. You are a genius.

deleted 13y ago

[deleted]

andersnolsen 13y ago

I'm sure you'll have no problem finding a job now. Great work! Small thought - when you're moving an object, wouldn't it be logical to also allow for small step moves with the arrows?Now it will move the camera position.

JulianGarnier 13y ago
Yup, > roadmap :)

captainmuon 13y ago

This is really amazing... however we had something like that 15 years ago called VRML, and it probably was 1000 times faster. This is an incredible abuse of css, nevertheless very cool.

maxlibin 13y ago

amazing.

shaimoom 13y ago

Unreal!