9 ms·

Show HN: Hotspot 3D – Compare Phones with WebGL

112 points by binkies3d 9y ago

binkies3d 9y ago
Hi, I'm one of the team at Binkies3D over in Holland. We just launched Hotspot 3D today. I hope you enjoy it as much as we enjoyed making it. :) Whilst there are websites that let you compare the specs of phones, we wanted to compare the shape and size. There are currently 19 phones on Hotspot 3D, but we actually have the models for many more. We just chose the most popular ones for now. It's especially difficult to tell the difference between 'plus' models without a physical reference, so that is where this idea came from. The phones themselves are around 1.5MB each and are rendered using our own custom engine in webGL. The java-script itself is only 40kb, and works on mobile as well. Thanks for taking a look, and I would love to hear any feedback or comments you have.
- noiv 9y ago
  Please include more older compacts for a full size range and permalinks to send around.
  - binkies3d 9y ago
    Permalinks is definitely something we want to add in the short run!
- rhokstar 9y ago
  I noticed the models are loading JSON. I'm guessing GLTF2.0?
  - binkies3d 9y ago
    We know about GLTF but are not (yet) using it in production. Main reason for this is that our scene description is a bit more complex that the GLTF format currently allows.
- mappu 9y ago
  I love the lighting effects. Is that a diffuser umbrella showing up in the reflection? Is it possible that the Hotspot version will ever contain a comprehensive catalog, or would that dig into sales of the main product? Could you add a back-catalog to Hotspot without impacting sales? Can you handle phones with moving parts? e.g. QWERTY sliders like the Xperia Mini Pro, or addons like "Moto Mods" or the Essential PH-1 360 Camera. Are you in discussion with any of these "websites that let you compare the specs of phones"? That sounds like a great match. 1.5MB sounds a bit large when most phones have quite simple geometry. Where does the file size come from?
  - binkies3d 9y ago
    That is indeed a diffuser umbrella :) If you count all color separably we currently have over 1500 phones in our catalog. We plan to add these to Hotspot and also make sure that new phones are available on the Hotspot website close after launch. We will probably announce new releases on our Facebook page. Moving parts is something we have experience with but have not included in the current version. 1.5MB might indeed sound a lot if you compare it to a single image. On the other hand if you look at a regular 360 viewer this takes often about 10MB of data. Also we want the phones to look really (really) good. This means that we need to put quite a lot of detail into things like corners and buttons.
- tinus_hn 9y ago
  Looks promising, this may be nice for cars.
bastijn 9y ago
I’m confused. I wanted to reply some people I know from college did the same and turned it into a company, Binkies3D [0]. Only to notice the user who shared the article after. This is the same thing? Judging by your Twitter it is. It’s been a while! Nice to see you finally managed to find the right market :). On-topic. Still awesome to flip around. I like how the compare mode is made to smartly position the two phones based on viewing angle so they align best for the comparison you likely want to make for that angle. [0] https://www.binkies3d.com/ https://www.binkies3d.com/
- binkies3d 9y ago
  We are the same company, although I started working here about 6 months ago. This is a brand new site we have just launched. The phones themselves, we did already have a few of them, but the P20 models just got announced by Huawei today. The core team is about 10 people, and we do projects like this every now and then. :)
mendeza 9y ago
I’m sooo impressed with the quality of the models! Have you considered showcasing using farious AR platforms, like ARKit or snapchat’s Lens studio? I am developing stuff on lens studio and I think it’s a great way to advertise!
- binkies3d 9y ago
  We would love to :)
pjmlp 9y ago
It looks very nice. Congratulations, one of the few times I see a worthwhile use of WebGL beyond games.
- binkies3d 9y ago
  Thank you for that very considerate compliment!
mikhuang 9y ago
Loading was really really slow for some reason. I'm in SF, could that have anything to do with it?
- brokenmachine 9y ago
  It's very quick on my phone in Australia, so it has to be your PC, lol!
brokenmachine 9y ago
Great stuff, looks great and works great on my phone too. Just needs more models in there...
- binkies3d 9y ago
  We will :) Please follow one of our social channels so we can keep you up-to-date.
pimlottc 9y ago
This is pretty cool! I would love it if you could create custom-sized objects by inputting basic dimensions (l x h x w). It's hard to grasp the size of e.g. different powerbanks just by reading the numbers.
- binkies3d 9y ago
  Have you tried comparing it to the credit card? The size of these kinds of cards are pretty standard internationally.
  - pimlottc 9y ago
    Sure, but that's not as helpful as if you could compare two powerbanks directly, or comparing it to your phone.
