search

vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
2.03k stars 301 forks source link

using MeshMatcapMaterial #31

Open FrissAnalytics opened 3 years ago

FrissAnalytics commented 3 years ago

Hi Vasco!

Hope you are doing well! I'm wondering, for a more artistic effect, is it also possible to apply a MeshMatcapMaterial to the globe? I was just goofing around and was looking at a codrops article in which they use this material, which looked kind of cool. Obviously pretty useless, but cool :-).

kind regards, Herman

vasturiano commented 3 years ago

Hi Herman, good to hear from you!

Thanks for the pointer to MeshMatcapMaterial, I didn't know about it. 👍

Well, I quickly tried it on the globe but couldn't tell much difference compared to the current MeshPhongMaterial, but to be fair I didn't actually set the matcap map itself which is probably what sets it apart.

I'll experiment a bit more with it!

FrissAnalytics commented 3 years ago

Hi Vasco!

thanks for reaching out so quickly! FYI: here is a video on THREE.js using the material. It looks quite nice on some structures, but perhaps with a globe the effect is less pronounced than on geometries that have more strait angles. Anyways, curious if you can make it work :-)

kind regards, Herman

ps: I'm working on a Covid dashboard that involves your work in quite a big way. I'm planning to write a in depth tutorial series about creating web apps using d3, three.js, material design and vue. In that work I use the covid dashboard as a vehicle to explain a lot of concepts.

It's intended for the intermediate data visualization enthusiast. When it's ready I'll let you know. It's basically for others to learn more about composing apps with components and wrapping d3 code in ES6 classes and using event bus, routers, single file components, build systems and vuex state managing solutions.

The demo app shows a lot of interaction in the form of interactive timelines and inter component communication with zooming, panning and dragging etc. It's using your globes, networks in 2d and 3d and d3 map ideas (also using the super nice procedural-gl from Felix Palmer), combined with a lot of standard Material components.

Should be quite nice for people new to these topics. Anyways, still a long way to go, but of course like your work it will all be available on github. Thanks again for your great work, I enjoy it every day!

image

image

image

image

vasturiano commented 3 years ago

Hi Herman, sorry it's been a while on this!

Your Covid dashboard looks brilliant! Looking forward to play around with it when it's available. Do please let me know when you publish it. 👍

About the MeshMatcapMaterial I just did an update that makes this swap easily done from the app itself. The globeMaterial method now also doubles as a setter, so one can simply do something like:

myGlobe.globeMaterial(new MeshMatcapMaterial(...))

This should make it easy to just try out different materials and a more customizable styling of the globe.

FrissAnalytics commented 3 years ago

Thanks for the update!! Also thanks for the kind words, when the tutorial series is ready I’ll let you know!