[Plugin] WebGL Cubic Panorama (update 2016-05-06)

rami_lpm

Warning
This plugin is not working correctly in sketchup 2017. As a workaround, you can set resolution to 1020,2040 or 4080

WebGL Cubic Panorama

This plugin generates a 360 degrees panorama using the Three.js library.
It is useful when showcasing interiors on the web.

To see your panorama, go to the output folder and open the html file with a modern browser.

Usage

Plugins > Panorama > Make Panorama
This generates the panorama files.
After the plugin is done, you can go to the output folder and open the html document. It requires a modern browser. (not IE < 11)
Click and drag to look around.

Plugins > Panorama > Scenes to Panorama
This generates a panorama for every scene( provided that 'include in animation' is ticked) and adds navigation links.

Plugins > Panorama > Save current camera scenes
Saves six scenes that the plugin would use as textures for the cubic panorama. I haven't found a way to undo adding scenes to the model, so be careful and save before using this command.

Plugins > Panorama > Change Output Folder
Changes output folder and resets the file numbers.

Plugins > Panorama > Embed output in html
Makes all scripts inline, encodes images in base64 and embeds them in html.
Use this option to embed images in a previously generated panorama.

Plugins > Panorama > Options
Plugin configuration

Title: the title shown in the panorama html document.
Renderer: Canvas is more compatible, WebGL is faster. Despite this configuration you can still choose the renderer interactively. yourfile.html?canv is canvas & yourfile.html?webgl is, well, WebGL.
If you want to test the software renderer, you can get it here. Use yourfile.html?soft. (you must uncomment line 16 in template2.html for this to work)

Ask for a new folder: requests a new folder with every panorama.
FOV: the field of view for the panorama.
Output Folder: the output folder for the panorama.
Jpg Compression: the level of compression for the six jpg textures.
Write images: if set to no, then no images are written. Useful when you make changes to the template and you want to regenerate the html and js files only.
Embed images: if set to yes, all the output is embedded in the html file (except the three.js library which is accessed from the internet).

Changelog
v0.33
added option to embed images and scripts in html
v0.32
changed the tags in html template so it's easier to customize.
panorama now has zoom
v0.31
added support for SU8
v0.3
added option to save your scenes for easier rendering
v0.2
added support for multiple scenes
added toolbar
split the template html, css and js. otherwise, modifying several panoramas became tedious.
v0.1
first version

Please comment with any suggestions.

Download

WebGL Cubic Panorama.

cotty

Great plugin!
Tried with Firefox without any problems.

srx

Thank you. This is very useful. Is it possible to replace SU images with rendered one?

rami_lpm

I'm glad you like it.
Yes, I imagine it can be done, but I have no renderer at the moment, so I can't test it.
Which one do you use?
You could set the camera manually (aspect ratio 1:1, Fov 90 ) and then replace the images that the plugin writes.
I'm thinking that if the renderer has some kind of global illumination that is camera dependent, then the seams of the cube might be visible.

srx

I tried it. It works great! For render I use Thea 4 SU, but I don't think it is important.. If only you could add option for making 6 SU scenes based on the output pano01, pano02...so we can render them and replace SU output. This would be so much useful! Thanks again.

cotty

@srx said:

If only you could add option for making 6 SU scenes based on the output pano01, pano02...so we can render them and replace SU output.

Like this one?
http://www.smustard.com/script/CubicPanoOut
or this?
http://sketchucation.com/pluginstore?pln=RND_PanoScene_v1.0.0

srx

@cotty said:

@srx said:

If only you could add option for making 6 SU scenes based on the output pano01, pano02...so we can render them and replace SU output.

Like this one?
http://www.smustard.com/script/CubicPanoOut
or this?
http://sketchucation.com/pluginstore?pln=RND_PanoScene_v1.0.0

O know, I know, but...

This plugin has webGL output!
I don't know if the others would match.
All in one pack is the best.

srx

I tried to create scenes with CubicPanoOut plugin, renamed and replaced images in html folder, and they don't match. Would be great to have this option. The easy way of making rendered WEB panoramas.

cotty

@srx said:

I tried to create scenes with CubicPanoOut plugin, renamed and replaced images in html folder, and they don't match. Would be great to have this option. The easy way of making rendered WEB panoramas.

This should work (did you turn on shadows?), I've tried this workflow long time ago with Indigo: http://www.indigorenderer.com/forum/viewtopic.php?f=19%26amp;t=10942

rami_lpm

I added the menu entry. It saves the scenes and shows in the console each scene's filename.
I haven't found a way to allow undoing, so be careful.

rami_lpm

