Three examples not working

[eard7]

Hello Raub! First of all, thanks for your work, I've been using your package since v1 and its been very helpful. But now I was testing the recent version in order to upgrade my project, but noticed that there might be an issue with the latest threejs port. Not sure. if its an OS specific issue but all my colleagues using OSX have been experiencing the same issue. Basically we can't get any threejs example to run, only an empty window and I can see some messages in the console

WARNING: 0:2: extension 'GL_OES_standard_derivatives' is not supported
ERROR: 0:134: 'highp' : Reserved word.1: #version 120
--------------------------------------------------------------------------------------------
THREE.WebGLProgram: shader error:  1282 35715 false gl.getProgramInfoLog ERROR: One or more attached shaders not successfully compiled THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:75: 'highp' : Reserved word.1: #version 120
--------------------------------------------------------------------------------------------
THREE.WebGLProgram: shader error:  1282 35715 false gl.getProgramInfoLog ERROR: One or more attached shaders not successfully compiled  THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:123: 'highp' : Reserved word.1: #version 120

Not sure if this could be related to the example code or maybe the threejs build might have some issues, which would mean that this issue should be added on that repo instead?

Hope you can take a look into this

Thanks and keep up the good work!

[raub]

Hello. There is likely an issue with three.js compatibility after update. Consider using some of the previous versions of the package that work. I will take a look.

[raub]

I fresh-cloned the repo, and examples/tris works (picked randomly). With Node 12.13.0, Windows. So this issue probably only happens on OSX.

There is one thing to try, but I don't have an OSX machine, so it would be great if you could do it:

1. There is a recently added OSX-only parameter osxCore https://github.com/node-3d/glfw-raub#class-window
2. We need to change the default osxCore = false to true at core3d init time
3. It is not possible with the current init options
4. So instead, try adding it right here: https://github.com/node-3d/3d-core-raub/blob/master/js/index.js#L63 osxCore: true on your installation.

I'll patch the node3d init to have this parameter available, regardless of it being helpful in this particular situation. Also there is an upcoming threejs release where I can finally get rid of the fork.

[tylers-username]

Seeing this as well on OSX. Can you provide a code example of how this might be resolved?

[raub]

Have you tried the solution proposed above?

[raub]

Ok, that alone won't help. I've debugged the issue with my friend who has a mac. We were able to run the example "crate" with the following edits:

• forced GL 2.1 on OSX

// glfw-raub/js/window.js ~45
glfw.windowHint(glfw.CONTEXT_VERSION_MAJOR, 2);
glfw.windowHint(glfw.CONTEXT_VERSION_MINOR, 1);

• removed "highp" from shader sources

// webgl-raub/js/webgl.js ~228
.replace(
    /\bhighp\s+/g, ''
)

It only works if both changes are applied. And there is some window resizing issue that should also be debugged:

$ node examples/three/crate.js 
Assertion failed: (width >= 0), function glfwSetWindowSize, file /Users/travis/build/node-3d/deps-opengl-raub/src/glfw-3.3/src/window.c, line 557.
Abort trap: 6

I currently have no idea why that one happens on resize. https://github.com/glfw/glfw/blob/master/src/window.c#L569

[eard7]

Thanks for the reply @raub, I've tried the solution you provided above, in my case I'm getting this error

GLFW Error 65540: Context profiles are only defined for OpenGL version 3.2 and above
GLFW Error 65540: Context profiles are only defined for OpenGL version 3.2 and above
/Users/elmer/Repos/misc/3d-core-raub/node_modules/glfw-raub/js/window.js:513
            this._window = glfw.createWindow(
                                ^

Error: Can't create GLFW window
    at Document._create (/Users/elmer/Repos/misc/3d-core-raub/node_modules/glfw-raub/js/window.js:513:24)
    at Document.set mode [as mode] (/Users/elmer/Repos/misc/3d-core-raub/node_modules/glfw-raub/js/window.js:220:9)

Btw, we were able to use the package threejs-raub@0.115.0 with 3d-core-raub@2.1.2, so yeah I think the problem could be an incompatibility with OS X and the recent glfw

[raub]

GLFW Error 65540: Context profiles are only defined for OpenGL version 3.2 and above

This means on your system there is no 2.1 context available. The problem with 3.2 is the compatibility with GLES features: GLSL 120 and 100 not supported on 3.2.

But there is another way around it, which I didn't try yesterday: OpenGL 4.1 + GL_ARB_ES2_compatibility as explained here.

I still wonder how 3d-core-raub@2.1.2 works for you, since there is not much of a difference. Could you also try a newer threejs version? I guess any version of threejs would work then (because they have similar shader code).

[eard7]

@raub actually I was able to figure out how to make it running, looks like we needed to comment the two lines below on the window.js file

                        glfw.windowHint(glfw.CONTEXT_VERSION_MAJOR, 2);
                        glfw.windowHint(glfw.CONTEXT_VERSION_MINOR, 1);
//                      glfw.windowHint(glfw.OPENGL_FORWARD_COMPAT, glfw.TRUE);
//                      glfw.windowHint(glfw.OPENGL_PROFILE, glfw.OPENGL_CORE_PROFILE);

After that I was able to get the crate example running, but like you said, when resizing the window I'm getting this error

Assertion failed: (width >= 0), function glfwSetWindowSize, file /Users/travis/build/node-3d/deps-opengl-raub/src/glfw-3.3/src/window.c, line 557.
[1]    64430 abort      node examples/three/crate.js

[raub]

Ah yes, I actually meant it, you should only leave 2.1 without compat and core, I just didn't state it clearly enough. I will still try using the 4.1 one, and then debug resize. I guess the resize might have to do with retina pixel ratio or something mac-specific.

[raub]

Well ok, 4.1 option didn't work for me, so I think we should stick to the 2.1 one.

Regarding the resize issue, I confirm that is to do with pixel ratio. The situation works as follows: resize-event -> renderer.setSize -> resize-canvas -> resize-event. On pixel ratio 1, this loop breaks, because we get to an equal size and no further events fire.

With pixel ratio > 1, there is an infinite (but short) loop with ever growing sizes, because renderer.setSize does multiply the size by ratio:

_canvas.width = Math.floor( width * pixelRatio );

The problem is canvas === document === window in node-3d. So (in a browser) threejs expects to get the size from window, then multiply and pass it to canvas... My first guess is to add setters on the Document class, that would divide the sizes back by the ratio value. But I wasn't able to investigate it further for now.

[tylers-username]

@raub - wish I could be more helpful, I'm new to WebGL but your comment https://github.com/node-3d/3d-core-raub/issues/8#issuecomment-676685402 fixed the issue for me.

If you need a Mac troubleshooter, let me know!

[raub]

@tylerssn @eard7 please try 3d-core-raub@3.5.0 to see if the issues above resolved

[eard7]

Hello @raub ! Just tested it and is working as expected! Really appreciated, thank you!