@tensorflow/tfjs-core/src/backends/webgl/webgl_util.ts

Hardware-accelerated JavaScript library for machine intelligence

/**
 * @license
 * Copyright 2017 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================================
 */

import {env} from '../../environment';

import * as util from '../../util';

import {getWebGLContext} from './canvas_util';
import {getTextureConfig} from './tex_util';

export function callAndCheck<T>(
    gl: WebGLRenderingContext, debugMode: boolean, func: () => T): T {
  const returnValue = func();
  if (debugMode) {
    checkWebGLError(gl);
  }
  return returnValue;
}

function checkWebGLError(gl: WebGLRenderingContext) {
  const error = gl.getError();
  if (error !== gl.NO_ERROR) {
    throw new Error('WebGL Error: ' + getWebGLErrorMessage(gl, error));
  }
}

// https://en.wikipedia.org/wiki/Half-precision_floating-point_format
const MIN_FLOAT16 = 5.96e-8;
const MAX_FLOAT16 = 65504;

export function canBeRepresented(num: number): boolean {
  if (env().getBool('WEBGL_RENDER_FLOAT32_ENABLED') || num === 0 ||
      (MIN_FLOAT16 < Math.abs(num) && Math.abs(num) < MAX_FLOAT16)) {
    return true;
  }
  return false;
}

export function getWebGLErrorMessage(
    gl: WebGLRenderingContext, status: number): string {
  switch (status) {
    case gl.NO_ERROR:
      return 'NO_ERROR';
    case gl.INVALID_ENUM:
      return 'INVALID_ENUM';
    case gl.INVALID_VALUE:
      return 'INVALID_VALUE';
    case gl.INVALID_OPERATION:
      return 'INVALID_OPERATION';
    case gl.INVALID_FRAMEBUFFER_OPERATION:
      return 'INVALID_FRAMEBUFFER_OPERATION';
    case gl.OUT_OF_MEMORY:
      return 'OUT_OF_MEMORY';
    case gl.CONTEXT_LOST_WEBGL:
      return 'CONTEXT_LOST_WEBGL';
    default:
      return `Unknown error code ${status}`;
  }
}

export function getExtensionOrThrow(
    gl: WebGLRenderingContext, debug: boolean, extensionName: string): {} {
  return throwIfNull<{}>(
      gl, debug, () => gl.getExtension(extensionName),
      'Extension "' + extensionName + '" not supported on this browser.');
}

export function createVertexShader(
    gl: WebGLRenderingContext, debug: boolean,
    vertexShaderSource: string): WebGLShader {
  const vertexShader: WebGLShader = throwIfNull<WebGLShader>(
      gl, debug, () => gl.createShader(gl.VERTEX_SHADER),
      'Unable to create vertex WebGLShader.');
  callAndCheck(
      gl, debug, () => gl.shaderSource(vertexShader, vertexShaderSource));
  callAndCheck(gl, debug, () => gl.compileShader(vertexShader));
  if (gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS) === false) {
    console.log(gl.getShaderInfoLog(vertexShader));
    throw new Error('Failed to compile vertex shader.');
  }
  return vertexShader;
}

export function createFragmentShader(
    gl: WebGLRenderingContext, debug: boolean,
    fragmentShaderSource: string): WebGLShader {
  const fragmentShader: WebGLShader = throwIfNull<WebGLShader>(
      gl, debug, () => gl.createShader(gl.FRAGMENT_SHADER),
      'Unable to create fragment WebGLShader.');
  callAndCheck(
      gl, debug, () => gl.shaderSource(fragmentShader, fragmentShaderSource));
  callAndCheck(gl, debug, () => gl.compileShader(fragmentShader));
  if (gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS) === false) {
    logShaderSourceAndInfoLog(
        fragmentShaderSource, gl.getShaderInfoLog(fragmentShader));
    throw new Error('Failed to compile fragment shader.');
  }
  return fragmentShader;
}

