3D Animation, how did they do that?


(Pete) #1

@jonathan how did they do the 3d in this one? Im trying to do something like this with hype.

https://bannerboy.com/case-studies/lg/LG_Hero-Black_300x600_LearnMore/

Update: they do use the following, dont know which controls the the phone movement.
37%20AM

Looks really cool would love it if Hype had something like this without code.


(Mark Hunte) #2

Not familiar with using them but I wondering if the matrix3d

<canvas width="600" height="1200" id="canvas" style="z-index: 0; height: 600px; width: 300px; perspective: 1000px; position: absolute; transform: matrix3d(0.9999999847691291, 0.0001745329243133368, 0, 0, -0.0001745329243133368, 0.9999999847691291, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></canvas>

in the canvas is what you are looking for.?

Found this example.


(Pete) #3

Thanks, I found this after you mentioned matrix3d

http://ds-overdesign.com/transform/matrix3d.html

I see exactly what they did they are animating all side left right back front simultaneously but how are they animating the whole thing with all sides moving together like this? Im speculating they using some form of a plug in AE to convert the timeline data in CSS via the matrix3d Transform.


(Jonathan Deutsch) #4

They are using WebGL for the 3D rendering, with a little help via the Tiny WebGL library. For the timelines driving it, they are producing animations with TweenMax via a BannerBoy-specific helper library.

matrix3d is a mathematical representation that can hold the CSS3-style transforms: translate, rotate, scale, and skew. (Really it is more the reverse - those are the CSS transforms because of the matrix3d!) I don’t know who came up with using linear algebra for graphical transformations, but the math is rather elegant.

When the animations run, they get a render callback. This takes the transform values and constructs a matrix. This matrix is fed to the webGL code to produce the moving phone.

Other elements (the text and such) are traditional DOM manipulations.


(Pete) #5

That’s just Insane :open_mouth: just to animate the phone like that? They’re tapping Into various libraries and customizing the movement with their own custom library. My goodness, what aren’t they doing? :crazy_face: You would think there’s an easier approach to this being we’re in 2018 but nope. Praying one day Hype can deliver the tools necessary to animate 3D objects without injecting various libraries much like with physics, waypoints.


(Jonathan Deutsch) #6

Best I can tell it is about 460 lines of hand coded javascript for the project; quite a bit of effort for the one ad, but I suppose their business is boutique ads :). (side note: we used to have a Hype sample on our gallery from them actually, but the branding became stale so they asked us to take it down)

WebGL/3D support would be cool, but no small task :). I haven’t tried Unity myself, but I know it has webgl export capabilities so that might work in an HTML Widget for combining the two now.


(Pete) #7

This is where the idea came from - Sketchfab, its hitting the div.webgl.camera-moving (see video below) If you can allow hype to control the move in real time by way of recording the movement with hypes user interface timeline and that would actually do it without bringing the model in hypothetically speaking. Just load the source code of Sketchfab into hype not the embed code but rather the standalone code without the control of any kind just the 3d movement.

LG G6 On SketchFab

See if you can recreate the effect in Hype.


(Dennis van Leeuwen) #8

I will make a rebound based on 2D images. It will sort of look good.

My current challenge. Animating triangles.


(Pete) #9

2d Rebound will not look as authentic as 3D.


(Dennis van Leeuwen) #10

CSS is also just 2D, our eyes will help blend in.


(Pete) #11

What you mean to say is, it’ll give the viewer an illusion of 3D with 2d as the mind pass it as 3d? If so, your talking about a band aid solution. I’ve tried this before, it still not 3D. The whole reason why webgl, tinywebgl javascript libraries exist, heck its why Sketchfab exists.

Furthermore, Its not about creating 2d to mimic 3d its about pushing the boundaries and keeping up with current trends.

A solution to properly do 3d with css “2d” is this https://cssanimation.rocks/macplus/ In theory if hype allows the use of defining 4-6 sides as images via a Symbol and allow it to revolve that would actually do just fine but fine for the most part.


(Dennis van Leeuwen) #12

True true.


(Ken Heins) #13

This is just a general question based upon several years of reading comments about
adding different ways of importing other graphic types.

I am not denigrating those requests, I understand them totally and might agree with some, which would of course be whatever 3d or adware requirement I might have at a particular time. I would love some 3d capability.

