Hype3D (and minimum word-counts for titles is pretty silly)

[martyplumbo]

I’ve noticed people here and there requesting 3D in Hype. Most of us here I think get that Hype is not about 3D - it’s a super-robust 2D animation tool that outputs to various formats, including HTML5.

The thing is, have you folks considered making another tool for WebGL authoring? Something like the current Hype 3, only with Unity3D/UDK-like asset-wrangling and which outputs to JS/HTML5 WebGL.

The folks at the various 3D game engines are paying a lot of attention lately to WebGL output and for a good reason. A Hype-ish entry into this space could be pretty killer.

Just a thought.

[nick]

There were some good examples of how to add 3D content
to Hype documents. Probably not exactly what you want at the moment but it opens up some more discussion on how to expand the concept.

Embed3DModel.hype.zip (1.8 MB)
3dRotateHype.hype.zip (249.9 KB)

[martyplumbo]

Great 3D examples, nick!

But I’m actually suggesting a new Hype tool in the vein of Hype but for complex WebGL authoring.

[jonathan (Jonathan Deutsch)]

Our main company goal is to build tools for bleeding-edge web technologies. WebGL definitely qualifies, and it is something I’ve also thought might be a good area to get into. At the same time, I’m not really sure what the best contributions would be - many of the existing tools (Unity/Unreal) I believe have WebGL export options and they are very mature. So we’ll continue thinking where we might contribute - but if you have any specific ideas where there are deficiencies in the tooling let us know!

[martyplumbo]

You know, I can’t figure out what’s better about Tumult - the great tools you make or your great attitude about listening top your users.

Anyway, I’d love to talk more about it. Even in gory detail, if you’d like.

For now though, here’s my nutshell pitch: I think there is a space to be filled in the current crop of build-to-WebGL tools that would provide the basic authoring pipeline (i.e. asset import, world building, scene/timeline) without the more advanced capabilities of UDK/Unity. One key very interesting way to differentiate in this space would be output human-readable HTML/CSS/JS all leveraged against a proprietary WebGL framework (i.e. a Tumult-forked Three.js, for instance). The more advance tools like Unity/UDK are getting WebGL output bolted on, using things like Emscriptem and ASM.JS to steal back performance lost to their overhead, with the price being output HTML/CSS/JS that is essentially “assembly” code.

Just some thoughts. Rambling thoughts. But I’d love to talk about it more.

[jonathan (Jonathan Deutsch)]

Thanks for your additional thoughts!

Not really related to WebGL tooling per-se, but I actually do have a rant on nice code output! Human-readable code is one of those mixed bags… it is very hard to produce something all humans would want to read (many will complain one way or another based on the developer’s choices), and if humans aren’t writing/editing it, then it loses a lot of its purpose. Further, if humans are editing it, then it is assumed that the app needs to be able to read it back in, which is exceedingly difficult in the face of human error and ambiguous specs! With Hype’s output, my philosophy was that this is a feature people think they want, but in reality don’t use. They’re mostly concerned with the result. On the whole, I think this has held up. It is like iPhone’s non-replaceable batteries - a lot more people complain that you can’t replace the battery than would ever actually replace a battery.

Alright, rant over . Do you have any WebGL projects that you’ve made? I’d love to take a look and get a better feel for what folks are doing with it. Most of what I’ve seen has been cool demos or game ports. If there’s other areas WebGL is being used, those specific cases also might be ripe for good tooling.

[martyplumbo]

Nice rant.

Actually, my human-readable suggestion was more an example of how you might want to find a way to differentiate but not one I necesarily believe would have great sway either. JavaScript is the “new Assembly” afterall, and who needs to read assembled code - as long as it works.

I thought a bit about this and I think one way you could differentiate a Hype-ish WebGL authoring tool would be for it to be written from the ground up as targetting WebGL and ony WebGL. Unity/UDK/Cuscos/Torque/etc. are all trying to serve WebGL as just another build target among many that they vector. But there aren’t many complete authoring tools focused solely on WebGL output (GooEngine comes to mind). Focusing on WebGL exclusively could be a very fruitful approach.

I haven’t done much work with WebGL natively, myself. Just demos and noodling with the various frameworks. I’ve worked primarily in Unity for the past decade now and, while I admire the tool, I think WebGL deserves its own optimized tools. WebGL has huge promise in its potential to allow developrs to sidestep the world of App Stores and publishers and code-signing and the rest of that external control, taking their work straight to the web. We’re still kind of at the hobbyist stage right now, but hopefully Hype-cailber tools are coming to take everything up a notch.

