Memory Exhausted

[rcoenen]

Update: This aplies to the demo at http://jamieowen.github.io/glsl-blend
demo-three.min.js:13 THREE.WebGLShader: Shader couldn't compile. demo-three.min.js:13 THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:343: '(' : memory exhausted THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:343: '(' : memory exhausted

my browser:

Google Chrome 52.0.2743.116 (Official Build) m (32-bit) Revision 9115ecad1cae66fd5fe52bd9120af643384fd6f3-refs/branch-heads/2743@{#728} OS Windows Blink 537.36 (@9115ecad1cae66fd5fe52bd9120af643384fd6f3) JavaScript V8 5.2.361.49 Flash 22.0.0.209 User Agent Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

[jamieowen]

Cheers man.

Haven't seen that before. What graphics card / machine are you using?

It's likely its an issue with declaring so many blend mode functions into one shader. This is what the glsl-blend/all module is doing.

I only created that file for the purposes of demoing all blend modes at once, personally i wouldn't use all of them and declare just the ones you need in production.

[rcoenen]

Not sure, I think my work desktop is a HP Z420 or Z440 with some NVida Quadro graphics card. Probably some sort of NVIDIA Quadro M2000 or whatever but definitely beefy enough for most common 3D stuff.

Do you have any other more simplified demo available perhaps?

UPDATE: I just checked the demo from home on my pretty old MacBook Pro (15-inch, Early 2011) / AMD Radeon HD 6750M 1024 MB and it works fine now. Did you make any modifications? Will check again Tuesday from my HP work station at work.

[jamieowen]

Ok just noticed your update..

Glad its working now - I didn't make any changes.
It may be a graphics card issue with your work machine.

[rcoenen]

Hi,

both would be great. An example of blending multiple layers together (more than just 2) would be great too.

What I am trying to do is establish a potential new design UX / embedded hardware UI design workflow.
I like to see if these blend-modes can be implemented in both WebGL and some custom HW.

If so, then I would then like to see how much difference in terms of colour and rendering effects we have between the original Adobe suite (Photoshop, After Effects, Flash, etc that typically hinge heavily on the use of layered blend-modes) designs and WebGL / hardware. We all know they will perform different, but the key question is how much, and will it be within acceptable levels from a UX design perspective.
For example could the WebGL version be used as a 'proofing' tool before building anything into actual games, etc.

If WebGL does give an accurate reflecting of the original designs then it would be a great prototyping tool to use and relatively quickly see our designs come to life and it would act as a fantastic, web-based, artifact to share with product managers, UI leads, etc instead of signing off un-validated designs going straight going to a dev backlog and keeping fingers crossed hoping for the best.

Many thanks,

Rob

[ripsonowy]

It doesn't work for me either, I've got:
demo-three.min.js:13 THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog invalid shaders ERROR: 0:343: '(' : memory exhausted
I'm using Chrome Version 52.0.2743.116 m. My card is NVIDIA Quadro 600, any idea what's wrong here?

Many thanks

[jamieowen]

@rcoenen If you need something quick to mock up a single blend mode test you could try using this module as a base :
https://github.com/mattdesl/glsl-blend-soft-light

Once you have a project setup with glslify and the glsl-blend package you could adjust this line to test a different mode :
https://github.com/mattdesl/glsl-blend-soft-light/blob/master/shaders/blend.frag#L9

// e.g.
#pragma glslify: noise = require(glsl-blend/hard-light)

This would ensure that you're not importing a mammoth shader into your project - just the code you need for that blend mode.

I don't have anything online for multiple layered blend modes. But you can achieve it by rendering the first layer to an FBO ( or Three.js RenderTarget ) and then passing that FBO as the base texture to the next rendered layer. I have done this before and it works well.

As for accuracy - I think you would get the same accuracy using webgl in terms of pixel output - it just depends if the calculations are exact to photoshop.

Also for testing accuracy - you could write a set of tests that use gl.readPixels to compare each pixel to png files that have previously been exported by photoshop..

I would be keen to know myself actually... and had planned to do it at some point!

[jamieowen]

@ripsonowy I haven't actually seen this error before.

As i mentioned, i think it is likely down to the number of functions that the all.glsl file is creating and may be specific to that graphics card.
I don't think you would get this if you included the individual functions themselves to limit either that massive if( mode ==X ) statement and/or unused blend mode functions.
https://github.com/jamieowen/glsl-blend/blob/master/all.glsl#L107

The other option would be to recompile the shader every time the blend mode changes and compile the shader function in at runtime.

One thing to try is also to remove three.js from the equation and use this other ( stackgl ) demo : https://github.com/jamieowen/glsl-blend/blob/master/demo/demo.js
( run using budo - https://github.com/mattdesl/budo )

[kfarr]

FWIW getting same error on nvidia 970 / AMD FX-8370:
demo-three.min.js:13 THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:343: '(' : memory exhausted

Chrome latest Version 58.0.3029.110 (64-bit) on Windows 10 (Pro insider preview)