const lineNumberRegex = /ERROR: [0-9]+:([0-9]+):/g;
function logShaderSourceAndInfoLog(
    shaderSource: string, shaderInfoLog: string) {
  const lineNumberRegexResult = lineNumberRegex.exec(shaderInfoLog);
  if (lineNumberRegexResult == null) {
    console.log(`Couldn't parse line number in error: ${shaderInfoLog}`);
    console.log(shaderSource);
    return;
  }

  const lineNumber = +lineNumberRegexResult[1];

  const shaderLines = shaderSource.split('\n');
  const pad = shaderLines.length.toString().length + 2;
  const linesWithLineNumbers = shaderLines.map(
      (line, lineNumber) =>
          util.rightPad((lineNumber + 1).toString(), pad) + line);
  let maxLineLength = 0;
  for (let i = 0; i < linesWithLineNumbers.length; i++) {
    maxLineLength = Math.max(linesWithLineNumbers[i].length, maxLineLength);
  }

  const beforeErrorLines = linesWithLineNumbers.slice(0, lineNumber - 1);
  const errorLine = linesWithLineNumbers.slice(lineNumber - 1, lineNumber);
  const afterErrorLines = linesWithLineNumbers.slice(lineNumber);

  console.log(beforeErrorLines.join('\n'));
  console.log(shaderInfoLog.split('\n')[0]);
  console.log(
      `%c ${util.rightPad(errorLine[0], maxLineLength)}`,
      'border:1px solid red; background-color:#e3d2d2; color:#a61717');
  console.log(afterErrorLines.join('\n'));
}

export function createProgram(
    gl: WebGLRenderingContext, debug: boolean): WebGLProgram {
  return throwIfNull<WebGLProgram>(
      gl, debug, () => gl.createProgram(), 'Unable to create WebGLProgram.');
}

export function linkProgram(
    gl: WebGLRenderingContext, debug: boolean, program: WebGLProgram) {
  callAndCheck(gl, debug, () => gl.linkProgram(program));
  if (gl.getProgramParameter(program, gl.LINK_STATUS) === false) {
    console.log(gl.getProgramInfoLog(program));
    throw new Error('Failed to link vertex and fragment shaders.');
  }
}

export function validateProgram(
    gl: WebGLRenderingContext, debug: boolean, program: WebGLProgram) {
  callAndCheck(gl, debug, () => gl.validateProgram(program));
  if (gl.getProgramParameter(program, gl.VALIDATE_STATUS) === false) {
    console.log(gl.getProgramInfoLog(program));
    throw new Error('Shader program validation failed.');
  }
}

export function createStaticVertexBuffer(
    gl: WebGLRenderingContext, debug: boolean,
    data: Float32Array): WebGLBuffer {
  const buffer: WebGLBuffer = throwIfNull<WebGLBuffer>(
      gl, debug, () => gl.createBuffer(), 'Unable to create WebGLBuffer');
  callAndCheck(gl, debug, () => gl.bindBuffer(gl.ARRAY_BUFFER, buffer));
  callAndCheck(
      gl, debug, () => gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW));
  return buffer;
}

export function createStaticIndexBuffer(
    gl: WebGLRenderingContext, debug: boolean, data: Uint16Array): WebGLBuffer {
  const buffer: WebGLBuffer = throwIfNull<WebGLBuffer>(
      gl, debug, () => gl.createBuffer(), 'Unable to create WebGLBuffer');
  callAndCheck(gl, debug, () => gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer));
  callAndCheck(
      gl, debug,
      () => gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW));
  return buffer;
}

export function getNumChannels(): number {
  if (env().getNumber('WEBGL_VERSION') === 2) {
    return 1;
  }
  return 4;
}

export function createTexture(
    gl: WebGLRenderingContext, debug: boolean): WebGLTexture {
  return throwIfNull<WebGLTexture>(
      gl, debug, () => gl.createTexture(), 'Unable to create WebGLTexture.');
}

export function validateTextureSize(width: number, height: number) {
  const maxTextureSize = env().getNumber('WEBGL_MAX_TEXTURE_SIZE');
  if ((width <= 0) || (height <= 0)) {
    const requested = `[${width}x${height}]`;
    throw new Error('Requested texture size ' + requested + ' is invalid.');
  }
  if ((width > maxTextureSize) || (height > maxTextureSize)) {
    const requested = `[${width}x${height}]`;
    const max = `[${maxTextureSize}x${maxTextureSize}]`;
    throw new Error(
        'Requested texture size ' + requested +
        ' greater than WebGL maximum on this browser / GPU ' + max + '.');
  }
}

