Home / Javascript / Adidas all for this case study – part 2

Adidas all for this case study – part 2

DEMO

Continue from the part 1, as I mentioned that we can’t use webgl in this project,  we still want to create a 3D feel like particles visualisation, so I start to run some test on the canvas, which is a whole new world to me, surprisingly, the performance is really good, even on iOS devices. So the basic idea is to create a huge canvas contains everything,  clean it and redraw all the particles back on every frame. It sounds quite scary with “clean everything” and “redraw everything” but actually it’s working quite well. So we solve the technology we are going to use, the next question is how to build a fake 3D illusion.

The power of matrix

At beginning I just trying to create an imaginary camera, so all i need to move is the camera instead of all the particle positions, which will saves a lot of work for me, so i create a camera matrix for that. Then i need to create the perspective projection so it will feel really close to what you will get in 3D. At this point i feel what i’m trying to do is really similar to what i did with WebGL : prepare the model, view and perspective matrix then pass in to the shader. So I took the matrices i used in my webgl project and it works ! Ok, not 100% but for the camera matrix it works perfectly, however i still don’t get the perspective, and then i discover this is the only extra work you need to do, you need to scale by yourself. It’s actually not that complicate because you already have the correct calculated position from those 2 matices, then all you need to do is to decide how much you want to scale by the depth, then call context.scale() and voila !

There are still a lot of work to do to make this one a complete 3D like framework, but in that case it’s probably easier just use Three.js. In our case this is already enough so we just stop here.

Tips for optimise performance

The first one it’s really depends on different project, in our case we are using add blend mode, so we don’t need depth sorting, this really saves us a lot of spaces. The second one is don’t render the thing you can’t see, like the particles with 0 opacity, or the particle with too small size ( <2px) just skip them and you will find you get a huge performance boost. And the last one is a tricky one : be careful with the size of your particle, during the development there’s once we had a huge drop on the performance and I don’t know why, after spending hours trying to find the problem at the end actually it’s because we shrink the size of the particle from 96 to 64, when I scale it back you 96 the fps goes up to it was before right away. It might be that i was trying to scale it too much in code, so when i put the image size back it works.

The performance of the canvas is really surprising, and especially when you see this fake 3D stuff working on the ipad and you can interact with your finger. I’m not a big fan of iPad because you can’t run webgl on it but  i have to say it feels quite nice to interact the 3D with touches, feels more intuitive. Really hoping the coming of the day that we can run webgl on the mobile / tablet devices.


Leave a Reply

Your email address will not be published. Required fields are marked *