Sky box - 2 krpanos? - krpano Panorama Viewer

Anfänger

Mittwoch, 2. März 2016, 18:40

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

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

2

Dienstag, 8. März 2016, 16:48

Transparency in webkit

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

Plugin:
https://github.com/BOXNYC/krpano-plugins…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

»BOX« hat folgende Bilder angehängt:

Zum Seitenanfang

martyhr

Fortgeschrittener

Beiträge: 387

Wohnort: CZ

3

Dienstag, 8. März 2016, 17:09

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

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

4

Mittwoch, 9. März 2016, 05:28

Zitat von »martyhr«

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!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »BOX« (9. März 2016, 06:22)

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

5

Mittwoch, 9. März 2016, 10:37

Nice idea, but it doesn't work for on Firefox 42

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

6

Mittwoch, 9. März 2016, 22:36

Zitat von »jeromebg«

Nice idea, but it doesn't work for on Firefox 42

K, so I'm not using PNG anymore, and wrote a chroma key script to make green pixels transparent. Slow, but works. I havn't finished doing chroma key for webgl so it should be working on browsers using context 2d for rendering. Now check it out on FireFox: http://coffee.sand.box.biz/cadillac/ads/skybox/

Zum Seitenanfang

Nupsi

Profi

Beiträge: 697

7

Donnerstag, 10. März 2016, 07:50

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

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

8

Freitag, 11. März 2016, 05:21

Zitat von »Nupsi«

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

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.

Zum Seitenanfang

Nupsi

Profi

Beiträge: 697

9

Freitag, 11. März 2016, 09:30

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

Zum Seitenanfang

Sudarchikov Andrey

Profi

Beiträge: 1 082

Wohnort: Russia, Kaliningrad

10

Freitag, 11. März 2016, 10:12

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

VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

11

Freitag, 11. März 2016, 10:23

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*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

12

Sonntag, 13. März 2016, 02:12

Zitat von »Sudarchikov Andrey«

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

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.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »BOX« (13. März 2016, 20:39)

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

13

Sonntag, 13. März 2016, 02:33

Zitat von »Tuur«

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

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.

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

14

Sonntag, 13. März 2016, 02:50

Zitat von »Nupsi«

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

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

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

15

Sonntag, 13. März 2016, 22:33

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/…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.

Zum Seitenanfang

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

16

Montag, 14. März 2016, 01:03

Would this be feasible at all with high resolution imagery of the car interior?
Another issue for masking I I think I found is that the hotspots don't match the 360 for html5. I think there's some color profile issue.

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

17

Montag, 14. März 2016, 01:31

Now i see something!
Great effect indeed!

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

18

Montag, 14. März 2016, 09:30

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

Zum Seitenanfang

BOX

Anfänger

Beiträge: 37

19

Freitag, 18. März 2016, 21:20

Zitat von »jeromebg«

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?

Zum Seitenanfang

Nupsi

Profi

Beiträge: 697

20

Samstag, 19. März 2016, 09:30

The pano does work, but not the skybox in the first link.

@Tuur
Any idea why it´s working for you but not for us? I´m using Win7/64

Zum Seitenanfang

Sky box - 2 krpanos?

Transparency in webkit

Ähnliche Themen