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
- Stop passing an explicit context and let three.js acquire WebGL2 itself, OR request 'webgl2' explicitly: canvas.getContext('webgl2', attrs).
- Upgrade to r163+ and remove any 'webgl' / 'experimental-webgl' context acquisition.
- Detect WebGL2 support (canvas.getContext('webgl2')) before constructing the renderer and show a fallback message if unavailable.
- 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
- Stop passing an explicit context to WebGLRenderer; let it acquire WebGL2.
- Never call canvas.getContext('webgl') or 'experimental-webgl' on r163+.
- Audit third-party wrappers that inject a context into the constructor.
- Detect WebGL2 availability before constructing the renderer.
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
- THREE.WebGLRenderer: Error creating WebGL context with your
- THREE.WebGLRenderer: Error creating WebGL context.
- THREE.WebGLRenderer: Attached DepthTexture is initialized to
- THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is
- THREE.WebGLRenderer.readRenderTargetPixelsAsync: renderTarge
AI-assisted analysis of mrdoob/three.js@da05705fa3 (2026-08-12).
Data as JSON: /api/errors/3f86a8ca0d7c5840.
Report an issue: GitHub.