Ar.js: Do a "hole in the wall" demo

[jeromeetienne]

we, @blq and i, already started and already got a swiming pool - source is currently in hole-in-the-wall.html

How could we improve it ? maybe more realism or more efficient.

[jeromeetienne]

Various ideas:

• animating the water and the ball
• put some shadow, maybe a palm tree to cast shadow.
• a sun with a lens flare ?

ok some may be costly from a webgl pov :) especially on phone

[jeromeetienne]

• fix UV in the pool texture

[blq]

Yeah, the UVs are just defaults now, not modeled. Either build the inside box manually (as you did in your tests once) ..or switch to a non-directional texture ;)
Seen many cool water shaders of course. Not my speciality but just some noise ripple with bump would probably look cool?

[blq]

Here Evan Wallace explains his epic water shader http://madebyevan.com/webgl-water/
https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c#.8qkxr24fp

[Utopiah]

Link and close?

[cwervo]

The link at the top is dead — could even a simple version of this be put back up? Seems like the sort of example that would really get people excited about marker-based AR, because you can do things with the marker!

[jeromeetienne]

@AndresCuervo you are going deep into github issues :) yeah code moves fast

i got them somewhere. there is quite a bit of mess in there. but i could drop it somewhere. please ping me if i forget. please please :)

[cwervo]

That I am @jeromeetienne — I'll bug you in a few days on Twitter if I don't see anything — would be cool to put it up on glitch.com so people can see the source more easily & play around with it!

[Wqrld]

have you already started bugging him? i just sent a tweet hoping he would have forgotten to upload it

[jeromeetienne]

https://github.com/jeromeetienne/AR.js/tree/dev/aframe/examples/demo-portal-door is the portal door. this is like the hole-inthewall but vertical :)

Take it while its hot. those kind of demo are moving fast as you can see

[cwervo]

Here's a link to the file from the 1.5.1 version, so it'll stick around for longer

And, here's a link to the file hosted on Rawgit's CDN :)

[Wqrld]

owh thanks

[deep42]

Links are broken again. Can please re-up hole-in-the-wall? Thanks

[edoardoo]

Yes please, the code of the example at the top would be incredibly useful.
Many thanks.

[stemkoski]

I dug through the git history for this repo to figure out how it was done: the basic idea is to create the inside box using a material that uses side:THREE.BackSide, and to create a second box (an "invisibility cloak") to hide the parts of the inside box not visible from the top (splice out the top side and use a material with colorWrite:false). There is a simplified example posted at https://stemkoski.github.io/AR-Examples/ .

[nicolocarpignoli]

update the readme with @stemkoski examples. they are very good and helpful. close as obsolete and not needed anymore