export function createFramebuffer(
    gl: WebGLRenderingContext, debug: boolean): WebGLFramebuffer {
  return throwIfNull<WebGLFramebuffer>(
      gl, debug, () => gl.createFramebuffer(),
      'Unable to create WebGLFramebuffer.');
}

export function bindVertexBufferToProgramAttribute(
    gl: WebGLRenderingContext, debug: boolean, program: WebGLProgram,
    attribute: string, buffer: WebGLBuffer, arrayEntriesPerItem: number,
    itemStrideInBytes: number, itemOffsetInBytes: number): boolean {
  const loc = gl.getAttribLocation(program, attribute);
  if (loc === -1) {
    // The GPU compiler decided to strip out this attribute because it's unused,
    // thus no need to bind.
    return false;
  }
  callAndCheck(gl, debug, () => gl.bindBuffer(gl.ARRAY_BUFFER, buffer));
  callAndCheck(
      gl, debug,
      () => gl.vertexAttribPointer(
          loc, arrayEntriesPerItem, gl.FLOAT, false, itemStrideInBytes,
          itemOffsetInBytes));
  callAndCheck(gl, debug, () => gl.enableVertexAttribArray(loc));
  return true;
}

export function bindTextureUnit(
    gl: WebGLRenderingContext, debug: boolean, texture: WebGLTexture,
    textureUnit: number) {
  validateTextureUnit(gl, textureUnit);
  callAndCheck(gl, debug, () => gl.activeTexture(gl.TEXTURE0 + textureUnit));
  callAndCheck(gl, debug, () => gl.bindTexture(gl.TEXTURE_2D, texture));
}

export function unbindTextureUnit(
    gl: WebGLRenderingContext, debug: boolean, textureUnit: number) {
  validateTextureUnit(gl, textureUnit);
  callAndCheck(gl, debug, () => gl.activeTexture(gl.TEXTURE0 + textureUnit));
  callAndCheck(gl, debug, () => gl.bindTexture(gl.TEXTURE_2D, null));
}

export function getProgramUniformLocationOrThrow(
    gl: WebGLRenderingContext, debug: boolean, program: WebGLProgram,
    uniformName: string): WebGLUniformLocation {
  return throwIfNull<WebGLUniformLocation>(
      gl, debug, () => gl.getUniformLocation(program, uniformName),
      'uniform "' + uniformName + '" not present in program.');
}

export function getProgramUniformLocation(
    gl: WebGLRenderingContext, program: WebGLProgram,
    uniformName: string): WebGLUniformLocation {
  return gl.getUniformLocation(program, uniformName);
}

export function bindTextureToProgramUniformSampler(
    gl: WebGLRenderingContext, debug: boolean, program: WebGLProgram,
    texture: WebGLTexture, uniformSamplerLocation: WebGLUniformLocation,
    textureUnit: number) {
  callAndCheck(
      gl, debug, () => bindTextureUnit(gl, debug, texture, textureUnit));
  callAndCheck(
      gl, debug, () => gl.uniform1i(uniformSamplerLocation, textureUnit));
}

export function bindCanvasToFramebuffer(
    gl: WebGLRenderingContext, debug: boolean) {
  callAndCheck(gl, debug, () => gl.bindFramebuffer(gl.FRAMEBUFFER, null));
  callAndCheck(
      gl, debug, () => gl.viewport(0, 0, gl.canvas.width, gl.canvas.height));
  callAndCheck(
      gl, debug, () => gl.scissor(0, 0, gl.canvas.width, gl.canvas.height));
}

export function bindColorTextureToFramebuffer(
    gl: WebGLRenderingContext, debug: boolean, texture: WebGLTexture,
    framebuffer: WebGLFramebuffer) {
  callAndCheck(
      gl, debug, () => gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer));
  callAndCheck(
      gl, debug,
      () => gl.framebufferTexture2D(
          gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0));
}

export function unbindColorTextureFromFramebuffer(
    gl: WebGLRenderingContext, debug: boolean, framebuffer: WebGLFramebuffer) {
  callAndCheck(
      gl, debug, () => gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer));
  callAndCheck(
      gl, debug,
      () => gl.framebufferTexture2D(
          gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, null, 0));
}

