search

Cardshifter / HTML-Client

HTML/CSS/JS-based client for Cardshifter
http://cardshifter.zomis.net
Apache License 2.0
13 stars 5 forks source link

Canvas for Cyborg Chronicles cards #141

Open FreezePhoenix opened 6 years ago

FreezePhoenix commented 6 years ago

Yes, I said canvas. @Phrancis suggested we do a 3D animated model for the card images - and it sounds cool. Essentially, we would be putting 10-20 animated THREE.js canvas instances complete with textures and cameras drag controls. The main difficulty to this is creating the models - the Knight example model is 3.95 MB. What's even lovlier is the fact that it contains 16980 vertices.

We don't have to go that far, but overall, I think this is a good idea.

FreezePhoenix commented 6 years ago

+1 if you think we should implement this, or -1 if you think we shouldn't.

FreezePhoenix commented 6 years ago

@Zomis pray tell, why would you be confused?

Phrancis commented 6 years ago

To clarify - This will need to be tested with a throwaway canvas model, to make sure the performance is OK, and that it is feasible and desirable. Only then will we be prepared to decide if we want to venture down this avenue or we will stick to static images.

FreezePhoenix commented 6 years ago

@Phrancis Clarification understood. The problem is, we have to make the models before we can test them.

FreezePhoenix commented 6 years ago

@Phrancis https://threejs.org/examples/#webgl_multiple_elements There you go... there's your test for whether it works well... seems to work fine for me.

Phrancis commented 6 years ago

Good find, that seems like a plausible test. I ran it in multiple browsers, here is what I found out.

Phrancis commented 6 years ago

When comes the time to make an actual mock-up, this demo can be copied from since it is animated and has many more vertices, we can just add some textures and some lighting to make it closer to what it could look like on a card. Then we can put it in an actual card template and add a bunch of copies on the page to see if performance degrades.

FreezePhoenix commented 6 years ago

@Phrancis @DainIronfootIII looks like Babylon.js will be nice - unfortunately, my system has blocked it (I'll see if I can do something about it) Also: something to see: https://travis-ci.org/BabylonJS/Babylon.js.svg

Oops I hit the wrong comment button...

Hosch250 commented 6 years ago

@Phrancis Three.js loaded just fine for me in FF (my default browser).