allanbreyes 9y ago
Nice touch, especially on two subtle items: 1. The centers of rotation aren't fixed, i.e. when you see the side profile, they're much closer together. I think this makes it easier to compare them side-by-side, especially when trying to compare thinness. 2. Rotation is restricted to only two axes (vs. all three). It's surprisingly difficult to control a 3-axis gimbal with only 2 axes on a screen. For those who aren't familiar with 3D CAD/modeling, try orienting this gimbal simulation [0] in an arbitrary angle (or doing a barrel roll). Restricting it to two axes also keeps the models from going into orientations that probably aren't very useful for the user. I don't know the first thing about "3D UX," but I thought they were good, albeit subtle, interface decisions. [0] http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAnglesViz/ http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAn...
- binkies3d 9y ago
  Thanks for the nice words: it is actually pretty tricky to get this right. What works on "paper" often feels very weird in reality. Restricting the navigation in this way allowed us to minimize the chance that you get lost in a weird pose and it also makes sure that the phones will always stay within a certain region of the screen.
confounded 9y ago
Why is this flagged?
- amingilani 9y ago
  My thoughts exactly, and what's even more confusing is that I can't vouch for it[1]. Almost as if [flagged] were part of the title. But it isn't, since when viewing it without logging in (through incognito) the [flagged] is a lighter color than the rest[2]. [1]: https://cl.ly/qTJu https://cl.ly/qTJu [2]: https://cl.ly/qTHm https://cl.ly/qTHm
  - grzm 9y ago
    The "vouch" link only appears for [dead] submissions and comments. If you believe a submission has been flagged in error, you can email the mods via the Contact link in the footer.
twhitbeck 9y ago
A nice-to-have option would be switching to isometric perspective.
- binkies3d 9y ago
  Can you explain what would offer this to you: we are happy to learn and take this into consideration!
MightySCollins 9y ago
This is done so well. I currently work at a phone comparison company and permalinks would allow us to tweet about the difference in sizes etc. Pictures just aren't as cool. Nice work

112 points by binkies3d 9y ago

Hi, I'm one of the team at Binkies3D over in Holland. We just launched Hotspot 3D today. I hope you enjoy it as much as we enjoyed making it. :) Whilst there are websites that let you compare the specs of phones, we wanted to compare the shape and size. There are currently 19 phones on Hotspot 3D, but we actually have the models for many more. We just chose the most popular ones for now. It's especially difficult to tell the difference between 'plus' models without a physical reference, so that is where this idea came from. The phones themselves are around 1.5MB each and are rendered using our own custom engine in webGL. The java-script itself is only 40kb, and works on mobile as well. Thanks for taking a look, and I would love to hear any feedback or comments you have.

noiv 9y ago
Please include more older compacts for a full size range and permalinks to send around.
- binkies3d 9y ago
  Permalinks is definitely something we want to add in the short run!
rhokstar 9y ago
I noticed the models are loading JSON. I'm guessing GLTF2.0?
- binkies3d 9y ago
  We know about GLTF but are not (yet) using it in production. Main reason for this is that our scene description is a bit more complex that the GLTF format currently allows.
mappu 9y ago
I love the lighting effects. Is that a diffuser umbrella showing up in the reflection? Is it possible that the Hotspot version will ever contain a comprehensive catalog, or would that dig into sales of the main product? Could you add a back-catalog to Hotspot without impacting sales? Can you handle phones with moving parts? e.g. QWERTY sliders like the Xperia Mini Pro, or addons like "Moto Mods" or the Essential PH-1 360 Camera. Are you in discussion with any of these "websites that let you compare the specs of phones"? That sounds like a great match. 1.5MB sounds a bit large when most phones have quite simple geometry. Where does the file size come from?
- binkies3d 9y ago
  That is indeed a diffuser umbrella :) If you count all color separably we currently have over 1500 phones in our catalog. We plan to add these to Hotspot and also make sure that new phones are available on the Hotspot website close after launch. We will probably announce new releases on our Facebook page. Moving parts is something we have experience with but have not included in the current version. 1.5MB might indeed sound a lot if you compare it to a single image. On the other hand if you look at a regular 360 viewer this takes often about 10MB of data. Also we want the phones to look really (really) good. This means that we need to put quite a lot of detail into things like corners and buttons.