[infopostal (MMuser)]

The market lacks a WebGL tool that has a timeline to position objects and handle animations.

[martyplumbo]

Sadly, it looks like Adobe has arrived.

The newly-renamed Flash (Adobe Animate) will export WebGL, as well as canvas, SWF and a bunch of other formats.

[h_classen (Hans-Gerd Claßen)]

with a bunch of overhead … i guess

[jonathan (Jonathan Deutsch)]

The question is also what you want in a WebGL tool. While WebGL can render 2D (and sometimes much faster than DOM/Canvas), if you want a 3D tool then it opens up a lot of possibilities. I’m not sure what users are looking for right now, but feel free to elaborate on what kind of work you do and where a tool could help - I’m always looking for possible ideas!

This is more of a Quartz Composer model, but I did run across this interesting 3D tool the other day (mostly for VR)

Vizor 360

[visua (Michael)]

I guess I’ll contribute my own rant . WebGL tooling is maturing pretty nicely with tools like PlayCanvas and GooCreate. The studio I just started working at built this with the latter. As a designer/art director I like tools like Hype, Stencyl, Goo Create, and Unity. It’s a different paradigm, by putting equal emphasis on content creation and development. Certainly this is a balance that’s hard to strike for any type of interactive toolset.

I do think timeline-based packages are more ‘designer’ friendly, because the actual content creation is much easier on a linear timeline. Adding interactivity by scripting timelines is an easy concept to understand, and tools like Hype make it even easier.

A separate WebGL package would be cool – but what about all the 2D UI? A lot of the awesome WebGL content is mixing 3d/2d, similar to the site I linked to earlier, or the Halo Guardians campaign for instance.

To @jonathan’s point, the debate about code generation will persist. In the ‘Flash-era’ a designer, animator, and a developer might work together in the unified environment. This has changed a lot, and nothing really exists in the web space that’s similar. Game engines do a much better job at building software for designers and developers. Aside from my personal projects, anything I do in Hype never gets to production. The TD’s generally want to build something custom using greensock or whatever, and I understand that. There’s still value in prototyping something real that you can mess with in the browser – a huge advantage over the After Effects motion comp route in my opinion.

[martyplumbo]

@jonathan et al, I would like to see a WebGL tool that is (1) built expressly for creating WebGL browser-based 3D instead of having WebGL as one target amongst many, and (2) that is otherwise Hype.

Hype rocks because it is an IDE that encompasses the entire workflow from asset import to scene creation to scripting to output. There are tools that do that for WebGL 3D but they are all “author once, deploy to many” tools like Unity and Coscos that aren’t focused strictly on the features and strengths of WebGL.

Also, I like that Hype is a buy-it-once native desktop app, instead of a web-based creation tool like, say, GooCreate. I find that fits traditional workflows better and harbors fewer hidden/unanticipated costs.

As for the code-generation issues, given the necessary and near-universial reliance on frameworks and code “assembly” tools (i.e. asm.js) to make fast JS browser code these days, I think it’s kind of moot. At least for me.

[infopostal (MMuser)]

It would be great to have a tool exactly like Hype, same interface and tools, but for moving and animating objects inside a 3D world. 3D worlds could be added as Scenes as well. 3D scenes.

[jonathan (Jonathan Deutsch)]

Thanks all for the feedback - very useful!

[infopostal (MMuser)]

Axel Edge was a great tool for creating simple 3D content for the web. It also uses a timeline. PDF user guide:

http://www.montrealtechwriter.com/wp-content/uploads/2015/10/axelv2_ug.pdf

[martini]

Hey Jonathan,

I would need the 3D part as an option to load 3D content within the hype document.
For example: Everthing is 2D, like it is now. But you have the option to import a 3D Modell within a div or something. And it is possible to set the options for the 3D model within Hype. Like if its possible to rotate the 3D Modell and put some explaining text to different parts on the 3D Model.

[martyplumbo]

What you describe is very useful and in recent years, near-trivial stuff using WebGL and a framework like THREE.js. There might even be drag-n-drop options out there.

[jonathan (Jonathan Deutsch)]

You can always use an HTML Widget element within Hype and embed other content, such as a 3D viewer/framework showing your models.