September 17, 2008 at 13:55“Please do not trample on my site”
Almost two years ago, when I had not yet taught people how to make money on startups, how to make fast photo models, Google wasn’t such garbage yet, and web crowds didn’t win 2-0 from me, I created websites. And one of the clients asked me to do something that would make all ofigeli for his luxury furniture store. At first I got a completely ordinary design, which they did not accept, but the second idea blew everyone’s mind. For these two years, I saw only one site that was made using such technology, although it lies on the surface , and it was a Sony-level company (who exactly - forgot.)
Remember when I wrote in the article about the fast photo model yesterday that soon we will work in a voluminous world? Think I'm joking? Well, you got up a traveler - come in, take off your shoes, I’ll tell you the story of how the Network ceased to be flat two years ago ...
I really wanted the Web to break out of the flat space and how it could be done better, no matter how with an elite furniture store ? I designed its architecture (not in the IT sense, but in the building sense) - yes, the architect from me is not super, but not the essence ... And I invited them to go inside and walk around. Without plugins, except for Flash, using technologies of many years ago.
Now I invite you, the traveler, to the world of fairy tales and an incredible prototype. Click the picture , and then come back, if you don’t guess yourself, read how it is done. Did you find the flying price tag on TV? Could you look at the store from the second point?
Okay, so this was a site prototype. The client was very impressed, as well as everyone to whom I showed it in January '07. Unfortunately, the client refused in favor of a simpler design, because this one is too difficult to update and decided to make another site later on this design. But technology went the way of the eternal light bulb and was lost in the basements. Enough time has passed and I decided to give it to Public Domain, use it.
So, we are talking about the fact that you can use panoramas to simulate 3d space and this is VERY simple, as I will show below.
Immediately make a reservation that this was the easiest way AT that moment, something could change during this time and an even simpler one appeared.
1. Either a 3d model of the building where we will be walking (I made it in SketchUp, then I threw Evermotion models of trees and furniture - they sell almost this furniture),
Or we can use real panoramas of a real store or shopping center. 360x180 panoramas. Autodesk [RealViz] Stitcher I can recommend.
2. Player for panoramas. I considered a lot of options, including and all 3d frameworks, but it’s not easy to upload a panorama to them. Then I bought a player from FlashPanoramas.com(40 euros, ours, Russians, I have nothing to do with them, except that I bought a player). Find a simple free alternative - write in the comments. By the way, the site is in English, if that - contact the author of flashpanoramas@gmail.com, it seems that his name is Denis Chumakov, in any case they send it in the invoice for payment.
IMPORTANT . This part implies that you already know how to model and work with 3d-max programs or you have a modeler. If not, you will have to wait for my other article, where I will talk about Google Sketchup and probably Alternativa Platform .
So, I went through SketchUp → 3DSMax + VRay → speherical panoramic .jpg, but there are many options.
1. Render either through the standard Max render of panoramas, Google suggests that it Utilities panel> Utilities rollout> More button> Utilities dialog> Panorama Exporter , or if in VRay , then set Sperical for the physical camera.
The output file should be ratio = 0.5, I did 3000 x 1500 and then the pixels are visible well. Although, if I had not been lazy and played with Vray for longer (well, I’m not a modeler, and not a designer, I’m a programmer), it would have worked better. But here we are discussing the idea - I hope sincerely that you will do better.
What is important - make the ceiling and floor MONOTON ! Look at the first point and the second in the site. The difference between JPG 500kb, you know why? In one on the floor "type-carpet", in the other it is monotonous. Remember that the output will be a giant file of at least 3,000 in width, which will have to be loaded via the Web. I understand that you, fellow designers, are more interested in a high-quality picture, but think about users not in Moscow who have your mega .JPG loaded for a minute. They will not see all this beauty.
So,at the output , we have a 3000 by 1500 file (or proportional) of a panoramic view - it should look like the picture at the beginning of this section - straight lines should become arcs - spherical projection.
UPDATE I forgot, for semi-beginners: in order to cram so many trees - you need to use VRay Proxy, if you suddenly did not know. Just make sure that the materials are not lost, if you just make proxies from the VRay group of objects, the materials disappear, so the trees and TVs are concrete :) to avoid this, you need to do proxies somehow cleverly - maybe the pros will tell you in the comments - I'll add it.
As I said, I used Flash Panorama Player. Others can also be used, but they will have to be programmed with Flash, while here it’s one view (the point where the user can get up - hereinafter I will call it POV = point-of-view) = ninety lines of XML, without Flash programming in general, and modeling the sphere and twisting its normals.
I urge you to support the author who wrote such a wonderful plugin [no relation to it] - 40 euros - not so much, especially if you take $ 50K from such a client :)
I use a licensed one. So I tell you for this player.
1. Create an .html file for each POV.
Take the sample at seelf.com/b/index.html.txt - you only need to change ittest.swf in two places - what is the desired .swf in the manual in the distribution you are buying.
2. For each filename .swf we create exactly the same filename .xml - all the magic happens there.
Samples should be taken at seelf.com/b/test.xml.txt , seelf.com/b/test2.xml.txt . I will analyze the first file - there is more interesting.
So first, connect the modules:
Next in the hotspots section, we define the global section - these are all kinds of events (onStart) and functions (onOver, loadPreview, goUp, pt, etc. .) - there is a very simple language, you will understand everything yourself.
Remember when I wrote in the article about the fast photo model yesterday that soon we will work in a voluminous world? Think I'm joking? Well, you got up a traveler - come in, take off your shoes, I’ll tell you the story of how the Network ceased to be flat two years ago ...
I really wanted the Web to break out of the flat space and how it could be done better, no matter how with an elite furniture store ? I designed its architecture (not in the IT sense, but in the building sense) - yes, the architect from me is not super, but not the essence ... And I invited them to go inside and walk around. Without plugins, except for Flash, using technologies of many years ago.
Now I invite you, the traveler, to the world of fairy tales and an incredible prototype. Click the picture , and then come back, if you don’t guess yourself, read how it is done. Did you find the flying price tag on TV? Could you look at the store from the second point?
Okay, so this was a site prototype. The client was very impressed, as well as everyone to whom I showed it in January '07. Unfortunately, the client refused in favor of a simpler design, because this one is too difficult to update and decided to make another site later on this design. But technology went the way of the eternal light bulb and was lost in the basements. Enough time has passed and I decided to give it to Public Domain, use it.
So, we are talking about the fact that you can use panoramas to simulate 3d space and this is VERY simple, as I will show below.
Immediately make a reservation that this was the easiest way AT that moment, something could change during this time and an even simpler one appeared.
What do we need
1. Either a 3d model of the building where we will be walking (I made it in SketchUp, then I threw Evermotion models of trees and furniture - they sell almost this furniture),
Or we can use real panoramas of a real store or shopping center. 360x180 panoramas. Autodesk [RealViz] Stitcher I can recommend.
2. Player for panoramas. I considered a lot of options, including and all 3d frameworks, but it’s not easy to upload a panorama to them. Then I bought a player from FlashPanoramas.com(40 euros, ours, Russians, I have nothing to do with them, except that I bought a player). Find a simple free alternative - write in the comments. By the way, the site is in English, if that - contact the author of flashpanoramas@gmail.com, it seems that his name is Denis Chumakov, in any case they send it in the invoice for payment.
Part 1. Render and pitfalls.
IMPORTANT . This part implies that you already know how to model and work with 3d-max programs or you have a modeler. If not, you will have to wait for my other article, where I will talk about Google Sketchup and probably Alternativa Platform .
So, I went through SketchUp → 3DSMax + VRay → speherical panoramic .jpg, but there are many options.
1. Render either through the standard Max render of panoramas, Google suggests that it Utilities panel> Utilities rollout> More button> Utilities dialog> Panorama Exporter , or if in VRay , then set Sperical for the physical camera.
The output file should be ratio = 0.5, I did 3000 x 1500 and then the pixels are visible well. Although, if I had not been lazy and played with Vray for longer (well, I’m not a modeler, and not a designer, I’m a programmer), it would have worked better. But here we are discussing the idea - I hope sincerely that you will do better.
What is important - make the ceiling and floor MONOTON ! Look at the first point and the second in the site. The difference between JPG 500kb, you know why? In one on the floor "type-carpet", in the other it is monotonous. Remember that the output will be a giant file of at least 3,000 in width, which will have to be loaded via the Web. I understand that you, fellow designers, are more interested in a high-quality picture, but think about users not in Moscow who have your mega .JPG loaded for a minute. They will not see all this beauty.
So,at the output , we have a 3000 by 1500 file (or proportional) of a panoramic view - it should look like the picture at the beginning of this section - straight lines should become arcs - spherical projection.
UPDATE I forgot, for semi-beginners: in order to cram so many trees - you need to use VRay Proxy, if you suddenly did not know. Just make sure that the materials are not lost, if you just make proxies from the VRay group of objects, the materials disappear, so the trees and TVs are concrete :) to avoid this, you need to do proxies somehow cleverly - maybe the pros will tell you in the comments - I'll add it.
Part 2. Panoramic player and examples for copy paste.
As I said, I used Flash Panorama Player. Others can also be used, but they will have to be programmed with Flash, while here it’s one view (the point where the user can get up - hereinafter I will call it POV = point-of-view) = ninety lines of XML, without Flash programming in general, and modeling the sphere and twisting its normals.
I urge you to support the author who wrote such a wonderful plugin [no relation to it] - 40 euros - not so much, especially if you take $ 50K from such a client :)
I use a licensed one. So I tell you for this player.
1. Create an .html file for each POV.
Take the sample at seelf.com/b/index.html.txt - you only need to change ittest.swf in two places - what is the desired .swf in the manual in the distribution you are buying.
2. For each filename .swf we create exactly the same filename .xml - all the magic happens there.
Samples should be taken at seelf.com/b/test.xml.txt , seelf.com/b/test2.xml.txt . I will analyze the first file - there is more interesting.
So first, connect the modules:
layer_2 = hotspots.swf- all that is pressed
layer_3 = limits.swf- restrictions on movement, if the panorama is less than 360x180 (I forgot why I connected it)
layer_5 = cylConverter.swf- for spherical or cylindrical panoramas (box also knows how, but the plugin is no longer needed)
editor.swf- A plugin for visual editing of panoramas, so as not to guess where to put hotspot (this is not hard to get), is in the purchased distribution kit. From the site, of course, deleted.
panoType = cylinder- spherical (or cylindrical panorama)
panoName = test- as it is called .jpg'a = test .jpg → seelf.com/b/test.jpg
Next in the hotspots section, we define the global section - these are all kinds of events (onStart) and functions (onOver, loadPreview, goUp, pt, etc. .) - there is a very simple language, you will understand everything yourself.
- a sample of the applied layer - this is my hat, phones, all sorts. - sample transition to a new point. - An example of how the price tag jumps on the TV behind you on the first POV.
Since you can even add .swf words, there was an idea to even make an order basket - just transfer the purchase to it - I did not think about it in detail, but it is probably possible.- activation of the plugin for a spherical panorama.
The player itself can still embed YouTube video, audio, for example, in a panorama, you can also load them without reloading the page and many more goodies. Everything is in the manual.
Then we upload it all to the site, show it to the client who is dead and finish it off with an account.
By the way, there was still an idea to add moving people (or rather, standing still, projected gifs with micromotion - this is possible), but this will already introduce you to smash your mind how.
Good luck, traveler :)
Yoi Haji,
view from Habr