export function validateFramebuffer(gl: WebGLRenderingContext) {
  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  if (status !== gl.FRAMEBUFFER_COMPLETE) {
    throw new Error(
        'Error binding framebuffer: ' + getFramebufferErrorMessage(gl, status));
  }
}

export function getFramebufferErrorMessage(
    gl: WebGLRenderingContext, status: number): string {
  switch (status) {
    case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
      return 'FRAMEBUFFER_INCOMPLETE_ATTACHMENT';
    case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
      return 'FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT';
    case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
      return 'FRAMEBUFFER_INCOMPLETE_DIMENSIONS';
    case gl.FRAMEBUFFER_UNSUPPORTED:
      return 'FRAMEBUFFER_UNSUPPORTED';
    default:
      return `unknown error ${status}`;
  }
}

function throwIfNull<T>(
    gl: WebGLRenderingContext, debug: boolean, returnTOrNull: () => T | null,
    failureMessage: string): T {
  const tOrNull: T|null = callAndCheck(gl, debug, () => returnTOrNull());
  if (tOrNull == null) {
    throw new Error(failureMessage);
  }
  return tOrNull;
}

function validateTextureUnit(gl: WebGLRenderingContext, textureUnit: number) {
  const maxTextureUnit = gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1;
  const glTextureUnit = textureUnit + gl.TEXTURE0;
  if (glTextureUnit < gl.TEXTURE0 || glTextureUnit > maxTextureUnit) {
    const textureUnitRange = `[gl.TEXTURE0, gl.TEXTURE${maxTextureUnit}]`;
    throw new Error(`textureUnit must be in ${textureUnitRange}.`);
  }
}

export function getBatchDim(shape: number[], dimsToSkip = 2): number {
  return util.sizeFromShape(shape.slice(0, shape.length - dimsToSkip));
}

export function getRowsCols(shape: number[]): [number, number] {
  if (shape.length === 0) {
    throw Error('Cannot get rows and columns of an empty shape array.');
  }

  return [
    shape.length > 1 ? shape[shape.length - 2] : 1, shape[shape.length - 1]
  ];
}

export function getShapeAs3D(shape: number[]): [number, number, number] {
  let shapeAs3D: [number, number, number] = [1, 1, 1];
  const isScalar = shape.length === 0 || (shape.length === 1 && shape[0] === 1);
  if (!isScalar) {
    shapeAs3D =
        [getBatchDim(shape), ...getRowsCols(shape)] as [number, number, number];
  }
  return shapeAs3D;
}

export function getTextureShapeFromLogicalShape(
    logShape: number[], isPacked = false): [number, number] {
  let maxTexSize = env().getNumber('WEBGL_MAX_TEXTURE_SIZE');
  if (isPacked) {
    maxTexSize = maxTexSize * 2;

    // This logic ensures we accurately count the number of packed texels needed
    // to accommodate the tensor. We can only pack values in the same texel if
    // they are from adjacent pairs of rows/cols within the same batch. So if a
    // tensor has 3 rows, we pretend it has 4 rows in order to account for the
    // fact that the texels containing the third row are half empty.
    logShape = logShape.map(
        (d, i) => i >= logShape.length - 2 ?
            util.nearestLargerEven(logShape[i]) :
            logShape[i]);

    // Packed texture height is at least 2 (the channel height of a single
    // texel).
    if (logShape.length === 1) {
      logShape = [2, logShape[0]];
    }
  }

  // If logical shape is 2, we don't squeeze, since we want to match physical.
  if (logShape.length !== 2) {
    const squeezeResult = util.squeezeShape(logShape);
    logShape = squeezeResult.newShape;
  }

  let size = util.sizeFromShape(logShape);
  if (logShape.length <= 1 && size <= maxTexSize) {
    return [1, size];
  } else if (
      logShape.length === 2 && logShape[0] <= maxTexSize &&
      logShape[1] <= maxTexSize) {
    return logShape as [number, number];
  } else if (
      logShape.length === 3 && logShape[0] * logShape[1] <= maxTexSize &&
      logShape[2] <= maxTexSize) {
    return [logShape[0] * logShape[1], logShape[2]];
  } else if (
      logShape.length === 3 && logShape[0] <= maxTexSize &&
      logShape[1] * logShape[2] <= maxTexSize) {
    return [logShape[0], logShape[1] * logShape[2]];
  } else if (
      logShape.length === 4 &&
      logShape[0] * logShape[1] * logShape[2] <= maxTexSize &&
      logShape[3] <= maxTexSize) {
    return [logShape[0] * logShape[1] * logShape[2], logShape[3]];
  } else if (
      logShape.length === 4 && logShape[0] <= maxTexSize &&
      logShape[1] * logShape[2] * logShape[3] <= maxTexSize) {
    return [logShape[0], logShape[1] * logShape[2] * logShape[3]];
  } else {
    if (isPacked) {
      // For packed textures size equals the number of channels required to
      // accommodate the texture data. However in order to squarify such that
      // inner dimensions stay even, we rewrite size to equal the number of
      // texels. Then in the return statement we rehydrate the squarified
      // dimensions to channel units.

      const batchDim = getBatchDim(logShape);
      let rows = 2, cols = 2;
      if (logShape.length) {
        [rows, cols] = getRowsCols(logShape);
      }
      size = batchDim * (rows / 2) * (cols / 2);
      return util.sizeToSquarishShape(size).map(d => d * 2) as [number, number];
    }
    return util.sizeToSquarishShape(size);
  }
}