Adding the option to make the scenes shouldn't be such a problem. I'll get on it.
I wasn't aware of Renderiza PanoScene.
It's strange that the output from cubicpanoout doesn't work with my html. Its basically the same concept and output.
(edit: on second thought no, it is not. I had to change the scenes order and rotation to make work easier with WebGL )

srx

It works! I checked with Thea render. All I had to do was to adjust the resolution to 2048x2048. Making WEB panorama in a few minutes (+ rendering time). Thank you for making this possible.

rami_lpm

Good. I'll get a renderer and take a look.

srx

Here is my try.
6 preview images rendered in Thea4SU, Presto engine, 1 minute each, 6 minutes all.
All in all from model to web panorama in 10 minutes!

I made a mistake of adding vignetting which is seen in panorama...Other then that very good result.

http://www.saurus.rs/panoramas/pano0.html

Thanks again.

gashtan

I have som problem with this plugin...need I install Three.js too? If I install plugin, ruby window write me an error

Error Loading File RamTools_Panorama.rb
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; odd number list for Hash
						@options = { title; "RamTools Panorama Output", r...
						                   ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ';', expecting '}'
						@options = { title; "RamTools Panorama Output", r...
						                   ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
...e; "RamTools Panorama Output", renderer; "Canvas", askFolder...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
...a Output", renderer; "Canvas", askFolder; "No", fov; "55", p...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
...er; "Canvas", askFolder; "No", fov; "55", path; "Ask", compV...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
...", askFolder; "No", fov; "55", path; "Ask", compVal; "0.6", ...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
... "No", fov; "55", path; "Ask", compVal; "0.6", isDebug; fals...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
..., path; "Ask", compVal; "0.6", isDebug; false, tTag; true, i...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; Can't assign to false
...ompVal; "0.6", isDebug; false, tTag; true, imgRes; "2048", o...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ';', expecting '='
...; "0.6", isDebug; false, tTag; true, imgRes; "2048", ownTemp...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; Can't assign to true
...", isDebug; false, tTag; true, imgRes; "2048", ownTemplate; ...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ';', expecting '='
...ug; false, tTag; true, imgRes; "2048", ownTemplate; false, i...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
...e, tTag; true, imgRes; "2048", ownTemplate; false, invContro...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; Can't assign to false
...s; "2048", ownTemplate; false, invControls; "No", fnHtml; "t...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ';', expecting '='
...nTemplate; false, invControls; "No", fnHtml; "template2.html...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
...ate; false, invControls; "No", fnHtml; "template2.html", fnC...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ',', expecting kEND
...No", fnHtml; "template2.html", fnCss;"template2.css", fnJs; ...
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected ';', expecting kEND
..., fnCss;"template2.css", fnJs; "template2.js" }
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;137; syntax error, unexpected '}', expecting kEND
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;423; syntax error, unexpected ',', expecting '='
...name="pano", html_template_fn,css_filename, js_template_fn)
                              ^
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;423; syntax error, unexpected ')', expecting '='
C;/Program Files (x86)/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb;703; syntax error, unexpected $end, expecting kEND
file_loaded( __FILE__ )
                       ^

Is it compatibile with SU8 anyway? Thanks for your answer.

rami_lpm

@gashtan said:

Is it compatibile with SU8 anyway?

I think not, sorry. They changed the ruby version for sketchup 2014. I think it has to do with that. I'll see if I can fix it.

driven

hi,

very interesting...

I thought maybe you could ask to change perspective...

      #test perspective, if parallel, ask to change now, or return
      if !cam.perspective? then
       result = UI.messagebox('Camera must be perspective, not parallel, change now?', MB_YESNO)
         if result == IDYES
           cam.perspective = true
         else
          return
         end
      end

I'll have a closer look if i get a chance...

john

rami_lpm

@driven said:

I thought maybe you could ask to change perspective...

I'm not sure. Most panoramas require a carefully placed camera.
If I switch automatically from a parallel camera, I don't know if the panorama will be useful. Remember that writing the images can take several minutes.
Thanks for the advice anyway.

T774AM12RUS

Hello
I have an error window on start:

Error Loading File RamTools_Panorama.rb
C:/Program Files/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb:424: syntax error, unexpected ',', expecting '='
...name="pano", html_template_fn,css_filename, js_template_fn)
^
C:/Program Files/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb:424: syntax error, unexpected ')', expecting '='
C:/Program Files/Google/Google SketchUp 8/Plugins/RamTools_Panorama.rb:703: syntax error, unexpected kEND, expecting $end
end #module pano
^

rami_lpm

Yes, that's because v0.3 didn't support SU8. The newest version(0.31) should work fine.