How to use the InterleavedBuffer function from three
Find comprehensive JavaScript three.InterleavedBuffer code examples handpicked from public code repositorys.
three.InterleavedBuffer is a JavaScript class in the Three.js library that represents an interleaved buffer of typed array data, with customizable attribute layout and access methods.
1670 1671 1672 1673 1674 1675 1676 1677 1678ibSlice * byteStride, (accessorDef.count * byteStride) / elementBytes ); // Integer parameters to IB/IBA are in array elements, not bytes. ib = new THREE.InterleavedBuffer(array, byteStride / elementBytes); parser.cache.add(ibCacheKey, ib); }
3
7
8+ 14 other calls in file
2633 2634 2635 2636 2637 2638 2639 2640 2641 2642const normalized = accessorDef.normalized === true; let array, bufferAttribute; // The buffer is not interleaved if the stride is the item size in bytes. if ( byteStride && byteStride !== itemBytes ) { // Each "slice" of the buffer, as defined by 'count' elements of 'byteStride' bytes, gets its own THREE.InterleavedBuffer // This makes sure that IBA.count reflects accessor.count properly const ibSlice = Math.floor( byteOffset / byteStride ); const ibCacheKey = 'InterleavedBuffer:' + accessorDef.bufferView + ':' + accessorDef.componentType + ':' + ibSlice + ':' + accessorDef.count; let ib = parser.cache.get( ibCacheKey );
2100+ 3 other calls in file
How does three.InterleavedBuffer work?
three.InterleavedBuffer works by representing an interleaved buffer of typed array data, with customizable attribute layout and access methods. When instantiated, three.InterleavedBuffer creates a new buffer object that can be used to store and manipulate typed array data, such as vertices, colors, or normals in a 3D object. The buffer object is represented by a single typed array, which stores the data in a layout that interleaves multiple attribute arrays, such as vertex positions, normals, and texture coordinates. The interleaved layout of the buffer data provides various benefits, such as reducing memory usage and increasing cache locality, and allowing for more efficient data access and manipulation. The attribute layout can be customized using the three.InterleavedBufferAttribute class, which allows for specifying the attribute offset, stride, and data type. The buffer data can be accessed using various methods provided by the three.InterleavedBuffer class, such as set, get, and setArray, which allow for setting or getting individual or multiple attributes at once. The buffer data can also be uploaded to the GPU memory using the needsUpdate flag, which signals Three.js to re-upload the data when rendering the object. Once the interleaved buffer data is created and configured, it can be used to create Three.js geometry or mesh objects, which use the buffer data to define their shape, color, and texture. The buffer data can also be manipulated or transformed using matrix operations or shader programs, to create various visual effects or animations. Note that three.InterleavedBuffer is part of the Three.js library, which provides a set of tools and utilities for creating and rendering 3D scenes in JavaScript, and supports various data structures, geometries, materials, and shaders.
362 363 364 365 366 367 368 369 370 371stride += attribute.itemSize; } // Create the set of buffer attributes const interleavedBuffer = new THREE.InterleavedBuffer( new TypedArray( arrayLength ), stride ); let offset = 0; const res = []; const getters = [ 'getX', 'getY', 'getZ', 'getW' ]; const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
2100
1722 1723 1724 1725 1726 1727 1728 1729 1730 1731const ibSlice = Math.floor(byteOffset / byteStride); const ibCacheKey = 'InterleavedBuffer:' + accessorDef.bufferView + ':' + accessorDef.componentType + ':' + ibSlice + ':' + accessorDef.count; let ib = parser.cache.get(ibCacheKey); if (!ib) { array = new TypedArray(bufferView, ibSlice * byteStride, accessorDef.count * byteStride / elementBytes); ib = new three.InterleavedBuffer(array, byteStride / elementBytes); parser.cache.add(ibCacheKey, ib); } bufferAttribute = new three.InterleavedBufferAttribute(ib, itemSize, (byteOffset % byteStride) / elementBytes, normalized); }
270Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27const THREE = require("three"); const position = new THREE.InterleavedBuffer( new Float32Array([0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1]), 3 ); const color = new THREE.InterleavedBuffer( new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1]), 3 ); const geometry = new THREE.BufferGeometry(); geometry.setAttribute( "position", new THREE.InterleavedBufferAttribute(position, 3, 0, false) ); geometry.setAttribute( "color", new THREE.InterleavedBufferAttribute(color, 3, 0, false) ); const material = new THREE.PointsMaterial({ vertexColors: true }); const mesh = new THREE.Points(geometry, material);
In this example, we first import the Three.js library and create two interleaved buffers of typed array data, representing vertex positions and colors for a 3D point cloud. Each buffer is created with a Float32Array representing the data, and a stride of 3 indicating that each attribute element consists of three values (x, y, and z for positions, and r, g, and b for colors). We then create a new THREE.BufferGeometry object to define the geometry of the point cloud, and add two attributes to it using the THREE.InterleavedBufferAttribute class, which specifies the corresponding interleaved buffer, attribute size, offset, and normalization. We also create a THREE.PointsMaterial object with vertex colors enabled, and create a THREE.Points object using the geometry and material. The resulting point cloud will consist of four vertices at the origin, (1, 0, 0), (0, 1, 0), and (0, 0, 1), with colors red, green, blue, and white, respectively. Note that this is just a simple example, and three.InterleavedBuffer can be used to create more complex and customized geometries or meshes, such as triangles, lines, or custom shapes, by manipulating the interleaved buffer data and the corresponding attribute layouts.
230 231 232 233 234 235 236 237 238 239} arrayLength += attribute.array.length; stride += attribute.itemSize; } // Create the set of buffer attributes const interleavedBuffer = new three_1.InterleavedBuffer(new TypedArray(arrayLength), stride); let offset = 0; const res = []; const getters = ['getX', 'getY', 'getZ', 'getW']; const setters = ['setX', 'setY', 'setZ', 'setW'];
130264 265 266 267 268 269 270 271 272 273-1, -1, 0, 0, 0, 1, -1, 0, 1, 0, 1, 1, 0, 1, 1, -1, 1, 0, 0, 1 ]); const interleavedBuffer = new three_1.InterleavedBuffer(float32Array, 5); geometry.setIndex([0, 1, 2, 0, 2, 3]); geometry.setAttribute('position', new three_1.InterleavedBufferAttribute(interleavedBuffer, 3, 0, false)); geometry.setAttribute('uv', new three_1.InterleavedBufferAttribute(interleavedBuffer, 2, 3, false)); return geometry;
130772 773 774 775 776 777 778 779 780 781// The buffer is not interleaved if the stride is the item size in bytes. if (accessor.byteStride && accessor.byteStride !== elementBytes * itemSize) { // Use the full buffer if it's interleaved. var array = new TypedArray(arraybuffer); // Integer parameters to IB/IBA are in array elements, not bytes. var ib = new THREE.InterleavedBuffer(array, accessor.byteStride / elementBytes); return new THREE.InterleavedBufferAttribute(ib, itemSize, accessor.byteOffset / elementBytes); } else { array = new TypedArray(arraybuffer, accessor.byteOffset, accessor.count * itemSize); return new THREE.BufferAttribute(array, itemSize);
010+ 9 other calls in file
GitHub: VeinKowal/veins
1844 1845 1846 1847 1848 1849 1850 1851 1852 1853var ib = parser.cache.get(ibCacheKey); if (!ib) { array = new TypedArray(bufferView, ibSlice * byteStride, accessorDef.count * byteStride / elementBytes); // Integer parameters to IB/IBA are in array elements, not bytes. ib = new _three.InterleavedBuffer(array, byteStride / elementBytes); parser.cache.add(ibCacheKey, ib); } bufferAttribute = new _three.InterleavedBufferAttribute(ib, itemSize, byteOffset % byteStride / elementBytes, normalized);
010GitHub: blitzher/p6-drones
1752 1753 1754 1755 1756 1757 1758 1759 1760ibSlice * byteStride, (accessorDef.count * byteStride) / elementBytes ); // Integer parameters to IB/IBA are in array elements, not bytes. ib = new THREE.InterleavedBuffer( array, byteStride / elementBytes );
001+ 61 other calls in file
367 368 369 370 371 372 373 374 375 3761, - 1, 0, 1, 0, 1, 1, 0, 1, 1, - 1, 1, 0, 0, 1 ]); var interleavedBuffer = new THREE.InterleavedBuffer(float32Array, 5); geometry.setIndex([0, 1, 2, 0, 2, 3]); geometry.addAttribute('position', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0, false)); geometry.addAttribute('uv', new THREE.InterleavedBufferAttribute(interleavedBuffer, 2, 3, false));
000
three.Vector3 is the most popular function in three (22341 examples)