tinus_hn 9y ago
Looks promising, this may be nice for cars.

bastijn 9y ago

I’m confused. I wanted to reply some people I know from college did the same and turned it into a company, Binkies3D [0]. Only to notice the user who shared the article after. This is the same thing? Judging by your Twitter it is. It’s been a while! Nice to see you finally managed to find the right market :). On-topic. Still awesome to flip around. I like how the compare mode is made to smartly position the two phones based on viewing angle so they align best for the comparison you likely want to make for that angle. [0] https://www.binkies3d.com/ https://www.binkies3d.com/

binkies3d 9y ago
We are the same company, although I started working here about 6 months ago. This is a brand new site we have just launched. The phones themselves, we did already have a few of them, but the P20 models just got announced by Huawei today. The core team is about 10 people, and we do projects like this every now and then. :)

mendeza 9y ago

I’m sooo impressed with the quality of the models! Have you considered showcasing using farious AR platforms, like ARKit or snapchat’s Lens studio? I am developing stuff on lens studio and I think it’s a great way to advertise!

binkies3d 9y ago
We would love to :)

pjmlp 9y ago

It looks very nice. Congratulations, one of the few times I see a worthwhile use of WebGL beyond games.

binkies3d 9y ago
Thank you for that very considerate compliment!

mikhuang 9y ago

Loading was really really slow for some reason. I'm in SF, could that have anything to do with it?

brokenmachine 9y ago
It's very quick on my phone in Australia, so it has to be your PC, lol!

brokenmachine 9y ago

Great stuff, looks great and works great on my phone too. Just needs more models in there...

binkies3d 9y ago
We will :) Please follow one of our social channels so we can keep you up-to-date.

pimlottc 9y ago

This is pretty cool! I would love it if you could create custom-sized objects by inputting basic dimensions (l x h x w). It's hard to grasp the size of e.g. different powerbanks just by reading the numbers.

binkies3d 9y ago
Have you tried comparing it to the credit card? The size of these kinds of cards are pretty standard internationally.
- pimlottc 9y ago
  Sure, but that's not as helpful as if you could compare two powerbanks directly, or comparing it to your phone.

allanbreyes 9y ago

Nice touch, especially on two subtle items: 1. The centers of rotation aren't fixed, i.e. when you see the side profile, they're much closer together. I think this makes it easier to compare them side-by-side, especially when trying to compare thinness. 2. Rotation is restricted to only two axes (vs. all three). It's surprisingly difficult to control a 3-axis gimbal with only 2 axes on a screen. For those who aren't familiar with 3D CAD/modeling, try orienting this gimbal simulation [0] in an arbitrary angle (or doing a barrel roll). Restricting it to two axes also keeps the models from going into orientations that probably aren't very useful for the user. I don't know the first thing about "3D UX," but I thought they were good, albeit subtle, interface decisions. [0] http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAnglesViz/ http://www.ctralie.com/Teaching/COMPSCI290/Materials/EulerAn...

binkies3d 9y ago
Thanks for the nice words: it is actually pretty tricky to get this right. What works on "paper" often feels very weird in reality. Restricting the navigation in this way allowed us to minimize the chance that you get lost in a weird pose and it also makes sure that the phones will always stay within a certain region of the screen.

confounded 9y ago

Why is this flagged?

amingilani 9y ago
My thoughts exactly, and what's even more confusing is that I can't vouch for it[1]. Almost as if [flagged] were part of the title. But it isn't, since when viewing it without logging in (through incognito) the [flagged] is a lighter color than the rest[2]. [1]: https://cl.ly/qTJu https://cl.ly/qTJu [2]: https://cl.ly/qTHm https://cl.ly/qTHm
- grzm 9y ago
  The "vouch" link only appears for [dead] submissions and comments. If you believe a submission has been flagged in error, you can email the mods via the Contact link in the footer.

twhitbeck 9y ago

A nice-to-have option would be switching to isometric perspective.

binkies3d 9y ago
Can you explain what would offer this to you: we are happy to learn and take this into consideration!

MightySCollins 9y ago

This is done so well. I currently work at a phone comparison company and permalinks would allow us to tweet about the difference in sizes etc. Pictures just aren't as cool. Nice work