publiclab / infragram

A minimal core of the Infragram.org project in JavaScript
https://infragram.org/sandbox/
GNU General Public License v2.0
44 stars 166 forks source link

Prototype a split-screen "VR" variant for Google Cardboard (fun) #43

Open jywarren opened 5 years ago

jywarren commented 5 years ago

I've been wanting to run this in Google Cardboard, so you can view real-time as a kind of immersive experience. This would not be too complex, in theory; we could just put 2 canvases next to each other for a basic version.

image

I've attempted this very roughly in this PR: https://github.com/publiclab/infragram/pull/42 but we'll need to modify the code to recognize multiple canvas elements, and run all our setup code on both. I'll highlight where this may need to happen.

A later version might try to intercept the construction of the 3d environment in WebGL and mirror it -- this could be higher performance -- but it would be more complex as well. So let's do the easy version first.

We'll want it to look kind of like this in full-screen mode, although of course not of a virtual roller coaster 😄

image

jywarren commented 5 years ago

Probably we'd have to pass 2 elements to this segment, right at imgContext = createContext("raw", 1, 0, 1.0, "image");:

https://github.com/publiclab/infragram/blob/f6f7919493b5ab9e7cc8fc873f8bddf3ff5f4599/src/processors/webgl.js#L22-L28

jywarren commented 5 years ago

Notes on more complex ways to do this, which might be more optimized (for follow-up work):