Oni: WebGL is giving TypeError: Cannot read property 'canvas' of null

[matipan]

Oni Version: 0.3.4
Neovim Version (Linux only): 0.2.2
Operating System: Ubuntu 16.04 LTS

Describe your issue

When I add the configuration "editor.renderer": "webgl" and try to reload oni a red screen appears instead of the editor with a message TypeError: Cannot read property 'canvas' of null.
If I delete that property I can use oni with no issues whatsoever.

Expected behaviour

Be able to use onivim with the webgl renderer.

Actual behaviour

I'm seeing the following window:

Steps to reproduce

Add the "editor.renderer": "webgl" property to the config file and open oni.

Config file for reference

const activate = (oni) => {
  oni.input.bind("<f9>", "markdown.togglePreview")
}

module.exports = {
    activate,

    "oni.hideMenu": true,
    "oni.loadInitVim": "/home/matias.pan/.config/oni/init.vim",
    "oni.useDefaultConfig": false,

    "ui.colorscheme": "deep-space",
    "ui.fontFamily": "'SauceCodePro Nerd Font'",

    "editor.textMateHighlighting.enabled": false,
    "editor.typingPrediction": false,
    "editor.fontFamily": "SauceCodePro Nerd Font",
    "editor.fontSize": "12px",
    "editor.fontLigatures": false,
    "editor.renderer": "webgl",

    "language.go.languageServer.rootFiles": [".git"],
    "language.go.languageServer.command": "go-langserver",
    "language.go.languageServer.arguments": ["--freeosmemory", "false"],

    "tabs.mode": "buffers",
    "sidebar.default.open": false,
    "workspace.autoDetectWorkspace": "always",
    "autoClosingPairs.enabled": false,
    "commandline.mode": false,
    "wildmenu.mode": false,
    "learning.enabled": false,
    "achievements.enabled": false,
    "experimental.markdownPreview.enabled": true
}

[CrossR]

There was this PR : https://github.com/onivim/oni/pull/2198 that fixed something similar to this, which is in master, but not in the latest release.

So hopefully this is fixed in master!
I expect in the next week or so we will have a release as Neovim just released 0.3.0, so we will want to update the included binaries for Windows and Mac.

Otherwise, you could try and build from source, and there are some instructions about that in the Wiki.

Its probably worth leaving this open until its confirmed to be the same issue that was fixed in that PR though.

[matipan]

Awesome!! I'll try to build from source and see if that fixes it. Thank you!

[justinmk]

Unfortunately I'm still seeing this in 0.3.5 5a68ac0 .

bundle.js:1 NeovimInstance: Neovim started
bundle.js:1 [NeovimInstance::_checkAndFixIfBlocked] checking mode...
vendor.bundle.js:1035 TypeError: Cannot read property 'canvas' of null
    at ho._updateCanvasDimensions (vendor.bundle.js:1009)
    at ho.redrawAll (vendor.bundle.js:1009)
    at Pr._onResize (vendor.bundle.js:836)
    at Pr.componentDidMount (vendor.bundle.js:836)
    at commitLifeCycles (vendor.bundle.js:1035)
    at S (vendor.bundle.js:1035)
    at x (vendor.bundle.js:1035)
    at _ (vendor.bundle.js:1035)
    at y (vendor.bundle.js:1035)
    at g (vendor.bundle.js:1035)
