Skip to content

WebGLRenderer: Remove WebGL 1 support. #861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Methuselah96 merged 6 commits into from
Mar 22, 2024
Merged

WebGLRenderer: Remove WebGL 1 support. #861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3f6263
Changes in core
Methuselah96 Mar 22, 2024
385289e
Update docs
Methuselah96 Mar 22, 2024
652b4d3
Add examples
Methuselah96 Mar 22, 2024
424a53d
Update changes.patch
Methuselah96 Mar 22, 2024
ace4714
Delete examples
Methuselah96 Mar 22, 2024
3d19679
Fix tests
Methuselah96 Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 46 additions & 63 deletions examples-testing/changes.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1750,7 +1750,7 @@ index bab79dd..2d6c621 100644
ball.userData.down = false;
}
diff --git a/examples-testing/examples/webaudio_visualizer.ts b/examples-testing/examples/webaudio_visualizer.ts
index 6c4244f..857d8f1 100644
index c9f6909..561f72c 100644
--- a/examples-testing/examples/webaudio_visualizer.ts
+++ b/examples-testing/examples/webaudio_visualizer.ts
@@ -1,8 +1,13 @@
Expand Down Expand Up @@ -1784,7 +1784,7 @@ index 6c4244f..857d8f1 100644

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
@@ -58,8 +63,8 @@ function init() {
@@ -56,8 +61,8 @@ function init() {

const material = new THREE.ShaderMaterial({
uniforms: uniforms,
Expand All @@ -1795,7 +1795,7 @@ index 6c4244f..857d8f1 100644
});

const geometry = new THREE.PlaneGeometry(1, 1);
@@ -87,7 +92,7 @@ function animate() {
@@ -85,7 +90,7 @@ function animate() {
function render() {
analyser.getFrequencyData();

Expand Down Expand Up @@ -2652,7 +2652,7 @@ index 1e9f668..ec64598 100644
init();
animate();
diff --git a/examples-testing/examples/webgl_buffergeometry_instancing.ts b/examples-testing/examples/webgl_buffergeometry_instancing.ts
index adff12a..fb9267f 100644
index 1596610..7e8df41 100644
--- a/examples-testing/examples/webgl_buffergeometry_instancing.ts
+++ b/examples-testing/examples/webgl_buffergeometry_instancing.ts
@@ -3,15 +3,15 @@ import * as THREE from 'three';
Expand Down Expand Up @@ -2685,16 +2685,7 @@ index adff12a..fb9267f 100644
side: THREE.DoubleSide,
forceSinglePass: true,
transparent: true,
@@ -100,7 +100,7 @@ function init() {
container.appendChild(renderer.domElement);

if (renderer.capabilities.isWebGL2 === false && renderer.extensions.has('ANGLE_instanced_arrays') === false) {
- document.getElementById('notSupported').style.display = '';
+ document.getElementById('notSupported')!.style.display = '';
return;
}

@@ -138,7 +138,7 @@ function animate() {
@@ -133,7 +133,7 @@ function animate() {
function render() {
const time = performance.now();

Expand All @@ -2704,10 +2695,10 @@ index adff12a..fb9267f 100644
object.rotation.y = time * 0.0005;
object.material.uniforms['time'].value = time * 0.005;
diff --git a/examples-testing/examples/webgl_buffergeometry_instancing_billboards.ts b/examples-testing/examples/webgl_buffergeometry_instancing_billboards.ts
index 785389c..64b3ee1 100644
index 6e2bec6..8483f82 100644
--- a/examples-testing/examples/webgl_buffergeometry_instancing_billboards.ts
+++ b/examples-testing/examples/webgl_buffergeometry_instancing_billboards.ts
@@ -2,16 +2,16 @@ import * as THREE from 'three';
@@ -2,10 +2,10 @@ import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';

Expand All @@ -2720,15 +2711,8 @@ index 785389c..64b3ee1 100644
+let geometry: THREE.InstancedBufferGeometry, material: THREE.RawShaderMaterial, mesh: THREE.Mesh;

function init() {
renderer = new THREE.WebGLRenderer();

if (renderer.capabilities.isWebGL2 === false && renderer.extensions.has('ANGLE_instanced_arrays') === false) {
- document.getElementById('notSupported').style.display = '';
+ document.getElementById('notSupported')!.style.display = '';
return false;
}

@@ -46,8 +46,8 @@ function init() {
container = document.createElement('div');
@@ -39,8 +39,8 @@ function init() {
map: { value: new THREE.TextureLoader().load('textures/sprites/circle.png') },
time: { value: 0.0 },
},
Expand All @@ -2740,7 +2724,7 @@ index 785389c..64b3ee1 100644
depthWrite: true,
});
diff --git a/examples-testing/examples/webgl_buffergeometry_instancing_interleaved.ts b/examples-testing/examples/webgl_buffergeometry_instancing_interleaved.ts
index 132e1e6..77ce657 100644
index 3a74763..eef5007 100644
--- a/examples-testing/examples/webgl_buffergeometry_instancing_interleaved.ts
+++ b/examples-testing/examples/webgl_buffergeometry_instancing_interleaved.ts
@@ -2,8 +2,8 @@ import * as THREE from 'three';
Expand All @@ -2763,15 +2747,6 @@ index 132e1e6..77ce657 100644

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);

@@ -112,7 +112,7 @@ function init() {
container.appendChild(renderer.domElement);

if (renderer.capabilities.isWebGL2 === false && renderer.extensions.has('ANGLE_instanced_arrays') === false) {
- document.getElementById('notSupported').style.display = '';
+ document.getElementById('notSupported')!.style.display = '';
return;
}

diff --git a/examples-testing/examples/webgl_buffergeometry_lines.ts b/examples-testing/examples/webgl_buffergeometry_lines.ts
index c23ea0c..705d08f 100644
--- a/examples-testing/examples/webgl_buffergeometry_lines.ts
Expand Down Expand Up @@ -4962,7 +4937,7 @@ index 9a19832..e47d7b6 100644
if (shape.holes && shape.holes.length > 0) {
for (let j = 0; j < shape.holes.length; j++) {
diff --git a/examples-testing/examples/webgl_gpgpu_birds.ts b/examples-testing/examples/webgl_gpgpu_birds.ts
index ecf53eb..4f865bd 100644
index 4c03ce3..2d272b8 100644
--- a/examples-testing/examples/webgl_gpgpu_birds.ts
+++ b/examples-testing/examples/webgl_gpgpu_birds.ts
@@ -3,7 +3,7 @@ import * as THREE from 'three';
Expand Down Expand Up @@ -5017,7 +4992,7 @@ index ecf53eb..4f865bd 100644

init();
animate();
@@ -168,12 +168,12 @@ function initComputeRenderer() {
@@ -164,12 +164,12 @@ function initComputeRenderer() {

velocityVariable = gpuCompute.addVariable(
'textureVelocity',
Expand All @@ -5032,7 +5007,7 @@ index ecf53eb..4f865bd 100644
dtPosition,
);

@@ -222,8 +222,8 @@ function initBirds() {
@@ -218,8 +218,8 @@ function initBirds() {
// THREE.ShaderMaterial
const material = new THREE.ShaderMaterial({
uniforms: birdUniforms,
Expand All @@ -5043,7 +5018,7 @@ index ecf53eb..4f865bd 100644
side: THREE.DoubleSide,
});

@@ -235,7 +235,7 @@ function initBirds() {
@@ -231,7 +231,7 @@ function initBirds() {
scene.add(birdMesh);
}

Expand All @@ -5052,7 +5027,7 @@ index ecf53eb..4f865bd 100644
const theArray = texture.image.data;

for (let k = 0, kl = theArray.length; k < kl; k += 4) {
@@ -250,7 +250,7 @@ function fillPositionTexture(texture) {
@@ -246,7 +246,7 @@ function fillPositionTexture(texture) {
}
}

Expand All @@ -5061,7 +5036,7 @@ index ecf53eb..4f865bd 100644
const theArray = texture.image.data;

for (let k = 0, kl = theArray.length; k < kl; k += 4) {
@@ -275,7 +275,7 @@ function onWindowResize() {
@@ -271,7 +271,7 @@ function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
}

Expand All @@ -5071,7 +5046,7 @@ index ecf53eb..4f865bd 100644

mouseX = event.clientX - windowHalfX;
diff --git a/examples-testing/examples/webgl_gpgpu_birds_gltf.ts b/examples-testing/examples/webgl_gpgpu_birds_gltf.ts
index 58aee4f..d66c36e 100644
index 18d5440..ce0db57 100644
--- a/examples-testing/examples/webgl_gpgpu_birds_gltf.ts
+++ b/examples-testing/examples/webgl_gpgpu_birds_gltf.ts
@@ -2,7 +2,7 @@ import * as THREE from 'three';
Expand Down Expand Up @@ -5193,7 +5168,7 @@ index 58aee4f..d66c36e 100644

function init() {
container = document.createElement('div');
@@ -216,12 +229,12 @@ function initComputeRenderer() {
@@ -212,12 +225,12 @@ function initComputeRenderer() {

velocityVariable = gpuCompute.addVariable(
'textureVelocity',
Expand All @@ -5208,7 +5183,7 @@ index 58aee4f..d66c36e 100644
dtPosition,
);

@@ -255,7 +268,7 @@ function initComputeRenderer() {
@@ -251,7 +264,7 @@ function initComputeRenderer() {
}
}

Expand All @@ -5217,7 +5192,7 @@ index 58aee4f..d66c36e 100644
const geometry = BirdGeometry;

const m = new THREE.MeshStandardMaterial({
@@ -335,7 +348,7 @@ function initBirds(effectController) {
@@ -331,7 +344,7 @@ function initBirds(effectController) {
scene.add(birdMesh);
}

Expand All @@ -5226,7 +5201,7 @@ index 58aee4f..d66c36e 100644
const theArray = texture.image.data;

for (let k = 0, kl = theArray.length; k < kl; k += 4) {
@@ -350,7 +363,7 @@ function fillPositionTexture(texture) {
@@ -346,7 +359,7 @@ function fillPositionTexture(texture) {
}
}

Expand All @@ -5235,7 +5210,7 @@ index 58aee4f..d66c36e 100644
const theArray = texture.image.data;

for (let k = 0, kl = theArray.length; k < kl; k += 4) {
@@ -375,7 +388,7 @@ function onWindowResize() {
@@ -371,7 +384,7 @@ function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
}

Expand All @@ -5245,7 +5220,7 @@ index 58aee4f..d66c36e 100644

mouseX = event.clientX - windowHalfX;
diff --git a/examples-testing/examples/webgl_gpgpu_protoplanet.ts b/examples-testing/examples/webgl_gpgpu_protoplanet.ts
index b1a7e02..35fb039 100644
index 13ea993..23481ee 100644
--- a/examples-testing/examples/webgl_gpgpu_protoplanet.ts
+++ b/examples-testing/examples/webgl_gpgpu_protoplanet.ts
@@ -4,22 +4,32 @@ import Stats from 'three/addons/libs/stats.module.js';
Expand Down Expand Up @@ -5290,7 +5265,7 @@ index b1a7e02..35fb039 100644

init();
animate();
@@ -86,12 +96,12 @@ function initComputeRenderer() {
@@ -82,12 +92,12 @@ function initComputeRenderer() {

velocityVariable = gpuCompute.addVariable(
'textureVelocity',
Expand All @@ -5305,7 +5280,7 @@ index b1a7e02..35fb039 100644
dtPosition,
);

@@ -157,8 +167,8 @@ function initProtoplanets() {
@@ -153,12 +163,10 @@ function initProtoplanets() {
// THREE.ShaderMaterial
const material = new THREE.ShaderMaterial({
uniforms: particleUniforms,
Expand All @@ -5315,8 +5290,12 @@ index b1a7e02..35fb039 100644
+ fragmentShader: document.getElementById('particleFragmentShader')!.textContent!,
});

material.extensions.drawBuffers = true;
@@ -170,7 +180,7 @@ function initProtoplanets() {
- material.extensions.drawBuffers = true;
-
const particles = new THREE.Points(geometry, material);
particles.matrixAutoUpdate = false;
particles.updateMatrix();
@@ -166,7 +174,7 @@ function initProtoplanets() {
scene.add(particles);
}

Expand All @@ -5325,7 +5304,7 @@ index b1a7e02..35fb039 100644
const posArray = texturePosition.image.data;
const velArray = textureVelocity.image.data;

@@ -267,7 +277,7 @@ function initGUI() {
@@ -263,7 +271,7 @@ function initGUI() {
folder2.open();
}

Expand All @@ -5335,7 +5314,7 @@ index b1a7e02..35fb039 100644
}

diff --git a/examples-testing/examples/webgl_gpgpu_water.ts b/examples-testing/examples/webgl_gpgpu_water.ts
index f9cce64..66cf7a7 100644
index fe78e10..015cc6d 100644
--- a/examples-testing/examples/webgl_gpgpu_water.ts
+++ b/examples-testing/examples/webgl_gpgpu_water.ts
@@ -3,7 +3,7 @@ import * as THREE from 'three';
Expand Down Expand Up @@ -5394,7 +5373,7 @@ index f9cce64..66cf7a7 100644
fragmentShader: THREE.ShaderChunk['meshphong_frag'],
});

@@ -175,7 +175,7 @@ function initWater() {
@@ -171,7 +171,7 @@ function initWater() {

heightmapVariable = gpuCompute.addVariable(
'heightmap',
Expand All @@ -5403,7 +5382,7 @@ index f9cce64..66cf7a7 100644
heightmap0,
);

@@ -193,13 +193,13 @@ function initWater() {
@@ -189,13 +189,13 @@ function initWater() {
}

// Create compute shader to smooth the water surface and velocity
Expand All @@ -5419,7 +5398,7 @@ index f9cce64..66cf7a7 100644
{
point1: { value: new THREE.Vector2() },
levelTexture: { value: null },
@@ -222,10 +222,10 @@ function initWater() {
@@ -218,10 +218,10 @@ function initWater() {
});
}

Expand All @@ -5432,7 +5411,7 @@ index f9cce64..66cf7a7 100644
let multR = waterMaxHeight;
let mult = 0.025;
let r = 0;
@@ -350,12 +350,12 @@ function onWindowResize() {
@@ -346,12 +346,12 @@ function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
}

Expand Down Expand Up @@ -9110,7 +9089,7 @@ index 2666d09..b284d9f 100644
if (texture.matrixAutoUpdate === true) {
texture.offset.set(API.offsetX, API.offsetY);
diff --git a/examples-testing/examples/webgl_materials_toon.ts b/examples-testing/examples/webgl_materials_toon.ts
index 2c491fe..72afff0 100644
index ea9b0b7..54fb0b4 100644
--- a/examples-testing/examples/webgl_materials_toon.ts
+++ b/examples-testing/examples/webgl_materials_toon.ts
@@ -4,13 +4,13 @@ import Stats from 'three/addons/libs/stats.module.js';
Expand Down Expand Up @@ -9140,7 +9119,7 @@ index 2c491fe..72afff0 100644
container = document.createElement('div');
document.body.appendChild(container);

@@ -80,7 +80,7 @@ function init(font) {
@@ -79,7 +79,7 @@ function init(font) {
}
}

Expand Down Expand Up @@ -9290,7 +9269,7 @@ index 26c7c13..5999082 100644
const texture = new THREE.VideoTexture(video);
texture.colorSpace = THREE.SRGBColorSpace;
diff --git a/examples-testing/examples/webgl_materials_wireframe.ts b/examples-testing/examples/webgl_materials_wireframe.ts
index 569afc6..ab307d8 100644
index 569afc6..6424e8c 100644
--- a/examples-testing/examples/webgl_materials_wireframe.ts
+++ b/examples-testing/examples/webgl_materials_wireframe.ts
@@ -8,7 +8,10 @@ const API = {
Expand All @@ -9305,7 +9284,7 @@ index 569afc6..ab307d8 100644

init();

@@ -50,8 +53,8 @@ function init() {
@@ -50,12 +53,11 @@ function init() {

const material2 = new THREE.ShaderMaterial({
uniforms: { thickness: { value: API.thickness } },
Expand All @@ -9316,7 +9295,11 @@ index 569afc6..ab307d8 100644
side: THREE.DoubleSide,
alphaToCoverage: true, // only works when WebGLRenderer's "antialias" is set to "true"
});
@@ -83,7 +86,7 @@ function init() {
- material2.extensions.derivatives = true;

mesh2 = new THREE.Mesh(geometry, material2);
mesh2.position.set(40, 0, 0);
@@ -83,7 +85,7 @@ function init() {
window.addEventListener('resize', onWindowResize);
}

Expand Down
2 changes: 1 addition & 1 deletion three.js
Open in desktop
Submodule three.js updated 81 files
+5 −8 docs/api/ar/constants/Textures.html
+1 −1 docs/api/ar/core/Uniform.html
+0 −4 docs/api/ar/materials/ShaderMaterial.html
+1 −3 docs/api/ar/objects/SkinnedMesh.html
+0 −47 docs/api/ar/renderers/WebGL1Renderer.html
+5 −11 docs/api/en/constants/Textures.html
+1 −1 docs/api/en/core/Uniform.html
+1 −6 docs/api/en/materials/ShaderMaterial.html
+1 −3 docs/api/en/objects/SkinnedMesh.html
+0 −48 docs/api/en/renderers/WebGL1Renderer.html
+1 −2 docs/api/en/renderers/WebGLRenderTarget.html
+1 −2 docs/api/en/textures/Data3DTexture.html
+1 −2 docs/api/en/textures/DataArrayTexture.html
+1 −3 docs/api/en/textures/DepthTexture.html
+0 −8 docs/api/fr/constants/Textures.html
+2 −6 docs/api/fr/materials/ShaderMaterial.html
+4 −11 docs/api/it/constants/Textures.html
+1 −1 docs/api/it/core/Uniform.html
+2 −6 docs/api/it/materials/ShaderMaterial.html
+1 −3 docs/api/it/objects/SkinnedMesh.html
+0 −52 docs/api/it/renderers/WebGL1Renderer.html
+1 −1 docs/api/it/textures/Data3DTexture.html
+0 −1 docs/api/it/textures/DataArrayTexture.html
+0 −2 docs/api/it/textures/DepthTexture.html
+0 −7 docs/api/ko/constants/Textures.html
+1 −1 docs/api/ko/core/Uniform.html
+0 −8 docs/api/pt-br/constants/Textures.html
+0 −8 docs/api/zh/constants/Textures.html
+1 −1 docs/api/zh/core/Uniform.html
+1 −6 docs/api/zh/materials/ShaderMaterial.html
+1 −3 docs/api/zh/objects/SkinnedMesh.html
+0 −52 docs/api/zh/renderers/WebGL1Renderer.html
+1 −1 docs/api/zh/renderers/WebGLRenderTarget.html
+1 −1 docs/api/zh/textures/Data3DTexture.html
+1 −1 docs/api/zh/textures/DataArrayTexture.html
+0 −1 docs/api/zh/textures/DepthTexture.html
+0 −5 docs/list.json
+2 −6 examples/jsm/loaders/KTX2Loader.js
+0 −6 examples/jsm/misc/GPUComputationRenderer.js
+0 −3 examples/jsm/postprocessing/GlitchPass.js
+0 −3 examples/jsm/postprocessing/SSAOPass.js
+1 −1 examples/jsm/renderers/webgl/utils/WebGLUtils.js
+1 −3 examples/webaudio_visualizer.html
+0 −7 examples/webgl_buffergeometry_instancing.html
+1 −9 examples/webgl_buffergeometry_instancing_billboards.html
+0 −7 examples/webgl_buffergeometry_instancing_interleaved.html
+1 −10 examples/webgl_depth_texture.html
+0 −6 examples/webgl_gpgpu_birds.html
+0 −6 examples/webgl_gpgpu_birds_gltf.html
+0 −6 examples/webgl_gpgpu_protoplanet.html
+0 −6 examples/webgl_gpgpu_water.html
+1 −2 examples/webgl_materials_toon.html
+4 −13 examples/webgl_postprocessing_3dlut.html
+0 −1 src/Three.js
+0 −2 src/constants.js
+0 −4 src/materials/ShaderMaterial.js
+0 −7 src/renderers/WebGL1Renderer.js
+33 −93 src/renderers/WebGLRenderer.js
+1 −1 src/renderers/shaders/ShaderChunk/logdepthbuf_fragment.glsl.js
+1 −1 src/renderers/shaders/ShaderChunk/logdepthbuf_pars_fragment.glsl.js
+2 −10 src/renderers/shaders/ShaderChunk/logdepthbuf_pars_vertex.glsl.js
+2 −16 src/renderers/shaders/ShaderChunk/logdepthbuf_vertex.glsl.js
+6 −33 src/renderers/webgl/WebGLAttributes.js
+14 −51 src/renderers/webgl/WebGLBindingStates.js
+3 −25 src/renderers/webgl/WebGLBufferRenderer.js
+2 −12 src/renderers/webgl/WebGLCapabilities.js
+3 −19 src/renderers/webgl/WebGLExtensions.js
+3 −25 src/renderers/webgl/WebGLIndexedBufferRenderer.js
+6 −32 src/renderers/webgl/WebGLLights.js
+79 −217 src/renderers/webgl/WebGLMorphtargets.js
+18 −45 src/renderers/webgl/WebGLProgram.js
+20 −32 src/renderers/webgl/WebGLPrograms.js
+5 −5 src/renderers/webgl/WebGLRenderStates.js
+15 −59 src/renderers/webgl/WebGLState.js
+65 −236 src/renderers/webgl/WebGLTextures.js
+1 −1 src/renderers/webgl/WebGLUniformsGroups.js
+4 −57 src/renderers/webgl/WebGLUtils.js
+2 −2 src/renderers/webxr/WebXRManager.js
+0 −2 test/unit/src/constants.tests.js
+0 −39 test/unit/src/renderers/WebGL1Renderer.tests.js
+0 −1 test/unit/three.source.unit.js
1 change: 0 additions & 1 deletion types/three/src/Three.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,6 @@ export * from "./renderers/webgl/WebGLTextures.js";
export * from "./renderers/webgl/WebGLUniforms.js";
export * from "./renderers/webgl/WebGLUniformsGroups.js";
export { WebGLUtils } from "./renderers/webgl/WebGLUtils.js";
export * from "./renderers/WebGL1Renderer.js";
export * from "./renderers/WebGL3DRenderTarget.js";
export * from "./renderers/WebGLArrayRenderTarget.js";
export * from "./renderers/WebGLCubeRenderTarget.js";
Expand Down
Loading