How to use the xterm-addon-webgl.WebglAddon function in xterm-addon-webgl

console.warn('WebGL2 is not supported on your machine. Falling back to canvas-based rendering.');
        } else {
          // Experimental WebGL renderer needs some more glue-code to make it work on Hyper.
          // If you're working on enabling back WebGL, you will also need to look into `xterm-addon-ligatures` support for that renderer.
          // useWebGL = true;
        }
      }
      Term.reportRenderer(props.uid, useWebGL ? 'WebGL' : 'Canvas');

      this.term.attachCustomKeyEventHandler(this.keyboardHandler);
      this.term.loadAddon(this.fitAddon);
      this.term.loadAddon(this.searchAddon);
      this.term.loadAddon(new WebLinksAddon());
      this.term.open(this.termRef);
      if (useWebGL) {
        this.term.loadAddon(new WebglAddon());
      }
      if (props.disableLigatures !== true) {
        this.term.loadAddon(new LigaturesAddon());
      }
    } else {
      // get the cached plugins
      this.fitAddon = props.fitAddon;
      this.searchAddon = props.searchAddon;
    }

    this.fitAddon.fit();

    if (this.props.isTermActive) {
      this.term.focus();
    }

let rect = this.getBoundingClientRect()
    if (rect.width == 0 || rect.height == 0) {
      return
    }

    this.subs = new CompositeDisposable

    this.initialized = true

    this.model = model
    this.resizer = new ResizeDetector()

    this.model.terminal.open(this)

    if (this.model.isWebgl) {
      this.model.terminal.loadAddon(new WebglAddon())
    }

    this.subs.add(atom.config.observe('editor.fontSize', (val) => {
        this.model.terminal.setOption('fontSize', val)
    }))

    this.subs.add(atom.config.observe('editor.fontFamily', (val) => {
        // default fonts as of Atom 1.26
        val = val ? val : 'Menlo, Consolas, "DejaVu Sans Mono", monospace'
        this.model.terminal.setOption('fontFamily', val)
    }))

    this.subs.add(atom.themes.onDidChangeActiveThemes(() => {
      setTimeout(() => this.themeTerminal(), 0)
    }))

function createTerminal(terminalContainer, {env, cwd, command, autoRestart, socket, fontFamily}) {
    const fitAddon = new FitAddon();
    const webglAddon = new WebglAddon();
    const terminal = new Terminal({
        scrollback: 1000,
        tabStopWidth: 4,
        fontFamily,
    });
    
    terminal.open(terminalContainer);
    terminal.focus();
    
    terminal.loadAddon(webglAddon);
    terminal.loadAddon(fitAddon);
    fitAddon.fit();
    
    terminal.onResize(onTermResize(socket));
    terminal.onData(onTermData(socket));

Object.keys(preferences).forEach(key => {
                    if (key === 'rendererType' && preferences[key] === 'webgl') {
                        terminal.loadAddon(new WebglAddon());
                        console.log(`[ttyd] WebGL renderer enabled`);
                    } else {
                        console.log(`[ttyd] option: ${key}=${preferences[key]}`);
                        terminal.setOption(key, preferences[key]);
                    }
                });
                break;

Object.keys(options).forEach(key => {
            const value = options[key];
            switch (key) {
                case 'rendererType':
                    if (value === 'webgl' && isWebGL2Available()) {
                        terminal.loadAddon(new WebglAddon());
                        console.log(`[ttyd] WebGL renderer enabled`);
                    }
                    break;
                case 'disableLeaveAlert':
                    if (value) {
                        window.removeEventListener('beforeunload', this.onWindowUnload);
                        console.log('[ttyd] Leave site alert disabled');
                    }
                    break;
                case 'disableResizeOverlay':
                    if (value) {
                        console.log(`[ttyd] Resize overlay disabled`);
                        this.resizeOverlay = false;
                    }
                    break;
                case 'disableReconnect':

import { FitAddon } from "xterm-addon-fit"
import { WebglAddon } from "xterm-addon-webgl"
import Terminal from "components/Terminal/Terminal"
import ResizeObserver from "components/ResizeObserver/ResizeObserver"
import { useDebounce } from "lib/hooks/useDebounce"
import { ITheme } from "application/themes"

interface TabProps {
    source: AsyncIterableIterator
    theme?: ITheme
    onInput: (msg: string) => void
    onResize: (data: { cols: number; rows: number }) => void
}

const fit = new FitAddon()
const webgl = new WebglAddon()
const addons = [fit, webgl]

const setDocumentTitle = (title: string): void => {
    document.title = title
}

const Tab: FunctionComponent = ({
    source,
    theme,
    onInput,
    onResize,
}) => {
    const debounceFit = useDebounce((): void => fit.fit(), 200)

    return (

constructor(enableWebGL = true) {
        this._terminal = new Terminal()
        this.ref = document.createElement("div")
        this.ref.style.width = "100%"
        this.ref.style.height = "100%"
        this._addons = [this.fitAddon]

        if (enableWebGL && detectWebgl2Support()) {
            this._addons.push(new WebglAddon())
        }
    }

attach (host: HTMLElement): void {
        this.configure()

        this.xterm.open(host)
        this.opened = true

        if (this.enableWebGL) {
            this.xterm.loadAddon(new WebglAddon())
        }

        this.ready.next()
        this.ready.complete()

        this.xterm.loadAddon(this.search)

        window.addEventListener('resize', this.resizeHandler)

        this.resizeHandler()

        host.addEventListener('dragOver', (event: any) => this.dragOver.next(event))
        host.addEventListener('drop', event => this.drop.next(event))

        host.addEventListener('mousedown', event => this.mouseEvent.next(event as MouseEvent))
        host.addEventListener('mouseup', event => this.mouseEvent.next(event as MouseEvent))

constructor(type, branch) {
    this.branch = branch
    this.currentProfile = new CurrentProfile()
    this.id = Math.random()
    this.subscriptions = new CompositeDisposable()
    this.title = ''
    this.ptyId = ipc.callMain('pty-create', {sessionId: this.id, sessionWindowId: activeWindow().id})
    this.type = type || 'default'
    this.fitAddon = new FitAddon()
    this.searchAddon = new SearchAddon()
    this.webglAddon = new WebglAddon()
    this.xterm = new Terminal(this.settings())
    this.xterm.loadAddon(this.fitAddon)
    this.xterm.loadAddon(this.searchAddon)

    this.resetKeymaps()
    autoBind(this)

    this.bindListeners()
  }