WebGLMorphtargets.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. import { FloatType, RGBAFormat } from '../../constants.js';
  2. import { DataArrayTexture } from '../../textures/DataArrayTexture.js';
  3. import { Vector4 } from '../../math/Vector4.js';
  4. import { Vector2 } from '../../math/Vector2.js';
  5. function numericalSort( a, b ) {
  6. return a[ 0 ] - b[ 0 ];
  7. }
  8. function absNumericalSort( a, b ) {
  9. return Math.abs( b[ 1 ] ) - Math.abs( a[ 1 ] );
  10. }
  11. function denormalize( morph, attribute ) {
  12. let denominator = 1;
  13. const array = attribute.isInterleavedBufferAttribute ? attribute.data.array : attribute.array;
  14. if ( array instanceof Int8Array ) denominator = 127;
  15. else if ( array instanceof Int16Array ) denominator = 32767;
  16. else if ( array instanceof Int32Array ) denominator = 2147483647;
  17. else console.error( 'THREE.WebGLMorphtargets: Unsupported morph attribute data type: ', array );
  18. morph.divideScalar( denominator );
  19. }
  20. function WebGLMorphtargets( gl, capabilities, textures ) {
  21. const influencesList = {};
  22. const morphInfluences = new Float32Array( 8 );
  23. const morphTextures = new WeakMap();
  24. const morph = new Vector4();
  25. const workInfluences = [];
  26. for ( let i = 0; i < 8; i ++ ) {
  27. workInfluences[ i ] = [ i, 0 ];
  28. }
  29. function update( object, geometry, material, program ) {
  30. const objectInfluences = object.morphTargetInfluences;
  31. if ( capabilities.isWebGL2 === true ) {
  32. // instead of using attributes, the WebGL 2 code path encodes morph targets
  33. // into an array of data textures. Each layer represents a single morph target.
  34. const morphAttribute = geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color;
  35. const morphTargetsCount = ( morphAttribute !== undefined ) ? morphAttribute.length : 0;
  36. let entry = morphTextures.get( geometry );
  37. if ( entry === undefined || entry.count !== morphTargetsCount ) {
  38. if ( entry !== undefined ) entry.texture.dispose();
  39. const hasMorphPosition = geometry.morphAttributes.position !== undefined;
  40. const hasMorphNormals = geometry.morphAttributes.normal !== undefined;
  41. const hasMorphColors = geometry.morphAttributes.color !== undefined;
  42. const morphTargets = geometry.morphAttributes.position || [];
  43. const morphNormals = geometry.morphAttributes.normal || [];
  44. const morphColors = geometry.morphAttributes.color || [];
  45. let vertexDataCount = 0;
  46. if ( hasMorphPosition === true ) vertexDataCount = 1;
  47. if ( hasMorphNormals === true ) vertexDataCount = 2;
  48. if ( hasMorphColors === true ) vertexDataCount = 3;
  49. let width = geometry.attributes.position.count * vertexDataCount;
  50. let height = 1;
  51. if ( width > capabilities.maxTextureSize ) {
  52. height = Math.ceil( width / capabilities.maxTextureSize );
  53. width = capabilities.maxTextureSize;
  54. }
  55. const buffer = new Float32Array( width * height * 4 * morphTargetsCount );
  56. const texture = new DataArrayTexture( buffer, width, height, morphTargetsCount );
  57. texture.format = RGBAFormat; // using RGBA since RGB might be emulated (and is thus slower)
  58. texture.type = FloatType;
  59. texture.needsUpdate = true;
  60. // fill buffer
  61. const vertexDataStride = vertexDataCount * 4;
  62. for ( let i = 0; i < morphTargetsCount; i ++ ) {
  63. const morphTarget = morphTargets[ i ];
  64. const morphNormal = morphNormals[ i ];
  65. const morphColor = morphColors[ i ];
  66. const offset = width * height * 4 * i;
  67. for ( let j = 0; j < morphTarget.count; j ++ ) {
  68. const stride = j * vertexDataStride;
  69. if ( hasMorphPosition === true ) {
  70. morph.fromBufferAttribute( morphTarget, j );
  71. if ( morphTarget.normalized === true ) denormalize( morph, morphTarget );
  72. buffer[ offset + stride + 0 ] = morph.x;
  73. buffer[ offset + stride + 1 ] = morph.y;
  74. buffer[ offset + stride + 2 ] = morph.z;
  75. buffer[ offset + stride + 3 ] = 0;
  76. }
  77. if ( hasMorphNormals === true ) {
  78. morph.fromBufferAttribute( morphNormal, j );
  79. if ( morphNormal.normalized === true ) denormalize( morph, morphNormal );
  80. buffer[ offset + stride + 4 ] = morph.x;
  81. buffer[ offset + stride + 5 ] = morph.y;
  82. buffer[ offset + stride + 6 ] = morph.z;
  83. buffer[ offset + stride + 7 ] = 0;
  84. }
  85. if ( hasMorphColors === true ) {
  86. morph.fromBufferAttribute( morphColor, j );
  87. if ( morphColor.normalized === true ) denormalize( morph, morphNormal );
  88. buffer[ offset + stride + 8 ] = morph.x;
  89. buffer[ offset + stride + 9 ] = morph.y;
  90. buffer[ offset + stride + 10 ] = morph.z;
  91. buffer[ offset + stride + 11 ] = ( morphColor.itemSize === 4 ) ? morph.w : 1;
  92. }
  93. }
  94. }
  95. entry = {
  96. count: morphTargetsCount,
  97. texture: texture,
  98. size: new Vector2( width, height )
  99. };
  100. morphTextures.set( geometry, entry );
  101. function disposeTexture() {
  102. texture.dispose();
  103. morphTextures.delete( geometry );
  104. geometry.removeEventListener( 'dispose', disposeTexture );
  105. }
  106. geometry.addEventListener( 'dispose', disposeTexture );
  107. }
  108. //
  109. let morphInfluencesSum = 0;
  110. for ( let i = 0; i < objectInfluences.length; i ++ ) {
  111. morphInfluencesSum += objectInfluences[ i ];
  112. }
  113. const morphBaseInfluence = geometry.morphTargetsRelative ? 1 : 1 - morphInfluencesSum;
  114. program.getUniforms().setValue( gl, 'morphTargetBaseInfluence', morphBaseInfluence );
  115. program.getUniforms().setValue( gl, 'morphTargetInfluences', objectInfluences );
  116. program.getUniforms().setValue( gl, 'morphTargetsTexture', entry.texture, textures );
  117. program.getUniforms().setValue( gl, 'morphTargetsTextureSize', entry.size );
  118. } else {
  119. // When object doesn't have morph target influences defined, we treat it as a 0-length array
  120. // This is important to make sure we set up morphTargetBaseInfluence / morphTargetInfluences
  121. const length = objectInfluences === undefined ? 0 : objectInfluences.length;
  122. let influences = influencesList[ geometry.id ];
  123. if ( influences === undefined || influences.length !== length ) {
  124. // initialise list
  125. influences = [];
  126. for ( let i = 0; i < length; i ++ ) {
  127. influences[ i ] = [ i, 0 ];
  128. }
  129. influencesList[ geometry.id ] = influences;
  130. }
  131. // Collect influences
  132. for ( let i = 0; i < length; i ++ ) {
  133. const influence = influences[ i ];
  134. influence[ 0 ] = i;
  135. influence[ 1 ] = objectInfluences[ i ];
  136. }
  137. influences.sort( absNumericalSort );
  138. for ( let i = 0; i < 8; i ++ ) {
  139. if ( i < length && influences[ i ][ 1 ] ) {
  140. workInfluences[ i ][ 0 ] = influences[ i ][ 0 ];
  141. workInfluences[ i ][ 1 ] = influences[ i ][ 1 ];
  142. } else {
  143. workInfluences[ i ][ 0 ] = Number.MAX_SAFE_INTEGER;
  144. workInfluences[ i ][ 1 ] = 0;
  145. }
  146. }
  147. workInfluences.sort( numericalSort );
  148. const morphTargets = geometry.morphAttributes.position;
  149. const morphNormals = geometry.morphAttributes.normal;
  150. let morphInfluencesSum = 0;
  151. for ( let i = 0; i < 8; i ++ ) {
  152. const influence = workInfluences[ i ];
  153. const index = influence[ 0 ];
  154. const value = influence[ 1 ];
  155. if ( index !== Number.MAX_SAFE_INTEGER && value ) {
  156. if ( morphTargets && geometry.getAttribute( 'morphTarget' + i ) !== morphTargets[ index ] ) {
  157. geometry.setAttribute( 'morphTarget' + i, morphTargets[ index ] );
  158. }
  159. if ( morphNormals && geometry.getAttribute( 'morphNormal' + i ) !== morphNormals[ index ] ) {
  160. geometry.setAttribute( 'morphNormal' + i, morphNormals[ index ] );
  161. }
  162. morphInfluences[ i ] = value;
  163. morphInfluencesSum += value;
  164. } else {
  165. if ( morphTargets && geometry.hasAttribute( 'morphTarget' + i ) === true ) {
  166. geometry.deleteAttribute( 'morphTarget' + i );
  167. }
  168. if ( morphNormals && geometry.hasAttribute( 'morphNormal' + i ) === true ) {
  169. geometry.deleteAttribute( 'morphNormal' + i );
  170. }
  171. morphInfluences[ i ] = 0;
  172. }
  173. }
  174. // GLSL shader uses formula baseinfluence * base + sum(target * influence)
  175. // This allows us to switch between absolute morphs and relative morphs without changing shader code
  176. // When baseinfluence = 1 - sum(influence), the above is equivalent to sum((target - base) * influence)
  177. const morphBaseInfluence = geometry.morphTargetsRelative ? 1 : 1 - morphInfluencesSum;
  178. program.getUniforms().setValue( gl, 'morphTargetBaseInfluence', morphBaseInfluence );
  179. program.getUniforms().setValue( gl, 'morphTargetInfluences', morphInfluences );
  180. }
  181. }
  182. return {
  183. update: update
  184. };
  185. }
  186. export { WebGLMorphtargets };