Checking for WebGL or WebGL extensions with Modernizr

Question

Checking for WebGL or WebGL extensions with Modernizr

On my website, I have incorporated THREE.js scenes and graphic objects. It is common knowledge that THREE.js makes use of WebGL.

To ensure compatibility with WebGL, I am considering using Modernizr to check the user's browser. If the browser does not support WebGL, I plan to display a message alerting the user.

When configuring Modernizr to test for specific browser features, there are two options that align with my objective:

WebGL: Detects the presence of WebGL in the browser.

WebGL Extensions: Checks for support for OpenGL extensions within WebGL. If the WebGL extensions API is supported, it will expose the available extensions as subproperties.

In order for THREE.js to function properly, should I test for both WebGL Extensions and WebGL, or is testing for WebGL alone sufficient?

javascript three.js webgl modernizr

Answer 1

Answer №1

Whether or not you need extensions depends on the features you are using. Three.js itself does not require any extensions, but certain features like shadows may perform better with the WEBGL_depth_texture extension.

If you are unsure about which extensions you need, you can try hiding them using some code to see if your application still functions:

For example:

// disable all extensions

WebGLRenderingContext.prototype.getExtension = function() {
  return null;
}
WebGLRenderingContext.prototype.getSupportedExtensions = function() {
  return [];
}

// initialize Three.js

If you want to allow specific extensions, you can use the following approach:

var allowedExtensions = [
  "webgl_depth_texture",
  "oes_texture_float",
];

WebGLRenderingContext.prototype.getExtension = function(origFn) {
  return function(name) {
    if (allowedExtensions.indexOf(name.toLowerCase()) >= 0) {
      return origFn.call(this, name);
    }
    return null;
  };
}(WebGLRenderingContext.prototype.getExtension);

WebGLRenderingContext.prototype.getSupportedExtensions = function(origFn) {
  return function() {
    return origFn.call(this).filter(function(name) {
      return allowedExtensions.indexOf(n) >= 0;
    });
  };
}(WebGLRenderingContext.prototype.getSupportedExtensions);

Answer 2

Whether or not you need extensions depends on the features you are using. Three.js itself does not require any extensions, but certain features like shadows may perform better with the WEBGL_depth_texture extension.

If you are unsure about which extensions you need, you can try hiding them using some code to see if your application still functions:

For example:

// disable all extensions

WebGLRenderingContext.prototype.getExtension = function() {
  return null;
}
WebGLRenderingContext.prototype.getSupportedExtensions = function() {
  return [];
}

// initialize Three.js

If you want to allow specific extensions, you can use the following approach:

var allowedExtensions = [
  "webgl_depth_texture",
  "oes_texture_float",
];

WebGLRenderingContext.prototype.getExtension = function(origFn) {
  return function(name) {
    if (allowedExtensions.indexOf(name.toLowerCase()) >= 0) {
      return origFn.call(this, name);
    }
    return null;
  };
}(WebGLRenderingContext.prototype.getExtension);

WebGLRenderingContext.prototype.getSupportedExtensions = function(origFn) {
  return function() {
    return origFn.call(this).filter(function(name) {
      return allowedExtensions.indexOf(n) >= 0;
    });
  };
}(WebGLRenderingContext.prototype.getSupportedExtensions);

Checking for WebGL or WebGL extensions with Modernizr

Answer №1

Similar questions

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

What is the best way to eliminate the border color on a drop-down menu's bottom border?

Exploring ways to enhance the functionality of spreadsheets in GAS

How can we use the jQuery each loop to iterate through a JSON object, compare values to another object, and ensure that no duplicate prints occur?

Navigating fluently in React Native applications

Design an interactive quarter-circle using CSS styling

Unable to establish session using jquery

Tips for avoiding issues with double quotes when working with JavaScript and JSON

Issue with repeated items in Flatlist

A loop variable in Javascript is a function that iterates

Improving a lengthy TypeScript function through refactoring

A guide on iterating through an array in vue.js and appending a new attribute to each object

Adjust dimensions of images in Bee3D carousel

Issue with Redirecting in React: REST requests are not successful

What could be the reason for this code returning a "module not found" error?

Utilizing Vue.js to effectively filter within a nested array

Differences Between React Prop Types and Typescript in Front-End

Building HTML elements using AngularJS and JavaScript

Adjust the font size based on the dimensions of the container

Observing the closing of a modal window from a different controller in AngularJS