mrdoob/three.js · critical · Error

THREE.WebGLRenderer: WebGL 1 is not supported since r163.

Error message

THREE.WebGLRenderer: WebGL 1 is not supported since r163.

What it means

Thrown by the WebGLRenderer constructor when a context is explicitly passed that is a WebGLRenderingContext (WebGL 1). Since three.js r163, WebGL 1 is no longer supported; the renderer only accepts a WebGL2RenderingContext. Passing a WebGL1 context is a hard failure.

Source

Thrown at src/renderers/WebGLRenderer.js:102

			outputBufferType = UnsignedByteType,
		} = parameters;

		/**
		 * This flag can be used for type testing.
		 *
		 * @type {boolean}
		 * @readonly
		 * @default true
		 */
		this.isWebGLRenderer = true;

		let _alpha;

		if ( context !== null ) {

			if ( typeof WebGLRenderingContext !== 'undefined' && context instanceof WebGLRenderingContext ) {

				throw new Error( 'THREE.WebGLRenderer: WebGL 1 is not supported since r163.' );

			}

			_alpha = context.getContextAttributes().alpha;

		} else {

			_alpha = alpha;

		}

		const _outputBufferType = outputBufferType;

		const INTEGER_FORMATS = new Set( [
			RGBAIntegerFormat,
			RGIntegerFormat,
			RedIntegerFormat
		] );

View on GitHub (pinned to da05705fa3)

Solutions

  1. Stop passing an explicit context and let three.js acquire WebGL2 itself, OR request 'webgl2' explicitly: canvas.getContext('webgl2', attrs).
  2. Upgrade to r163+ and remove any 'webgl' / 'experimental-webgl' context acquisition.
  3. Detect WebGL2 support (canvas.getContext('webgl2')) before constructing the renderer and show a fallback message if unavailable.
  4. Audit third-party integrations that inject a context into the renderer constructor.

Example fix

// before
const ctx = canvas.getContext( 'webgl' );
const renderer = new THREE.WebGLRenderer( { canvas, context: ctx } ); // throws

// after
const renderer = new THREE.WebGLRenderer( { canvas, antialias: true } ); // let three.js pick webgl2
Defensive patterns

Strategy: validation

Validate before calling

// Do not pass a WebGL1 context. Probe for WebGL2 first.
function getRenderer( canvas ) {
  if ( canvas.getContext( 'webgl2' ) === null ) {
    throw new Error( 'WebGL2 is required by this build of three.js.' );
  }
  return new THREE.WebGLRenderer( { canvas } ); // let three.js acquire webgl2
}

Type guard

function isWebGL2Context( ctx ) {
  return typeof WebGL2RenderingContext !== 'undefined' && ctx instanceof WebGL2RenderingContext;
}

Prevention

When it happens

Trigger: Constructing new THREE.WebGLRenderer({ canvas, context }) where context was obtained via canvas.getContext('webgl') or 'experimental-webgl'. Migrating from a pre-r163 codebase that requested a WebGL1 context.

Common situations: Upgrading three.js past r163 without updating context acquisition code; copy-pasted legacy code that still requests 'webgl'; libraries/wrappers that hand three.js a WebGL1 context; browsers/environments where only WebGL1 was previously requested explicitly.

Related errors


AI-assisted analysis of mrdoob/three.js@da05705fa3 (2026-08-12). Data as JSON: /api/errors/3f86a8ca0d7c5840. Report an issue: GitHub.