function isEven(n: number): boolean {
  return n % 2 === 0;
}

/**
 * This determines whether reshaping a packed texture requires rearranging
 * the data within the texture, assuming 2x2 packing.
 */
export function isReshapeFree(shape1: number[], shape2: number[]): boolean {
  shape1 = shape1.slice(-2);
  shape2 = shape2.slice(-2);

  if (util.arraysEqual(shape1, shape2)) {
    return true;
  }

  if (!shape1.length || !shape2.length) {  // One of the shapes is a scalar.
    return true;
  }

  if (shape1[0] === 0 || shape1[1] === 0 || shape2[0] === 0 ||
      shape2[1] === 0) {
    return true;
  }

  if (shape1.length !== shape2.length) {  // One of the shapes is a vector.
    const shape1Cols = shape1.slice(-1)[0];
    const shape2Cols = shape2.slice(-1)[0];
    if (shape1Cols === shape2Cols) {
      return true;
    }

    if (isEven(shape1Cols) && isEven(shape2Cols) &&
        (shape1[0] === 1 || shape2[0] === 1)) {
      return true;
    }
  }
  return shape1[1] === shape2[1] && isEven(shape1[0]) && isEven(shape2[0]);
}

// We cache webgl params because the environment gets reset between
// unit tests and we don't want to constantly query the WebGLContext for
// MAX_TEXTURE_SIZE.
let MAX_TEXTURE_SIZE: number;
let MAX_TEXTURES_IN_SHADER: number;

export function getWebGLMaxTextureSize(webGLVersion: number): number {
  if (MAX_TEXTURE_SIZE == null) {
    const gl = getWebGLContext(webGLVersion);
    MAX_TEXTURE_SIZE = gl.getParameter(gl.MAX_TEXTURE_SIZE);
  }
  return MAX_TEXTURE_SIZE;
}

export function resetMaxTextureSize() {
  MAX_TEXTURE_SIZE = null;
}
export function resetMaxTexturesInShader() {
  MAX_TEXTURES_IN_SHADER = null;
}

export function getMaxTexturesInShader(webGLVersion: number): number {
  if (MAX_TEXTURES_IN_SHADER == null) {
    const gl = getWebGLContext(webGLVersion);
    MAX_TEXTURES_IN_SHADER = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
  }
  // We cap at 16 to avoid spurious runtime "memory exhausted" error.
  return Math.min(16, MAX_TEXTURES_IN_SHADER);
}

export function getWebGLDisjointQueryTimerVersion(webGLVersion: number):
    number {
  if (webGLVersion === 0) {
    return 0;
  }

  let queryTimerVersion: number;
  const gl = getWebGLContext(webGLVersion);

  if (hasExtension(gl, 'EXT_disjoint_timer_query_webgl2') &&
      webGLVersion === 2) {
    queryTimerVersion = 2;
  } else if (hasExtension(gl, 'EXT_disjoint_timer_query')) {
    queryTimerVersion = 1;
  } else {
    queryTimerVersion = 0;
  }
  return queryTimerVersion;
}

