
Show HN: Tridiv - CSS 3D Editor - JulianGarnier
http://tridiv.com
======
arscan
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?

~~~
JulianGarnier
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).

------
JulianGarnier
A codepen demo I made to introduce Tridiv capabilities :

[http://codepen.io/juliangarnier/pen/hzDAF](http://codepen.io/juliangarnier/pen/hzDAF)

~~~
SchizoDuckie
Holy moly.

I'm going to throw this at anyone that doubts the capabilities of HTML5/CSS3

~~~
nickstinemates
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
Can you cite some examples of these generators you speak of?

------
kemist
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
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
Me too, that's clever.

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

------
Sandman
Not compatible with Firefox. Too bad.

~~~
trycatch
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
You okay?

------
SchizoDuckie
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!

------
crazygringo
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
Maybe in the future.

------
swalsh
This is extremely impressive! great work.

------
fadomire
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
yeah weird

------
transphorm
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
Your username is very fitting for the subject matter.

------
aroman
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
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.

------
capnjngl
Wow, pretty incredible stuff. Well done.

------
moeamaya
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
Thanks. Making the UI was a big part of the fun.

------
juretriglav
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.

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

~~~
JulianGarnier
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.

------
andersnolsen
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
Yup, > roadmap :)

------
captainmuon
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.

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

------
ronreiter
This is beyond amazing. You are a genius.

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

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

------
epo
Very impressive demo.

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

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

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

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

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

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

------
amasad
This is really cool. Wondering why not WebGL?

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

------
cdekok
It's flat on chromium 28

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

------
transphorm
Wow you are very talented.

------
agumonkey
I just had a VRML flash.

------
shaimoom
Unreal!

------
ymow
SO COOL

------
ergo14
Not compatible with firefox...bye!

~~~
walid
Wait:
[https://news.ycombinator.com/item?id=6251831](https://news.ycombinator.com/item?id=6251831)

------
maxlibin
amazing.

