diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index 1792b458e..183f9078d 100644 --- a/examples-testing/changes.patch +++ b/examples-testing/changes.patch @@ -2241,6 +2241,195 @@ index 75ccf8d..35d06e4 100644 renderer.render(scene, camera); } +diff --git a/examples-testing/examples/webgl_buffergeometry.ts b/examples-testing/examples/webgl_buffergeometry.ts +index 42a9c31..ad80640 100644 +--- a/examples-testing/examples/webgl_buffergeometry.ts ++++ b/examples-testing/examples/webgl_buffergeometry.ts +@@ -2,17 +2,17 @@ import * as THREE from 'three'; + + import Stats from 'three/addons/libs/stats.module.js'; + +-let container, stats; ++let container: HTMLElement, stats: Stats; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + +-let mesh; ++let mesh: THREE.Mesh; + + init(); + animate(); + + function init() { +- container = document.getElementById('container'); ++ container = document.getElementById('container')!; + + // + +@@ -117,8 +117,8 @@ function init() { + colors.push(color.r, color.g, color.b, alpha); + } + +- function disposeArray() { +- this.array = null; ++ function disposeArray(this: THREE.BufferAttribute) { ++ this.array = null as unknown as THREE.TypedArray; + } + + geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3).onUpload(disposeArray)); +diff --git a/examples-testing/examples/webgl_buffergeometry_custom_attributes_particles.ts b/examples-testing/examples/webgl_buffergeometry_custom_attributes_particles.ts +index 94c862c..653cf2b 100644 +--- a/examples-testing/examples/webgl_buffergeometry_custom_attributes_particles.ts ++++ b/examples-testing/examples/webgl_buffergeometry_custom_attributes_particles.ts +@@ -2,9 +2,11 @@ import * as THREE from 'three'; + + import Stats from 'three/addons/libs/stats.module.js'; + +-let renderer, scene, camera, stats; ++let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera, stats: Stats; + +-let particleSystem, uniforms, geometry; ++let particleSystem: THREE.Points, ++ uniforms: { pointTexture: THREE.IUniform }, ++ geometry: THREE.BufferGeometry; + + const particles = 100000; + +@@ -23,8 +25,8 @@ function init() { + + const shaderMaterial = new THREE.ShaderMaterial({ + uniforms: uniforms, +- vertexShader: document.getElementById('vertexshader').textContent, +- fragmentShader: document.getElementById('fragmentshader').textContent, ++ vertexShader: document.getElementById('vertexshader')!.textContent!, ++ fragmentShader: document.getElementById('fragmentshader')!.textContent!, + + blending: THREE.AdditiveBlending, + depthTest: false, +@@ -67,7 +69,7 @@ function init() { + renderer.setSize(window.innerWidth, window.innerHeight); + renderer.useLegacyLights = false; + +- const container = document.getElementById('container'); ++ const container = document.getElementById('container')!; + container.appendChild(renderer.domElement); + + stats = new Stats(); +diff --git a/examples-testing/examples/webgl_buffergeometry_drawrange.ts b/examples-testing/examples/webgl_buffergeometry_drawrange.ts +index 58e4dd1..915d687 100644 +--- a/examples-testing/examples/webgl_buffergeometry_drawrange.ts ++++ b/examples-testing/examples/webgl_buffergeometry_drawrange.ts +@@ -5,15 +5,15 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + +-let group; +-let container, stats; +-const particlesData = []; +-let camera, scene, renderer; +-let positions, colors; +-let particles; +-let pointCloud; +-let particlePositions; +-let linesMesh; ++let group: THREE.Group; ++let container: HTMLElement, stats: Stats; ++const particlesData: { velocity: THREE.Vector3; numConnections: number }[] = []; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; ++let positions: Float32Array, colors: Float32Array; ++let particles: THREE.BufferGeometry; ++let pointCloud: THREE.Points; ++let particlePositions: Float32Array; ++let linesMesh: THREE.LineSegments; + + const maxParticleCount = 1000; + let particleCount = 500; +@@ -35,16 +35,16 @@ animate(); + function initGUI() { + const gui = new GUI(); + +- gui.add(effectController, 'showDots').onChange(function (value) { ++ gui.add(effectController, 'showDots').onChange(function (value: boolean) { + pointCloud.visible = value; + }); +- gui.add(effectController, 'showLines').onChange(function (value) { ++ gui.add(effectController, 'showLines').onChange(function (value: boolean) { + linesMesh.visible = value; + }); + gui.add(effectController, 'minDistance', 10, 300); + gui.add(effectController, 'limitConnections'); + gui.add(effectController, 'maxConnections', 0, 30, 1); +- gui.add(effectController, 'particleCount', 0, maxParticleCount, 1).onChange(function (value) { ++ gui.add(effectController, 'particleCount', 0, maxParticleCount, 1).onChange(function (value: string) { + particleCount = parseInt(value); + particles.setDrawRange(0, particleCount); + }); +@@ -53,7 +53,7 @@ function initGUI() { + function init() { + initGUI(); + +- container = document.getElementById('container'); ++ container = document.getElementById('container')!; + + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000); + camera.position.z = 1750; +diff --git a/examples-testing/examples/webgl_buffergeometry_glbufferattribute.ts b/examples-testing/examples/webgl_buffergeometry_glbufferattribute.ts +index f62c733..06f84e6 100644 +--- a/examples-testing/examples/webgl_buffergeometry_glbufferattribute.ts ++++ b/examples-testing/examples/webgl_buffergeometry_glbufferattribute.ts +@@ -2,11 +2,11 @@ import * as THREE from 'three'; + + import Stats from 'three/addons/libs/stats.module.js'; + +-let container, stats; ++let container: HTMLElement, stats: Stats; + +-let camera, scene, renderer; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer; + +-let points; ++let points: THREE.Points, THREE.PointsMaterial>; + + const particles = 300000; + let drawCount = 10000; +@@ -15,7 +15,7 @@ init(); + animate(); + + function init() { +- container = document.getElementById('container'); ++ container = document.getElementById('container')!; + + // + +@@ -37,7 +37,7 @@ function init() { + + // + +- const geometry = new THREE.BufferGeometry(); ++ const geometry = new THREE.BufferGeometry(); + + const positions = []; + const positions2 = []; +@@ -71,15 +71,15 @@ function init() { + + const gl = renderer.getContext(); + +- const pos = gl.createBuffer(); ++ const pos = gl.createBuffer()!; + gl.bindBuffer(gl.ARRAY_BUFFER, pos); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); + +- const pos2 = gl.createBuffer(); ++ const pos2 = gl.createBuffer()!; + gl.bindBuffer(gl.ARRAY_BUFFER, pos2); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions2), gl.STATIC_DRAW); + +- const rgb = gl.createBuffer(); ++ const rgb = gl.createBuffer()!; + gl.bindBuffer(gl.ARRAY_BUFFER, rgb); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); + diff --git a/examples-testing/examples/webgl_furnace_test.ts b/examples-testing/examples/webgl_furnace_test.ts index f746f2e..143dc67 100644 --- a/examples-testing/examples/webgl_furnace_test.ts diff --git a/examples-testing/index.js b/examples-testing/index.js index 5089c2298..dfd81dd67 100644 --- a/examples-testing/index.js +++ b/examples-testing/index.js @@ -262,11 +262,11 @@ const files = { 'webgl_postprocessing_unreal_bloom_selective', ], 'webgl / advanced': [ - // 'webgl_buffergeometry', + 'webgl_buffergeometry', // 'webgl_buffergeometry_compression', - // 'webgl_buffergeometry_custom_attributes_particles', - // 'webgl_buffergeometry_drawrange', - // 'webgl_buffergeometry_glbufferattribute', + 'webgl_buffergeometry_custom_attributes_particles', + 'webgl_buffergeometry_drawrange', + 'webgl_buffergeometry_glbufferattribute', // 'webgl_buffergeometry_indexed', // 'webgl_buffergeometry_instancing', // 'webgl_buffergeometry_instancing_billboards', diff --git a/types/three/OTHER_FILES.txt b/types/three/OTHER_FILES.txt index 228916b45..a434d6d1b 100644 --- a/types/three/OTHER_FILES.txt +++ b/types/three/OTHER_FILES.txt @@ -41,6 +41,7 @@ examples/jsm/interactive/InteractiveGroup.d.ts examples/jsm/interactive/SelectionBox.d.ts examples/jsm/interactive/SelectionHelper.d.ts examples/jsm/libs/meshopt_decoder.module.d.ts +examples/jsm/libs/stats.module.d.ts examples/jsm/lights/LightProbeGenerator.d.ts examples/jsm/lines/Wireframe.d.ts examples/jsm/lines/WireframeGeometry2.d.ts diff --git a/types/three/src/helpers/BoxHelper.d.ts b/types/three/src/helpers/BoxHelper.d.ts index bc7b6feab..275f22fb1 100644 --- a/types/three/src/helpers/BoxHelper.d.ts +++ b/types/three/src/helpers/BoxHelper.d.ts @@ -1,6 +1,8 @@ import { ColorRepresentation } from '../math/Color.js'; -import { Object3D } from './../core/Object3D.js'; -import { LineSegments } from './../objects/LineSegments.js'; +import { Object3D } from '../core/Object3D.js'; +import { LineSegments } from '../objects/LineSegments.js'; +import { BufferGeometry } from '../core/BufferGeometry.js'; +import { LineBasicMaterial } from '../materials/LineBasicMaterial.js'; /** * Helper object to graphically show the world-axis-aligned bounding box around an object @@ -21,7 +23,7 @@ import { LineSegments } from './../objects/LineSegments.js'; * @see {@link https://threejs.org/docs/index.html#api/en/helpers/BoxHelper | Official Documentation} * @see {@link https://github.com/mrdoob/three.js/blob/master/src/helpers/BoxHelper.js | Source} */ -export class BoxHelper extends LineSegments { +export class BoxHelper extends LineSegments { /** * Creates a new wireframe box that bounds the passed object * @remarks diff --git a/types/three/test/integration/three-examples/webgl_buffergeometry_glbufferattribute.ts b/types/three/test/integration/three-examples/webgl_buffergeometry_glbufferattribute.ts deleted file mode 100644 index 6150243fd..000000000 --- a/types/three/test/integration/three-examples/webgl_buffergeometry_glbufferattribute.ts +++ /dev/null @@ -1,148 +0,0 @@ -import * as THREE from 'three'; - -import Stats from 'three/examples/jsm/libs/stats.module.js'; - -let container: HTMLElement; -let stats: Stats; - -let camera: THREE.PerspectiveCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; - -let points: THREE.Points>; - -const particles = 300000; -let drawCount = 10000; - -init(); -animate(); - -function init() { - container = document.getElementById('container')!; - - // - - renderer = new THREE.WebGLRenderer({ antialias: false }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); - - container.appendChild(renderer.domElement); - - // - - camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500); - camera.position.z = 2750; - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0x050505); - scene.fog = new THREE.Fog(0x050505, 2000, 3500); - - // - - const geometry = new THREE.BufferGeometry(); - - const positions = []; - const positions2 = []; - const colors = []; - - const color = new THREE.Color(); - - const n = 1000; - const n2 = n / 2; // particles spread in the cube - - for (let i = 0; i < particles; i++) { - // positions - - const x = Math.random() * n - n2; - const y = Math.random() * n - n2; - const z = Math.random() * n - n2; - - positions.push(x, y, z); - positions2.push(z * 0.3, x * 0.3, y * 0.3); - - // colors - - const vx = x / n + 0.5; - const vy = y / n + 0.5; - const vz = z / n + 0.5; - - color.setRGB(vx, vy, vz); - - colors.push(color.r, color.g, color.b); - } - - const gl = renderer.getContext(); - - const pos = gl.createBuffer()!; - gl.bindBuffer(gl.ARRAY_BUFFER, pos); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); - - const pos2 = gl.createBuffer()!; - gl.bindBuffer(gl.ARRAY_BUFFER, pos2); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions2), gl.STATIC_DRAW); - - const rgb = gl.createBuffer()!; - gl.bindBuffer(gl.ARRAY_BUFFER, rgb); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); - - const posAttr1 = new THREE.GLBufferAttribute(pos, gl.FLOAT, 3, 4, particles); - const posAttr2 = new THREE.GLBufferAttribute(pos2, gl.FLOAT, 3, 4, particles); - geometry.setAttribute('position', posAttr1); - - setInterval(() => { - const attr = geometry.getAttribute('position'); - - geometry.setAttribute('position', attr === posAttr1 ? posAttr2 : posAttr1); - }, 2000); - - geometry.setAttribute('color', new THREE.GLBufferAttribute(rgb, gl.FLOAT, 3, 4, particles)); - - // - - const material = new THREE.PointsMaterial({ size: 15, vertexColors: true }); - - points = new THREE.Points(geometry, material); - - // Choose one: - // geometry.boundingSphere = ( new THREE.Sphere() ).set( new THREE.Vector3(), Infinity ); - points.frustumCulled = false; - - scene.add(points); - - // - - stats = new Stats(); - container.appendChild(stats.dom); - - // - - window.addEventListener('resize', onWindowResize); -} - -function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); -} - -// - -function animate() { - requestAnimationFrame(animate); - - render(); - stats.update(); -} - -function render() { - drawCount = (Math.max(5000, drawCount) + Math.floor(500 * Math.random())) % particles; - points.geometry.setDrawRange(0, drawCount); - - const time = Date.now() * 0.001; - - points.rotation.x = time * 0.1; - points.rotation.y = time * 0.2; - - renderer.render(scene, camera); -} diff --git a/types/three/tsconfig.json b/types/three/tsconfig.json index 7ddf99c41..77af1fda9 100644 --- a/types/three/tsconfig.json +++ b/types/three/tsconfig.json @@ -23,7 +23,6 @@ "test/integration/nodes-webgl.ts", "test/integration/objects-reflector.ts", "test/integration/three-examples/webgl2_rendertarget_texture2darray.ts", - "test/integration/three-examples/webgl_buffergeometry_glbufferattribute.ts", "test/integration/three-examples/webgl_buffergeometry_instancing_interleaved.ts", "test/integration/three-examples/webgl_camera.ts", "test/integration/three-examples/webgl_camera_array.ts",