Skeleton: Add computeBoneTexture(). (#21829)

docs/api/en/objects/Skeleton.html

@@ -91,15 +91,15 @@
 		Returns a clone of this Skeleton object.
 		</p>
 
-
 		<h3>[method:null calculateInverses]()</h3>
 		<p>Generates the [page:.boneInverses boneInverses] array if not provided in the constructor.</p>
 
+		<h3>[method:null computeBoneTexture]()</h3>
+		<p>Computes an instance of [page:DataTexture] in order to pass the bone data more efficiently to the shader. The texture is assigned to [page:.boneTexture boneTexture].</p>
 
 		<h3>[method:null pose]()</h3>
 		<p>Returns the skeleton to the base pose.</p>
 
-
 		<h3>[method:null update]()</h3>
 		<p>
 		Updates the [page:Float32Array boneMatrices] and [page:DataTexture boneTexture] after changing the bones.

docs/api/zh/objects/Skeleton.html

@@ -88,16 +88,16 @@
 			返回一个当前Skeleton对象的克隆。
 		</p>
 
-
 		<h3>[method:null calculateInverses]()</h3>
 		<p>如果没有在构造器中提供，生成[page:.boneInverses boneInverses]数组。
 		</p>
 
+		<h3>[method:null computeBoneTexture]()</h3>
+		<p>Computes an instance of [page:DataTexture] in order to pass the bone data more efficiently to the shader. The texture is assigned to [page:.boneTexture boneTexture].</p>
 
 		<h3>[method:null pose]()</h3>
 		<p>返回骨架的基础姿势。</p>
 
-
 		<h3>[method:null update]()</h3>
 		<p>
 			在改变骨骼后，更新[page:Float32Array boneMatrices] 和 [page:DataTexture boneTexture]的值。

src/objects/Skeleton.js

@@ -1,5 +1,10 @@
+import {
+	RGBAFormat,
+	FloatType
+} from '../constants.js';
 import { Bone } from './Bone.js';
 import { Matrix4 } from '../math/Matrix4.js';
+import { DataTexture } from '../textures/DataTexture.js';
 import * as MathUtils from '../math/MathUtils.js';
 
 const _offsetMatrix = /*@__PURE__*/ new Matrix4();
@@ -156,6 +161,32 @@ class Skeleton {
 
 	}
 
+	computeBoneTexture() {
+
+		// layout (1 matrix = 4 pixels)
+		//      RGBA RGBA RGBA RGBA (=> column1, column2, column3, column4)
+		//  with  8x8  pixel texture max   16 bones * 4 pixels =  (8 * 8)
+		//       16x16 pixel texture max   64 bones * 4 pixels = (16 * 16)
+		//       32x32 pixel texture max  256 bones * 4 pixels = (32 * 32)
+		//       64x64 pixel texture max 1024 bones * 4 pixels = (64 * 64)
+
+		let size = Math.sqrt( this.bones.length * 4 ); // 4 pixels needed for 1 matrix
+		size = MathUtils.ceilPowerOfTwo( size );
+		size = Math.max( size, 4 );
+
+		const boneMatrices = new Float32Array( size * size * 4 ); // 4 floats per RGBA pixel
+		boneMatrices.set( this.boneMatrices ); // copy current values
+
+		const boneTexture = new DataTexture( boneMatrices, size, size, RGBAFormat, FloatType );
+
+		this.boneMatrices = boneMatrices;
+		this.boneTexture = boneTexture;
+		this.boneTextureSize = size;
+
+		return this;
+
+	}
+
 	getBoneByName( name ) {
 
 		for ( let i = 0, il = this.bones.length; i < il; i ++ ) {

src/renderers/WebGLRenderer.js

@@ -6,8 +6,6 @@ import {
 	LinearEncoding,
 	NoToneMapping
 } from '../constants.js';
-import * as MathUtils from '../math/MathUtils.js';
-import { DataTexture } from '../textures/DataTexture.js';
 import { Frustum } from '../math/Frustum.js';
 import { Matrix4 } from '../math/Matrix4.js';
 import { Vector2 } from '../math/Vector2.js';
@@ -1648,34 +1646,9 @@ function WebGLRenderer( parameters ) {
 
 			if ( skeleton ) {
 
-				const bones = skeleton.bones;
-
 				if ( capabilities.floatVertexTextures ) {
 
-					if ( skeleton.boneTexture === null ) {
-
-						// layout (1 matrix = 4 pixels)
-						//      RGBA RGBA RGBA RGBA (=> column1, column2, column3, column4)
-						//  with  8x8  pixel texture max   16 bones * 4 pixels =  (8 * 8)
-						//       16x16 pixel texture max   64 bones * 4 pixels = (16 * 16)
-						//       32x32 pixel texture max  256 bones * 4 pixels = (32 * 32)
-						//       64x64 pixel texture max 1024 bones * 4 pixels = (64 * 64)
-
-
-						let size = Math.sqrt( bones.length * 4 ); // 4 pixels needed for 1 matrix
-						size = MathUtils.ceilPowerOfTwo( size );
-						size = Math.max( size, 4 );
-
-						const boneMatrices = new Float32Array( size * size * 4 ); // 4 floats per RGBA pixel
-						boneMatrices.set( skeleton.boneMatrices ); // copy current values
-
-						const boneTexture = new DataTexture( boneMatrices, size, size, RGBAFormat, FloatType );
-
-						skeleton.boneMatrices = boneMatrices;
-						skeleton.boneTexture = boneTexture;
-						skeleton.boneTextureSize = size;
-
-					}
+					if ( skeleton.boneTexture === null ) skeleton.computeBoneTexture();
 
 					p_uniforms.setValue( _gl, 'boneTexture', skeleton.boneTexture, textures );
 					p_uniforms.setValue( _gl, 'boneTextureSize', skeleton.boneTextureSize );