export function hasExtension(gl: WebGLRenderingContext, extensionName: string) {
  const ext = gl.getExtension(extensionName);
  return ext != null;
}

export function isWebGLVersionEnabled(webGLVersion: 1|2) {
  try {
    const gl = getWebGLContext(webGLVersion);
    if (gl != null) {
      return true;
    }
  } catch (e) {
    return false;
  }
  return false;
}

export function isCapableOfRenderingToFloatTexture(webGLVersion: number):
    boolean {
  if (webGLVersion === 0) {
    return false;
  }

  const gl = getWebGLContext(webGLVersion);

  if (webGLVersion === 1) {
    if (!hasExtension(gl, 'OES_texture_float')) {
      return false;
    }
  } else {
    if (!hasExtension(gl, 'EXT_color_buffer_float')) {
      return false;
    }
  }

  const isFrameBufferComplete = createFloatTextureAndBindToFramebuffer(gl);
  return isFrameBufferComplete;
}

/**
 * Check if we can download values from a float/half-float texture.
 *
 * Note that for performance reasons we use binding a texture to a framebuffer
 * as a proxy for ability to download float values later using readPixels. The
 * texture params of this texture will not match those in readPixels exactly
 * but if we are unable to bind some kind of float texture to the frameBuffer
 * then we definitely will not be able to read float values from it.
 */
export function isDownloadFloatTextureEnabled(webGLVersion: number): boolean {
  if (webGLVersion === 0) {
    return false;
  }

  const gl = getWebGLContext(webGLVersion);

  if (webGLVersion === 1) {
    if (!hasExtension(gl, 'OES_texture_float')) {
      return false;
    }
    if (!hasExtension(gl, 'WEBGL_color_buffer_float')) {
      return false;
    }
  } else {
    if (hasExtension(gl, 'EXT_color_buffer_float')) {
      return createFloatTextureAndBindToFramebuffer(gl);
    }

    const COLOR_BUFFER_HALF_FLOAT = 'EXT_color_buffer_half_float';
    if (hasExtension(gl, COLOR_BUFFER_HALF_FLOAT)) {
      const textureHalfFloatExtension =
          gl.getExtension(COLOR_BUFFER_HALF_FLOAT);
      return createHalfFloatTextureAndBindToFramebuffer(
          gl, textureHalfFloatExtension);
    }

    return false;
  }

  const isFrameBufferComplete = createFloatTextureAndBindToFramebuffer(gl);
  return isFrameBufferComplete;
}

function createFloatTextureAndBindToFramebuffer(gl: WebGLRenderingContext):
    boolean {
  const texConfig = getTextureConfig(gl);

  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  const width = 1;
  const height = 1;
  gl.texImage2D(
      gl.TEXTURE_2D, 0, texConfig.internalFormatFloat, width, height, 0,
      texConfig.textureFormatFloat, texConfig.textureTypeFloat, null);

  const frameBuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
  gl.framebufferTexture2D(
      gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

  const isFrameBufferComplete =
      gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;

  gl.bindTexture(gl.TEXTURE_2D, null);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.deleteTexture(texture);
  gl.deleteFramebuffer(frameBuffer);

  return isFrameBufferComplete;
}

function createHalfFloatTextureAndBindToFramebuffer(
    // tslint:disable-next-line:no-any
    gl: WebGLRenderingContext, textureHalfFloatExtension: any): boolean {
  const texConfig = getTextureConfig(gl, textureHalfFloatExtension);
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  const width = 1;
  const height = 1;
  gl.texImage2D(
      gl.TEXTURE_2D, 0, texConfig.internalFormatHalfFloat, width, height, 0,
      texConfig.textureFormatFloat, texConfig.textureTypeHalfFloat, null);

  const frameBuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
  gl.framebufferTexture2D(
      gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

  const isFrameBufferComplete =
      gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;

  gl.bindTexture(gl.TEXTURE_2D, null);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.deleteTexture(texture);
  gl.deleteFramebuffer(frameBuffer);

  return isFrameBufferComplete;
}

export function isWebGLFenceEnabled(webGLVersion: number) {
  if (webGLVersion !== 2) {
    return false;
  }
  const gl = getWebGLContext(webGLVersion);

  // tslint:disable-next-line:no-any
  const isEnabled = (gl as any).fenceSync != null;
  return isEnabled;
}