_r @ vendor.bundle.js:1035
bundle.js:1 [NeovimInstance::_checkAndFixIfBlocked] Not blocking mode.
bundle.js:1 [NeovimInstance::_attachUI] Neovim version reported as 0.3.0
bundle.js:1 [NeovimInstance::_attachUI] Using startup options: {"rgb":true,"popupmenu_external":true,"ext_tabline":true,"ext_cmdline":false,"ext_wildmenu":false} and size: 0, 0
bundle.js:1 Attach success
bundle.js:1 NeovimInstance.Start.Attach: 25.96630859375ms
bundle.js:1 NeovimInstance.Start: 250.201171875ms
bundle.js:1 [NeovimEditor] Colors changed: onedark - background: #000000 foreground: #000000
bundle.js:1 [SharedNeovimInstance::start] Starting...
bundle.js:1 [NeovimProcessSpawner::startNeovim] Neovim process path: /Users/justin/opt/Oni.app/Contents/Resources/app/node_modules/oni-neovim-binaries/bin/nvim-osx64/bin/nvim
bundle.js:1 [NeovimProcessSpawner::startNeovim] Starting Neovim - process: 76218
bundle.js:1 Initializing neovim process using transport: stdio
bundle.js:1 NeovimInstance: Neovim started
bundle.js:1 [NeovimInstance::_checkAndFixIfBlocked] checking mode...
bundle.js:1 [NeovimTokenColorSynchronizer::synchronizeTokenColors] Setting 11 highlights
bundle.js:1 Received notification for - Unhandled Exception:TypeError: Cannot read property 'canvas' of null
Please report this error. Callstack: TypeError: Cannot read property 'canvas' of null
    at ho._updateCanvasDimensions (file:///Users/justin/opt/Oni.app/Contents/Resources/app/lib/browser/vendor.bundle.js:1009:24871)
    at ho.redrawAll (file:///Users/justin/opt/Oni.app/Contents/Resources/app/lib/browser/vendor.bundle.js:1009:24565)
    at mo._render (file:///Users/justin/opt/Oni.app/Contents/Resources/app/lib/browser/vendor.bundle.js:1009:47916)
    at _pendingAnimationFrame.window.requestAnimationFrame (file:///Users/justin/opt/Oni.app/Contents/Resources/app/lib/browser/vendor.bundle.js:1009:47786)
t.error @ bundle.js:1
vendor.bundle.js:1009 Uncaught TypeError: Cannot read property 'canvas' of null
    at ho._updateCanvasDimensions (vendor.bundle.js:1009)
    at ho.redrawAll (vendor.bundle.js:1009)
    at mo._render (vendor.bundle.js:1009)
    at _pendingAnimationFrame.window.requestAnimationFrame (vendor.bundle.js:1009)

(However, I secretly enjoy errors in Oni because have devtools for logging is just awesome.)

[CrossR]

I've managed to repro this now in my Arch VM, but am not too sure where I should really be starting.

As far as I can see, the start function is being called in WebGLRenderer but the getContext('webgl2') seems to just fail, since this._gl remains null even after the line has been executed.

Any ideas on where I should start looking @bryphe / @Cryza ?

[bryphe]

(However, I secretly enjoy errors in Oni because have devtools for logging is just awesome.)

@justinmk - it's nice for sure! The browser devtools keep improving, too.

@CrossR - thank you for the help debugging here! That's great you're able to reproduce it. 💯

FYI @Cryza had a few notes here: https://github.com/onivim/oni/pull/2198 - but it seems like in this case, it might be the device+Chrome isn't set up to support webgl2. Just curious - on that Arch VM, if you load Chrome, what does it show on the chrome://gpu page?

Actually - Electron has this API the getGPUFeatureStatus API - you can check in the console here:
require("electron").remote.app.getGPUFeatureStatus()

I wonder if it shows webgl2 as disabled? In the context of a VM, depending on how its set up, hardware acceleration might not be enabled.

Also, Chrome has a 'blacklist' of GPUs - there's a flag ignore-gpu-blacklist that suppresses this, although rendering might be buggy / unpredictable for unsupported GPUs. Just to test, we could add this as a parameter to the rendering process with something like this:
app.commandLine.appendSwitch('ignore-gpu-blacklist');

But in any case, I guess we'll have to handle the case where a user doesn't have hardware acceleration available - a couple options:
1) We could render an overlay for the WebGLRenderer in that case saying "Sorry, WebGL2 is not supported with this hardware). This would be annoying though.
2) We could switch back to the canvas strategy, but pop up an error notification saying WebGL2 not supported on this device; falling back to canvas renderer. Having a fallback scenario would be ideal - and especially important when we make the WebGL strategy the default.

Hope that helps give some ideas-

[justinmk]

require("electron").remote.app.getGPUFeatureStatus() shows webgl2: "unavailable_off" for me. This is a 2011 macbook pro.

[mrgaturus]

You can add an option that enables ignore-gpu-blacklist too and be disabled by default