9 ms·
WebGL Studio
- Turing_Machine 11y agoVery impressive.
- danboarder 11y agoThis 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 11y agoWebGL 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 11y agoAs 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 11y agoThe 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 11y agoThose 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 11y agoThe 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.
- millstone 11y agoBut by having a shared convention, we avoid having to relearn a new one for every app. You really wouldn't mind if the app used control-p for delete, and control-z to quit?
- tamat 11y agoNow you mentioned it also passed my mind to scrap DOM and use my own gui, lots of advantages but im worried it will slow down the development. Indeed all the timeline editor is a canvas. Its worthy to consider it.
- yoklov 11y agoDoing your own GUI affords a lot of advantages in terms of how you structure your code. As soon as you decide to render every frame you can take advantage of immediate mode techniques that work very well in editors IMO (unfortunately, many of the examples of using and implementing these online are not very good and imply restrictions that are not inherent with the technique...). That said you seem to be far enough along that redoing the GUI would not be a good idea really. Also the DOM is a fairly okay retained mode UI, so if that is your preference I would just use it.
- tamat 11y agoBut i have stumble in so many problems thanks to the DOM inconsistencies. more time spend in DOM problems than webgl problems
- robmcm 11y agoIn many ways WebGL is akin to a plugin. It's effectively replaced what plugins like Flash and Silverlight offered in the past by bolting on a new piece of functionality to the browsers. The difference is the browser vendors are in control of the implementation that will make it slightly more secure, but it's still a long way from the HTML/JS/CSS environment people though would replace plugins.
- radicalbyte 11y agoOnShape is amazing, built with Angular too :)
- mixedbit 11y agoIs the author here? What license do you plan to use?
- Jare 11y agoIt says "Released under the MIT License" at the bottom
- tamat 11y agoIm here but my license knowledge is limited, thats why I just applied the MIT which I think is the one that fits better
- mikekchar 11y agoMIT 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 ;-)
- e19293001 11y agoYour project is fantastic. And, releasing the source code as free is the best thing you've actually did. This would be that start of it!
- rashthedude 11y agoWow
- adamzubi700 11y agohttp://googler700.blogspot.com/2015/08/c-file-programs.html http://googler700.blogspot.com/2015/08/c-file-programs.html
- yeureka 11y agoI 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 11y agomerci :)
- justaaron 11y agowow!
- ambrop7 11y agoDo 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
- _mgr 11y agoHaving read through the Trademark Guidelines[1] it would appear that they may have overlooked it. I can not find any attribution on Github or within the web app itself. [1]https://www.khronos.org/files/legal/khronos-trademark-guidelines.pdf https://www.khronos.org/files/legal/khronos-trademark-guidel...
- tamat 11y agoyep, its a placeholder name, I will change it as soon as a nice name comes to my mind.
- scrollaway 11y ago"Decahedron.js". From the three-dimensional variant of the decagon, the symbolic shape of a spider web. Mmh, yes, sorry, I'm bored. :)
- tamat 11y agoToo long!
- Lawtonfogle 11y agoYou could always go with the short "d10.js" if you want to add another level of abstraction.
- xyproto 11y agoSomething related to light or rooms seems to be the norm (Blender, Studio, Cinema, Lightwave). How about "Photon Studio", "Sunshine 3D" or "Lightbulb"?
- dented 11y agoBrilliant work!
- morganwilde 11y agoEven 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.
- tamat 11y agoBut it is not a 3d modelling software, it is a 3D scene editor, like Unity. Improving the interface is the easy part, for me the important aspect was to be sure that all the important features are there, so now I can focus on improving the experience.
- bhouston 11y agoExactly. 3D engine !== 3D modeling tool. If you are interested in a WebGL-based 3D modeling too, give http://Clara.io http://Clara.io a try.:) BTW we should figure out a way to connect Clara.io to WebGLStudio as it can be a source of content, both models as well as 3D animations (Clara.io has a full keyframe editor.)
- tamat 11y agoNice suggestion. Worth considerin
- addandsubtract 11y agoIs 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.
- aplummer 11y agoThis blows my mind. I've got bugs with a carousel today and people are building this. So impressive.
- tamat 11y agoit is just a matter of time, I've been working in this project fulltime for three years
- onion2k 11y agoAs 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 11y agoOther people? Javi Agenjo is the author of both WebGLStudio and litegl.js :)
- onion2k 11y agoIs he? I didn't realise. Talented guy.
- tamat 11y agoLitegl grew as the requirements of webglstudio grew. I encourage my students to do not use lubraries so they have full control of ehat they do. Thanks for the compliment :)
- adam12 11y agoThe 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
- nkoren 11y agoLooks amazing, but is there a demo scene I can load to test it out?
- tamat 11y agoThere are some. Check the videos to see how. You need to login first as guest
- Keyframe 11y agoThis is really nice! how did you do the UI?
- thebeardedone 11y agoGreat job! Keep up the good work!
- bhouston 11y agoIf you want to create 3D models and animations for WebGLStudio, you can do so via: http://Clara.io http://Clara.io
- wildpeaks 11y agoThat's great, it looked already good in 2013 when it won best paper (http://gti.upf.edu/webglstudio-gti-paper-goes-viral-at-web3d-2013 http://gti.upf.edu/webglstudio-gti-paper-goes-viral-at-web3d...), I'm happy to see it reached a 1.0 release.
- Asbostos 11y agoThanks for using a right-handed coordinate system.
- tamat 11y agoHahaha. Just using the OpenGL default
- kp25 11y agoImpressive.! Lets Hope we play the next gen 3D Games in browsers
- deepflame 11y agoThis 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 11y agoThere 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
- TazeTSchnitzel 11y agoTHREE.js has a similar editor: http://threejs.org/editor/ http://threejs.org/editor/
- AbraKdabra 11y agoAs long as I like that editor, it's not even close to this one.
- tamat 11y agoThe 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.
- yoklov 11y agoThe THREE.js editor isn't very good or well developed to be honest. It really feels like a proof of concept more than anything intended for real use. This seems much more polished in comparison.
- yoklov 11y agoVery 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 11y agoGood 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.
- bsenftner 11y agoIs 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 11y agoTotally 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
- ezolotko 11y agoThe 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 11y agoComponent 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.
- nacs 11y ago> The object/component system looks like a Unity3D ripoff Component based systems have existed since 1968, way before Unity: https://en.wikipedia.org/wiki/Component-based_software_engineering https://en.wikipedia.org/wiki/Component-based_software_engin...
- hccampos 11y agoThis 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 11y agoI know goo create, great project, keep it up!
- curiousjorge 11y agohow 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 11y agothis 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
- emmanueloga_ 11y agoAwesome 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 11y agoexactly what I think