The big reason I went away from Adobe a long time ago was that they tried to be everything to everyone, do everything in one giant application. There is a saying that those who try to be all things to all people succeed at none.

I would not want us to go there, if Hype became bloated like Adobe products, I would then have to go somewhere else, where? i do not know. I would not want it to be a $1000 (or more) app. I would worry more about how the app might then work than the price.

I was given a Leatherman tool for Christmas, it has every tool you can think of to fix almost anything, beautifully built, but you have to almost totally unfold it to find the individual tool that I want.

Another example: I was involved with race cars for 20 years. You can create a huge number of marvelous widgets to adjust virtually everything, but in the end if you can’t make the necessary adjustment on a 15 second pitstop, you are better off not having that multi-thousand dollar trick piece, and truthfully with all the possibilities available, you can lose your ability to mentally track the relationships between all of them and end up totally lost in terms of what you wanted to do.

I would not want to be Jonathan, Daniel etc. on this particular aspect.

I DO understand and agree with what people are asking but beware of what you ask for. :slight_smile:


(Dennis van Leeuwen) #14

Wisdom cookies are welcome. Thank you Ken.


(Ken Heins) #15

You DO have a challenge there, I think it looks good.


(Pete) #16

Weeeell, you kind of are, your weighing in is not helping get us get there which is quite unfortunate.

Have to disagree with you there bud.

This is a justification based on what you consider to be ‘correct’ may not be factual. Adobe might be ‘bloated’ with new apps that they offer that could be it, maybe. However, with every update to their apps ps, ai, in, heck l’ll throw in final cut with the addition of 3d text feature - point being they make it easier for people to achieve desired effects faster with less steps that’s anything but ‘bloated’ buddy. Again it could be said with new apps they introduce - that is something I can agree with you on.

Not to sound harsh, but the more examples you bring about, the more it seems like your fixated on the idea more is bloated? :slight_smile: And, if it’s bloated, it can result in app being not as functional as before? Sure, there are technical hurdles here and there that’s why we have the amazing developers over at tumult who do rigorous beta testing.

Question for you, is having certain libraries be it physics aka matter.js or new things found the beta like vector shapes and animations bloat things up for you?

If you ask me, I love the fact that it’s there, because it gives user these options. Would I use physics in every project? Probably not, but the fact that it’s there is already a benefit. Same could be said with the 3D that I brought up.

@bendora, look to words of wisdom from the wise poets, scholars, perhaps look for inspiration google images - Steve Jobs words, just a thought.


(Freelancer) #17

@TKDblackbelt I totally agre, there is a limit between supporting an app and the search for everything that can be found in other software or on the web.
It depends on the misunderstanding of the current scenarious, the size of the company and the time for development; and not at last the compatibility on all browsers for new improvement for as many users as possible, not just for developers.
However, enthusiasm and perseverance are always appreciated :slight_smile: this is a big community, every suggestion is always positive!

Now you can avoid compatibility issues with another trick, a 3d sprite.
I made this model in 3D with all views in jpg ( a virtual pano of the object).
this is not a real 3D but isn’t a bad solution.


(Pete) #18

In keeping up with the forum rules and guidelines, I wanted to address the elephant in the room.
I’m rewriting the response to let @michelangelo and @Daniel know I was out of line in the way I communicated. It was rude, humiliating, and not professional of me.

That said, heres what I meant to say, while your example is 3D rendered, it’s not actual 3D. Sprites, depending on size, color, they can end up being quite large in file size.
Furthermore, with your example the frame rate is a bit sluggish I don’t think it’s a great representation of a fluid 3D working in a browser, it’s seems like a band aid solution.


#19

@petester please don’t begin to individualise your comments and take apart other peoples work. That’s not what these forums are for. We don’t want it turning into “normal” forums. :wink:

Let’s keep the posts constructive or at least civil. Everyone has a list of things they wish one particular software would do but most of the time it’s not feasible in the sense of how much work it would take to integrate said feature against the cost benefit of the addition. As Jonathan has said, “would be cool, but no small task”.

Discussion is fine by me but not at the expense of going down the road of … I disagree, my way is the best … no, I disagree, MY way is and btw your work is boring.

My 2 cents … I’ve had quite a bit of success using https://threejs.org as a way of integrating 3D models into Hype and being able to pan and zoom. Just another option.