Sky box - 2 krpanos?

  • Hi, I have a few projects in the making that require a skybox-sort of parallax effect.

    One example, is inside of a car. I have two pano images, one .png of the interior with the windows cut out, and one of the city streets that surrounds the car, which could be the skybox pano.

    The camera is the driver's seat.

    Normally in other 3D renderers, like three.js, I'd create two boxes with one inside the other, sky box much larger, and both rotate accordingly.

    I'm not how krpano could perform with multi panos, and I'm not sure of what if it is possible to simple add a parallax effect to a single pano file, or even if it's possible to add transparency to a pano.

    Thanks!
    -Joseph

  • I wrote a plugin to handle this and it is a very very cool effect!

    Plugin:
    https://github.com/BOXNYC/krpano-…kybox/skybox.js

    It basically embeds a pano underneath the pano, syncs the controls, and in replacing the top pano's image with a transparent PNG, you can see through it to the underlying skybox pano.

    Demo: (Works great in FireFox)
    http://coffee.sand.box.biz/cadillac/ads/skybox/

    Unfortunately I cannot get the PNG transparency on Safari/Chrome, so I'm assuming webkit!

    It renders the alpha channel to the canvas as black. It also has an 8-bit look to it so I'm wondering if somewhere embedpanoJS on webkit the context.getImageData or context.drawImage methods need a patch to allow 24-bit image drawing. Dunno?!

    The demo I made is proof that this is a really cool and doable plugin. Parallax is all the rage so please someone help me figure out this one issue, adn I'll continue developing this plugin for everyone to use.

    Thanks,
    -Joseph

  • does not work in FF,Seamonkey,chrome and even in IE

    Thanks, didn't test IE or Seamonkey, good to know its not just WebKit, I'm sure what ever path gets transparency working will fix all browsers. Strange you can't see it on FireFox, seems to be the only one that works for me.

    I just thought, chroma key / green screen could do the trick!

    Edited once, last by BOX (March 9, 2016 at 6:22 AM).

  • Very interesting project! Unfortunately it´s still not working (FF 44.0.2.). Keep it up *thumbup*

    Ahhh I see what's happened, hah. For some reason, my Firefox's Webgl was disabled, and my current skybox was only developed for canvas 2d which is the fallback. I have limited development experience on Webgl so it's holding me back a bit in developing a chroma key effect. Any Webgl gurus out here that can help?

    If anyone wants to play with the current demo, youll have to turn off your Webgl to view it with context 2d. It's worth the trouble as it really improves krpano giving it a lot more real depth.

  • Hi!
    i think you can make such effect in krpano, you should try, may it works
    how?
    main layer - is street pano
    car - is 6 cubesides png with transparent windows (no green, no color, cimple transparent) (btw - use TinyPNG for compress png's great tool! )
    so, put cubeside as hotspots to panorama, adn move them over main layer on viewchanged event

    Must works

    Regards
    Andrey

  • Years ago i made an example of a sailboat in the bath tub. Doing sort of the same.
    There i used the preview, on higher quality, as background and 6 cube faces with transparency as second pano , as 6 hotspots.
    I was also able to let the hotspots wobble in random over 3 axis. And there was also a layer between the 2 ( the bath duck).
    I would think this should also work for your idea.
    I'll have a look if i can make that work without flash. Should be not too problematic i think. We'll see.

    Tuur *thumbsup*

  • That was my original method, see my second post. As you can see in the screenshots (Firefox: 2d, chrome: webgl) that the transparent pngs rendered to canvas via 2d context, render the transparency, but webgl renders it as black.

    I'd LOVE it if we could use transparent png, but will only work when webgl is not used to render the canvases.

    The only way pngs will work is if I had access to the krpano html5 source code and wrote the webgl code to include the alpha Chanel in rendering the canvases. Other methods include the green screen method I'm currently working on or forcing 2d context somehow.

    Edited 2 times, last by BOX (March 13, 2016 at 8:39 PM).

  • Years ago i made an example of a sailboat in the bath tub. Doing sort of the same.
    There i used the preview, on higher quality, as background and 6 cube faces with transparency as second pano , as 6 hotspots.
    I was also able to let the hotspots wobble in random over 3 axis. And there was also a layer between the 2 ( the bath duck).
    I would think this should also work for your idea.
    I'll have a look if i can make that work without flash. Should be not too problematic i think. We'll see.

    Tuur *thumbsup*

    Sounds interesting, I wouldn't have the issues I'm having in flash as its not being rendered to canvas via webgl context. Plan on creating a flash plugin once I get HTML5 working.

  • I disabled webgl in FF44.0.2. but still can´t see the surrounding *sad*

    I tested again on FF 45 OSX, and when go to about:config and disable:
    webgl.disabled = true
    and restart my FF, it works fine. once I put it to false, I see the green windows.
    Also, make sure the webgl.force-enabled is false.

    You can be sure if it is working or not by looking at the Web Devleloper tools, and seeing how many canvases are created. Webgl only uses one, while a 2d canvas is created for each cube side when webgl is disabled.

    I sound crazy since I'm the only one on this thread that can see it work, haha

  • Since no one else is able to see this, I created some dynamic parameters to turn off and override some functions:

    To force 2d context (prototype.getContext override), use a transparent png for the pano image, and disable chroma key (green screen), go here:

    http://coffee.sand.box.biz/cadillac/ads/s…png&chromakey=0


    To force 2d context and use chroma key, go here:

    http://coffee.sand.box.biz/cadillac/ads/skybox/?context=2d


    As you will see, the chroma key method takes a few seconds to render, which means the transparent png method triumphs.

    Although webgl is much faster and smoother than 2d context, I'm contemplating if this first dev version of the skybox plugin should force 2d and create the a new branch 1.x with png transparency for webgl...

    The effect works pretty well in my opinion with forced 2d on transparent pngs. The only thing other than webgl and flash support is to limit vertical parallax in a little. In reality, turning ones head horizontally produces more parallaxing than looking up and down. I want to offset vertical movement with a damper variable.

    Now that y'all can see the effect, let me know your thoughts.

  • On the first link I have an error : ERROR: parsing parameters failed - TypeError: Error #1034
    On the second link I still get the green windows, nothing behind ?
    Firefox 42.0 Windows 10


    Strange, wonder if it's a Windows issue... Along with the error, does the pano and skybox still work on the first link?

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!