mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
102.8k stars 35.38k forks source link

VREffect - Custom blending is broken #9808

Closed eddietree closed 6 years ago

eddietree commented 8 years ago
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
d3x0r commented 8 years ago

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 commented 8 years ago

I wonder if it's related to #9564?

mkeblx commented 8 years ago

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

mrdoob commented 8 years ago

Only one way to find out!

mrdoob commented 8 years ago

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

mkeblx commented 8 years ago

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

eddietree commented 8 years ago

so excited!!

d3x0r commented 8 years ago

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 commented 8 years ago

@mkeblx @eddietree any luck?

d3x0r commented 8 years ago

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 commented 8 years ago

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

d3x0r commented 8 years 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.

eddietree commented 8 years ago

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 commented 8 years ago

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

d3x0r commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 6 years ago

+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 commented 6 years ago

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/