
WebGL Studio - desp
http://webglstudio.org
======
aplummer
This blows my mind. I've got bugs with a carousel today and people are
building this. So impressive.

~~~
onion2k
As soon as you start trusting other people's code and reusing things (eg,
don't write your own carousel) you can start building cool stuff on top of
other people's work. This editor is standing on the shoulders of litegl.js.

~~~
vanni
Other people? Javi Agenjo is the author of both WebGLStudio and litegl.js :)

~~~
adam12
The readme says litegl is a fork:
[https://github.com/jagenjo/litegl.js/tree/master#readme](https://github.com/jagenjo/litegl.js/tree/master#readme)

Evan Wallace should get some credit. Evan created that fantastic WebGL Water
demo.

[http://madebyevan.com/](http://madebyevan.com/)

[https://github.com/evanw](https://github.com/evanw)

~~~
tamat
True, without his lightgl library this project wont exist, but the first thing
I did was to strip all the things I didnt like and improve from there. There
is hardly any function in litegl that remains unchanged from lighgl.

------
danboarder
This is amazing and feels very fluid. I think it is part of a web-based
software trend that will surprise a lot of people who think of the web at best
as an interactive document display system. Another app that has a very snappy
UI like this is [http://OnShape.com](http://OnShape.com) CAD software, which
is full featured 3D solid modeling without any plugins (all JS and WebGL).

~~~
pavlov
WebGL allows you to build completely custom UIs, and these are well suited for
3D apps (which typically use OpenGL on the desktop, so transferring knowledge
is trivial).

However, between custom OpenGL UIs and HTML-based UIs, there is an entire
spectrum of native apps (mobile and desktop) that make use of platform
conventions and standard functionality. This space is difficult to cover with
web technologies because you have to simulate the look & feel and make the
site feel like an app.

Many people have tried to build "just like native" toolkits from WebGL and
DOM, but it's pretty tough. WebGL is very low level for this, and DOM is much
too high level for many things.

~~~
bobajeff
As a user I have to say it doesn't matter me if your app looks native or
follows HIG. That's just a convention used to make apps behave predictably and
smoothly. If you can accomplish that with your own sensibilities that works
too.

~~~
Turing_Machine
The common user interface/HIG idea makes less and less sense as software
begins to do more and more things.

IRL, we don't expect toilets, hammers, bulldozers, shotguns, and surgical
scalpels to have the same user interface features, and it would suck mightily
if they did. Unfortunately, as those things get computerized we wind up
getting the same crappy touch-screen menus and whatnot bolted on to them
(imagine what using a hammer with a touch screen interface would be like).

I don't know the answer to how it could be brought about, but we definitely
need some radically thinking in UI design. 3D libraries seem to at least
provide the tools to _make_ some new tools.

~~~
millstone
Those real life tools have a far simpler interface than, say, a mail client.
As software becomes more complex, HIG increase in importance, because there is
more to learn and HIG enables us to transfer knowledge across apps.

~~~
Turing_Machine
The actions you perform with a scalpel (or even a bulldozer) are far more
complex than sending email, so arguing that they have a simpler interface
doesn't really support your case. Quite the opposite, in fact. I would argue
that they have simpler interfaces because those interfaces are actually
_optimized for the task_ , rather than being some jack-of-all-trades
compromise.

------
wildpeaks
That's great, it looked already good in 2013 when it won best paper
([http://gti.upf.edu/webglstudio-gti-paper-goes-viral-at-
web3d...](http://gti.upf.edu/webglstudio-gti-paper-goes-viral-at-web3d-2013)),
I'm happy to see it reached a 1.0 release.

~~~
bhouston
It used to be flash based if I remember correctly -- at least the 2013
version.

~~~
tamat
Nop. But i have done 2D editors in flash before

------
ambrop7
Do they have permission to use the WebGL trademark in the name? Khronos has
quite some info about that, but I don't see immediately how their use fits
into the terms.
[https://www.khronos.org/legal/trademarks/#webgl](https://www.khronos.org/legal/trademarks/#webgl)

~~~
tamat
yep, its a placeholder name, I will change it as soon as a nice name comes to
my mind.

~~~
xyproto
Something related to light or rooms seems to be the norm (Blender, Studio,
Cinema, Lightwave).

How about "Photon Studio", "Sunshine 3D" or "Lightbulb"?

~~~
Dylan16807
[https://www.youtube.com/watch?v=aaZTSDfT1o4](https://www.youtube.com/watch?v=aaZTSDfT1o4)
Light or rooms?

------
emmanueloga_
Awesome project! Congrats to the author for such clean code base too!

Maybe slightly off topic, but one of the most important takeaways from this:
you don't need a bulky JavaScript framework to build complex applications. In
fact, you may be better off without using one.

I'm sure there's a very narrow sweet spot where a given JavaScript framework
can make you more productive. But if your application is complex enough, like
this editor, the framework will probably work against you. And if it is simple
enough, it may be better to not use the framework, so you don't grow dependent
on it and find it hard to remove it if you need to grow the app.

Instead of the framework imposing the structure and constraints, a team can
decide on the structure, agree on the constraints, and build libraries helpers
according to that. Way more economic than the alternative: working around
buggy and/or undocumented framework features, trying to catch up to constant
changes and "upgrades", fighting against the JavaScript marketing machinery
trying to decide which of the "Top JS Frameworks" to use, etc.

~~~
tamat
exactly what I think

------
yeureka
I have to say I feel very proud that this comes out of Pompeu Fabra
University.

I learned so much there, so many amazing people.

Great work guys!

~~~
tamat
merci :)

------
bhouston
If you want to create 3D models and animations for WebGLStudio, you can do so
via:

[http://Clara.io](http://Clara.io)

~~~
xyproto
Not open source, though.

~~~
bhouston
To be clear WebGLStudio is a game engine, rather than 3D modeling tool -- thus
WebGLStudio and Clara.io are not competitors.

------
TazeTSchnitzel
THREE.js has a similar editor:

[http://threejs.org/editor/](http://threejs.org/editor/)

~~~
AbraKdabra
As long as I like that editor, it's not even close to this one.

~~~
tamat
The main diference is that I created the engine to fulfill my editor needs and
not the other way around. Also not having legacy allowed me to recode lots of
parts without problem.

This being said I love the idea to stop at runtine any application coded in
threejs and have the freedom to edit it from the console using the chrome
extensition.

------
hccampos
This project is amazing, especially considering that you have been working on
it on your own for 3 years. Lots of perseverance!

A similar project (albeit not open source) is Goo Create by Goo Technologies:
[http://goocreate.com/product/](http://goocreate.com/product/)

It is being used by several companies in pretty large productions (including
games, ads, educational projects, etc) both for desktop and mobile devices.
You should really check it out.

Full disclosure: I work for Goo Technologies as a Frontend developer.

~~~
tamat
I know goo create, great project, keep it up!

------
nkoren
Looks amazing, but is there a demo scene I can load to test it out?

~~~
tamat
There are some. Check the videos to see how. You need to login first as guest

------
yoklov
Very cool. Seems better than the competitors (playcanvas, three editor, ...)
by some amount. Being 100% open source including the editor is pretty huge IMO

The big questions for me are: What model formats does this support? How well
developed is the animation support? How is the performance in large scenes and
on mobile?

~~~
tamat
Good questions. It supports collada which is the default ascii format por
scenes, i managed to export complex scenes with animation without problem but
there are some cases that do not work.

Performance could be improved, im aiming more to flexibility but i managed to
have hundreds of objects with independent materials at 60 fps. For mobile i
want to create a lightweight rendering mode because the current one has too
many cases to consider.

The next release will be focused in bugs, and the one afterward in
performance.

------
deepflame
This is really great and I would not know where to start building this. The
only thing that I would like to have is the use of "modern" JS tech like ES6
and a build pipeline... Surely this can be added later as well.

~~~
tamat
There are some features in ES6 that could improve the coding but nothing that
is really game changer for performance, but ES7 will have SIMD support, that
would be amazing

------
bsenftner
Is there any doc or readme for the geometry format? I've downloaded the
source, and am reading, but some breadcrumbs to guide one would be great.

~~~
tamat
Totally right. I want to publish a doc where i store all the important info so
people can mess around.

My binary format is similar to the WAD format, it is a way to store a json
with the typed arrays encoded in chunks

------
Asbostos
Thanks for using a right-handed coordinate system.

~~~
tamat
Hahaha. Just using the OpenGL default

------
Keyframe
This is really nice! how did you do the UI?

~~~
tamat
I created my own js library called litegui. Check it out at the same github
account although no documentation is available right now.

~~~
Keyframe
Thanks, this is great! Shame I'm not in Js/Web anymore. I like your TV
interface on your site as well. Keep up the good work!

------
mixedbit
Is the author here? What license do you plan to use?

~~~
tamat
Im here but my license knowledge is limited, thats why I just applied the MIT
which I think is the one that fits better

~~~
mikekchar
MIT is a fine license, but it worries me when I hear this. I've seen too many
people who make assumptions about what copyright offers (and doesn't). It
sucks, but it's a good idea to spend some time getting familiar with licenses
so that you don't offer something that you don't intend. Also, if you are
using 3rd party libraries, you need to make sure that they are compatible with
the license you choose.

Just friendly advice from someone who has seen things go badly before ;-)

------
kp25
Impressive.! Lets Hope we play the next gen 3D Games in browsers

------
Turing_Machine
Very impressive.

------
thebeardedone
Great job! Keep up the good work!

------
dented
Brilliant work!

------
rashthedude
Wow

------
justaaron
wow!

------
curiousjorge
how do I create 3d models with this? needs some video tutorial but this is
very cool.

btw how do you create applications like this that rivals desktop apps?

~~~
tamat
this is not a modelling software, you need to have 3d models and import them
here.

People think there are too many diferences between developing for desktop and
developing for the web, but there arent, it is just a matter of time

------
morganwilde
Even though the rendering performance is very snappy and efficient, to me this
fails on the most important thing for this sort of software - UI. Can you
imagine someone totally new to 3D modelling opening this thing and just going
for it? It's completely unintuitive and yet, because it's so accessible that
should've been the primary concern.

~~~
addandsubtract
Is there _any_ 3D modeling software that is intuitive enough for a beginner to
jump in start creating 3D scenes? The barrier to entry and learning curve of
3D modeling has always been high and steep.

~~~
thedaemon
ZBrush and Wings3D. Completely different, but both are super easy to start
with.

~~~
krisa
I dont know about Wings3D that is probably casual tool. But ZBrush? Are you
sure? ZBrush is notorious for its crazy learning curve. I mean sure you can do
something with it instantly but to make something meaningful is hard.

Besides you should compare it to game engines like unity or ue4, its very
differend thing than 3D modeler.

~~~
thedaemon
Wings3D is not a casual tool. It is a fully featured 3d modeling application
that does that very well. It works on the box modelling principle. ZBrush is
really easy to get into and make something instantly like you say, but yes
it's really difficult to learn. I started with Wings3D and still use it.

------
ezolotko
The object/component system looks like a Unity3D ripoff. Even component names
("MeshRenderer") are unchanged from Unity.

Also it is interesting that it's written in JS without any higher-level
technology like TypeScript or Dart.

A little bit off topic, but every time I try any kind of similar application
(this, a CAD, a PCB editor) that is implemented to work in web browser, I lack
feeling of "stability" of a desktop app with all the files stored locally - I
would rather use a desktop app with inferior functionality.

~~~
tamat
Component based applications have existed for a long time but obviously there
are choices made in webglstudio that tried to appeal to unity users, just
because unity is the defacto standard.

About the stability of desktop apps I agree with you, but sooner or later that
will have to change, so thats what we are pushing.

