Three.js: VREffect - Custom blending is broken

[eddietree]

Description of the problem

Custom blending seems to be broken when VREffect is enabled.

I am testing simple custom MAX Blending material: Max(green, red) = yellow
(https://gist.github.com/eddietree/e815dfcb35fe2ecd43f61ff888871233)

This is what it should look like (not VR), yellow is correct
http://codepen.io/anon/pen/PGJmKo

However, if you have the same code with VR effect enabled, none of the custom blending works. The box appears red: http://imgur.com/a/hIVB2

Three.js version

THREE.WebGLRenderer 82dev

Browser

• [ ] All of them
• [X] Chrome
• [ ] Firefox

• [ ] Internet Explorer

  OS

• [ ] All of them

• [X] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS
  

  Hardware Requirements (graphics card, VR Device, ...)

[d3x0r]

I ran into the same issue... after finding your issue here I did some searching

http://stackoverflow.com/questions/31248397/three-js-combining-stereoeffect-with-fxaa-shaderpass/35120643#35120643
reveals that three.js added a 'webgl stereo camera'

https://github.com/mrdoob/three.js/pull/8042#issuecomment-177643736

https://threejs.org/examples/webgl_effects_stereo.html

Which is kinda what VREffect that I'm using from the webvr examples does...

it kinda looks like it should work....

maybe more hints...
https://www.reddit.com/r/threejs/comments/351pdu/composing_vreffect_with_effectcomposer/

[mrdoob]

I wonder if it's related to #9564?

[mkeblx]

I wonder if #9839 fixes, I think it likely would.

[mrdoob]

Only one way to find out!

[mrdoob]

Ok... Could anyone try with the latest version in dev?

[mkeblx]

Yep, checking on now with just getting rid of early return.

[eddietree]

so excited!!

[d3x0r]

I have a test.. (several tests)

https://www.d3x0r.org:444/javascript/Voxelarium.AS (browsable)
glow.renderer.js this is my scene composer glow shader, which works in webgl also....

http://www.d3x0r.org:24680/index2-vr.81.html - this does not work, the webpage loads current dev head from rawgit. (err maybe I loaded it too many times, now it refuses to laod; but it shows my custom renderer, upon entering VR all goemetry disappears.)

This one loads the last working 81, and it works until entering VR mode.
http://www.d3x0r.org:24680/index2-vr.html

http://www.d3x0r.org:24680/index2-webgl.html - my shader working in webgl renderer my last stable dev
http://www.d3x0r.org:24680/index2-webgl-basic.html - mesh basic material with simple texture instead using R79

http://www.d3x0r.org:24680/index2-webgl-basic.81.html - mesh basic material with simple texture instead - using latest dev branch - DOES NOT WORK
(this might be a different issue.... )

---

was trying to leave it kind of open so you could commit and retest yourself; but that failed.

but basically latest dev does break webgl basic shader....
and latest dev doesn't help glow shader show iin VR - but pre VR does work.

[mrdoob]

@mkeblx @eddietree any luck?

[d3x0r]

Maybe I should have said simply - "still fails:; instead of making an attempt to give you a way to test it. and in fact breaks stuff that used to work.

[mrdoob]

@d3x0r I don't have a VR device to test this with.

[d3x0r]

Okay; I'll work on simplifying... uhmm
if I fake it and use window.requestanimation frame, and don't post ... hmm I wonder what the enter VR button actually does... because if you had a android phone you could test it beause it would be cardboard mode.

[eddietree]

even without a VR device, running the test scene in Vanilla Chrome (not chromium) does not seem to have Custom Blending working when going thru the VREffect.

[mrdoob]

We just need a version of http://codepen.io/anon/pen/PGJmKo with the VR stuff.

[d3x0r]

https://drive.google.com/drive/u/0/folders/0BzudLt22BqGRYlNNUHNUcmZlWG8
chromium build with webvr. (recommend renaming the executable to ChromeVR.exe ; and I should tell you the flags for a local data directory to separate it from your native one)
Edit5 : oh Oops; need to go to chrome://flags and enable webvr and restart chromevr

how do I load more modules with codepen?

https://threejs.org/examples/js/WebVR.js
https://threejs.org/examples/js/effects/VREffect.js for instance

[d3x0r]

and should probably just like patch around new Error( 'No VR hardware found.' )

For now you can request an window.requestAnimationFrame just puts 60fps... I mean in the browser it still renders using webgl shouldn't be an absolute requirement to have hardware....

maybe also patch around submitFrame - which apparently is a glFlush and push to display hardware

---

(recovered content from a couple days ago)

Okay; I'll work on simplifying... uhmm
if I fake it and use window.requestanimation frame, and don't post ... hmm I wonder what the enter VR button actually does... because if you had a android phone you could test it beause it would be cardboard mode.

(If you could check the glow renderer, I don't think I over complicted it too much; )
I have in my three.js a ability to set uniform values on a geometry; but that doesn't really matter; just changes the depth glow rendering.

Also, I'm a noob at all of this (Not really but sorta) I would have expected that depth on a frame buffer would be like feature 1 to have been implemented; I see from the standards that's not really the case, and that a separate depth buffer that can go with a render buffer is fairly new.

This is what my glow renderer is trying to do - render the scene with only certain texture/shader parts enabled - anything that glows, with a depth. (because foreground textures can be transparent also...) so I need to know what glow parts are behind what other parts so I can do the alpha/clipping in the correct direction...

https://d3x0r.org:444/javascript/test3d/ this isn't it...
https://d3x0r.org:444/javascript/Voxelarium.2.stable/index.html one basic cube...
https://d3x0r.org:444/javascript/Voxelarium.2.stable/glow.renderer.js
(And then I broke stable... because I was in that directory copying out, and ended up copying in...)

[d3x0r]

http://codepen.io/anon/pen/Egdjop?editors=1111

commenting out line 31 works;
no errors in console....

although running it locally I get no blending and it's a red cube. (in chrome without VR support)

(part 1 would be, does it run through VREffect?)

[celestialphineas]

+1. I've met the same problem. It seems that the problem has not been fixed.

three.js: r92
Polyfill: v 0.10.5
WebVR UI: v 0.9.4

Chrome: 64.0.3282.140
Windows 10

[Mugen87]

Since VREffectis obsolete, I've tested this issue today with three.js R95. I was not able to reproduce the mentioned blending problem with Google Daydream. Here is the original test case adapted to the latest VR API of three.js.

https://jsfiddle.net/f2Lommf5/11267/