TiltLoader.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. ( function () {
  2. class TiltLoader extends THREE.Loader {
  3. load( url, onLoad, onProgress, onError ) {
  4. const scope = this;
  5. const loader = new THREE.FileLoader( this.manager );
  6. loader.setPath( this.path );
  7. loader.setResponseType( 'arraybuffer' );
  8. loader.setWithCredentials( this.withCredentials );
  9. loader.load( url, function ( buffer ) {
  10. try {
  11. onLoad( scope.parse( buffer ) );
  12. } catch ( e ) {
  13. if ( onError ) {
  14. onError( e );
  15. } else {
  16. console.error( e );
  17. }
  18. scope.manager.itemError( url );
  19. }
  20. }, onProgress, onError );
  21. }
  22. parse( buffer ) {
  23. const group = new THREE.Group();
  24. // https://docs.google.com/document/d/11ZsHozYn9FnWG7y3s3WAyKIACfbfwb4PbaS8cZ_xjvo/edit#
  25. const zip = fflate.unzipSync( new Uint8Array( buffer.slice( 16 ) ) );
  26. /*
  27. const thumbnail = zip[ 'thumbnail.png' ].buffer;
  28. const img = document.createElement( 'img' );
  29. img.src = URL.createObjectURL( new Blob( [ thumbnail ] ) );
  30. document.body.appendChild( img );
  31. */
  32. const metadata = JSON.parse( fflate.strFromU8( zip[ 'metadata.json' ] ) );
  33. /*
  34. const blob = new Blob( [ zip[ 'data.sketch' ].buffer ], { type: 'application/octet-stream' } );
  35. window.open( URL.createObjectURL( blob ) );
  36. */
  37. const data = new DataView( zip[ 'data.sketch' ].buffer );
  38. const num_strokes = data.getInt32( 16, true );
  39. const brushes = {};
  40. let offset = 20;
  41. for ( let i = 0; i < num_strokes; i ++ ) {
  42. const brush_index = data.getInt32( offset, true );
  43. const brush_color = [ data.getFloat32( offset + 4, true ), data.getFloat32( offset + 8, true ), data.getFloat32( offset + 12, true ), data.getFloat32( offset + 16, true ) ];
  44. const brush_size = data.getFloat32( offset + 20, true );
  45. const stroke_mask = data.getUint32( offset + 24, true );
  46. const controlpoint_mask = data.getUint32( offset + 28, true );
  47. let offset_stroke_mask = 0;
  48. let offset_controlpoint_mask = 0;
  49. for ( let j = 0; j < 4; j ++ ) {
  50. // TOFIX: I don't understand these masks yet
  51. const byte = 1 << j;
  52. if ( ( stroke_mask & byte ) > 0 ) offset_stroke_mask += 4;
  53. if ( ( controlpoint_mask & byte ) > 0 ) offset_controlpoint_mask += 4;
  54. }
  55. // console.log( { brush_index, brush_color, brush_size, stroke_mask, controlpoint_mask } );
  56. // console.log( offset_stroke_mask, offset_controlpoint_mask );
  57. offset = offset + 28 + offset_stroke_mask + 4; // TOFIX: This is wrong
  58. const num_control_points = data.getInt32( offset, true );
  59. // console.log( { num_control_points } );
  60. const positions = new Float32Array( num_control_points * 3 );
  61. const quaternions = new Float32Array( num_control_points * 4 );
  62. offset = offset + 4;
  63. for ( let j = 0, k = 0; j < positions.length; j += 3, k += 4 ) {
  64. positions[ j + 0 ] = data.getFloat32( offset + 0, true );
  65. positions[ j + 1 ] = data.getFloat32( offset + 4, true );
  66. positions[ j + 2 ] = data.getFloat32( offset + 8, true );
  67. quaternions[ k + 0 ] = data.getFloat32( offset + 12, true );
  68. quaternions[ k + 1 ] = data.getFloat32( offset + 16, true );
  69. quaternions[ k + 2 ] = data.getFloat32( offset + 20, true );
  70. quaternions[ k + 3 ] = data.getFloat32( offset + 24, true );
  71. offset = offset + 28 + offset_controlpoint_mask; // TOFIX: This is wrong
  72. }
  73. if ( brush_index in brushes === false ) {
  74. brushes[ brush_index ] = [];
  75. }
  76. brushes[ brush_index ].push( [ positions, quaternions, brush_size, brush_color ] );
  77. }
  78. for ( const brush_index in brushes ) {
  79. const geometry = new StrokeGeometry( brushes[ brush_index ] );
  80. const material = getMaterial( metadata.BrushIndex[ brush_index ] );
  81. group.add( new THREE.Mesh( geometry, material ) );
  82. }
  83. return group;
  84. }
  85. }
  86. class StrokeGeometry extends THREE.BufferGeometry {
  87. constructor( strokes ) {
  88. super();
  89. const vertices = [];
  90. const colors = [];
  91. const uvs = [];
  92. const position = new THREE.Vector3();
  93. const prevPosition = new THREE.Vector3();
  94. const quaternion = new THREE.Quaternion();
  95. const prevQuaternion = new THREE.Quaternion();
  96. const vector1 = new THREE.Vector3();
  97. const vector2 = new THREE.Vector3();
  98. const vector3 = new THREE.Vector3();
  99. const vector4 = new THREE.Vector3();
  100. // size = size / 2;
  101. for ( const k in strokes ) {
  102. const stroke = strokes[ k ];
  103. const positions = stroke[ 0 ];
  104. const quaternions = stroke[ 1 ];
  105. const size = stroke[ 2 ];
  106. const color = stroke[ 3 ];
  107. prevPosition.fromArray( positions, 0 );
  108. prevQuaternion.fromArray( quaternions, 0 );
  109. for ( let i = 3, j = 4, l = positions.length; i < l; i += 3, j += 4 ) {
  110. position.fromArray( positions, i );
  111. quaternion.fromArray( quaternions, j );
  112. vector1.set( - size, 0, 0 );
  113. vector1.applyQuaternion( quaternion );
  114. vector1.add( position );
  115. vector2.set( size, 0, 0 );
  116. vector2.applyQuaternion( quaternion );
  117. vector2.add( position );
  118. vector3.set( size, 0, 0 );
  119. vector3.applyQuaternion( prevQuaternion );
  120. vector3.add( prevPosition );
  121. vector4.set( - size, 0, 0 );
  122. vector4.applyQuaternion( prevQuaternion );
  123. vector4.add( prevPosition );
  124. vertices.push( vector1.x, vector1.y, - vector1.z );
  125. vertices.push( vector2.x, vector2.y, - vector2.z );
  126. vertices.push( vector4.x, vector4.y, - vector4.z );
  127. vertices.push( vector2.x, vector2.y, - vector2.z );
  128. vertices.push( vector3.x, vector3.y, - vector3.z );
  129. vertices.push( vector4.x, vector4.y, - vector4.z );
  130. prevPosition.copy( position );
  131. prevQuaternion.copy( quaternion );
  132. colors.push( ...color );
  133. colors.push( ...color );
  134. colors.push( ...color );
  135. colors.push( ...color );
  136. colors.push( ...color );
  137. colors.push( ...color );
  138. const p1 = i / l;
  139. const p2 = ( i - 3 ) / l;
  140. uvs.push( p1, 0 );
  141. uvs.push( p1, 1 );
  142. uvs.push( p2, 0 );
  143. uvs.push( p1, 1 );
  144. uvs.push( p2, 1 );
  145. uvs.push( p2, 0 );
  146. }
  147. }
  148. this.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
  149. this.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( colors ), 4 ) );
  150. this.setAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( uvs ), 2 ) );
  151. }
  152. }
  153. const BRUSH_LIST_ARRAY = {
  154. '89d104cd-d012-426b-b5b3-bbaee63ac43c': 'Bubbles',
  155. '700f3aa8-9a7c-2384-8b8a-ea028905dd8c': 'CelVinyl',
  156. '0f0ff7b2-a677-45eb-a7d6-0cd7206f4816': 'ChromaticWave',
  157. '1161af82-50cf-47db-9706-0c3576d43c43': 'CoarseBristles',
  158. '79168f10-6961-464a-8be1-57ed364c5600': 'CoarseBristlesSingleSided',
  159. '1caa6d7d-f015-3f54-3a4b-8b5354d39f81': 'Comet',
  160. 'c8313697-2563-47fc-832e-290f4c04b901': 'DiamondHull',
  161. '4391aaaa-df73-4396-9e33-31e4e4930b27': 'Disco',
  162. 'd1d991f2-e7a0-4cf1-b328-f57e915e6260': 'DotMarker',
  163. '6a1cf9f9-032c-45ec-9b1d-a6680bee30f7': 'Dots',
  164. '0d3889f3-3ede-470c-8af4-f44813306126': 'DoubleTaperedFlat',
  165. '0d3889f3-3ede-470c-8af4-de4813306126': 'DoubleTaperedMarker',
  166. 'd0262945-853c-4481-9cbd-88586bed93cb': 'DuctTape',
  167. '3ca16e2f-bdcd-4da2-8631-dcef342f40f1': 'DuctTapeSingleSided',
  168. 'f6e85de3-6dcc-4e7f-87fd-cee8c3d25d51': 'Electricity',
  169. '02ffb866-7fb2-4d15-b761-1012cefb1360': 'Embers',
  170. 'cb92b597-94ca-4255-b017-0e3f42f12f9e': 'Fire',
  171. '2d35bcf0-e4d8-452c-97b1-3311be063130': 'Flat',
  172. '55303bc4-c749-4a72-98d9-d23e68e76e18': 'FlatDeprecated',
  173. '280c0a7a-aad8-416c-a7d2-df63d129ca70': 'FlatSingleSided',
  174. 'cf019139-d41c-4eb0-a1d0-5cf54b0a42f3': 'Highlighter',
  175. '6a1cf9f9-032c-45ec-9b6e-a6680bee32e9': 'HyperGrid',
  176. 'dce872c2-7b49-4684-b59b-c45387949c5c': 'Hypercolor',
  177. 'e8ef32b1-baa8-460a-9c2c-9cf8506794f5': 'HypercolorSingleSided',
  178. '2f212815-f4d3-c1a4-681a-feeaf9c6dc37': 'Icing',
  179. 'f5c336cf-5108-4b40-ade9-c687504385ab': 'Ink',
  180. 'c0012095-3ffd-4040-8ee1-fc180d346eaa': 'InkSingleSided',
  181. '4a76a27a-44d8-4bfe-9a8c-713749a499b0': 'Leaves',
  182. 'ea19de07-d0c0-4484-9198-18489a3c1487': 'LeavesSingleSided',
  183. '2241cd32-8ba2-48a5-9ee7-2caef7e9ed62': 'Light',
  184. '4391aaaa-df81-4396-9e33-31e4e4930b27': 'LightWire',
  185. 'd381e0f5-3def-4a0d-8853-31e9200bcbda': 'Lofted',
  186. '429ed64a-4e97-4466-84d3-145a861ef684': 'Marker',
  187. '79348357-432d-4746-8e29-0e25c112e3aa': 'MatteHull',
  188. 'b2ffef01-eaaa-4ab5-aa64-95a2c4f5dbc6': 'NeonPulse',
  189. 'f72ec0e7-a844-4e38-82e3-140c44772699': 'OilPaint',
  190. 'c515dad7-4393-4681-81ad-162ef052241b': 'OilPaintSingleSided',
  191. 'f1114e2e-eb8d-4fde-915a-6e653b54e9f5': 'Paper',
  192. '759f1ebd-20cd-4720-8d41-234e0da63716': 'PaperSingleSided',
  193. 'e0abbc80-0f80-e854-4970-8924a0863dcc': 'Petal',
  194. 'c33714d1-b2f9-412e-bd50-1884c9d46336': 'Plasma',
  195. 'ad1ad437-76e2-450d-a23a-e17f8310b960': 'Rainbow',
  196. 'faaa4d44-fcfb-4177-96be-753ac0421ba3': 'ShinyHull',
  197. '70d79cca-b159-4f35-990c-f02193947fe8': 'Smoke',
  198. 'd902ed8b-d0d1-476c-a8de-878a79e3a34c': 'Snow',
  199. 'accb32f5-4509-454f-93f8-1df3fd31df1b': 'SoftHighlighter',
  200. 'cf7f0059-7aeb-53a4-2b67-c83d863a9ffa': 'Spikes',
  201. '8dc4a70c-d558-4efd-a5ed-d4e860f40dc3': 'Splatter',
  202. '7a1c8107-50c5-4b70-9a39-421576d6617e': 'SplatterSingleSided',
  203. '0eb4db27-3f82-408d-b5a1-19ebd7d5b711': 'Stars',
  204. '44bb800a-fbc3-4592-8426-94ecb05ddec3': 'Streamers',
  205. '0077f88c-d93a-42f3-b59b-b31c50cdb414': 'Taffy',
  206. 'b468c1fb-f254-41ed-8ec9-57030bc5660c': 'TaperedFlat',
  207. 'c8ccb53d-ae13-45ef-8afb-b730d81394eb': 'TaperedFlatSingleSided',
  208. 'd90c6ad8-af0f-4b54-b422-e0f92abe1b3c': 'TaperedMarker',
  209. '1a26b8c0-8a07-4f8a-9fac-d2ef36e0cad0': 'TaperedMarker_Flat',
  210. '75b32cf0-fdd6-4d89-a64b-e2a00b247b0f': 'ThickPaint',
  211. 'fdf0326a-c0d1-4fed-b101-9db0ff6d071f': 'ThickPaintSingleSided',
  212. '4391385a-df73-4396-9e33-31e4e4930b27': 'Toon',
  213. 'a8fea537-da7c-4d4b-817f-24f074725d6d': 'UnlitHull',
  214. 'd229d335-c334-495a-a801-660ac8a87360': 'VelvetInk',
  215. '10201aa3-ebc2-42d8-84b7-2e63f6eeb8ab': 'Waveform',
  216. 'b67c0e81-ce6d-40a8-aeb0-ef036b081aa3': 'WetPaint',
  217. 'dea67637-cd1a-27e4-c9b1-52f4bbcb84e5': 'WetPaintSingleSided',
  218. '5347acf0-a8e2-47b6-8346-30c70719d763': 'WigglyGraphite',
  219. 'e814fef1-97fd-7194-4a2f-50c2bb918be2': 'WigglyGraphiteSingleSided',
  220. '4391385a-cf83-4396-9e33-31e4e4930b27': 'Wire'
  221. };
  222. const common = {
  223. 'colors': {
  224. 'BloomColor': `
  225. vec3 BloomColor(vec3 color, float gain) {
  226. // Guarantee that there's at least a little bit of all 3 channels.
  227. // This makes fully-saturated strokes (which only have 2 non-zero
  228. // color channels) eventually clip to white rather than to a secondary.
  229. float cmin = length(color.rgb) * .05;
  230. color.rgb = max(color.rgb, vec3(cmin, cmin, cmin));
  231. // If we try to remove this pow() from .a, it brightens up
  232. // pressure-sensitive strokes; looks better as-is.
  233. color = pow(color, vec3(2.2));
  234. color.rgb *= 2. * exp(gain * 10.);
  235. return color;
  236. }
  237. `,
  238. 'LinearToSrgb': `
  239. vec3 LinearToSrgb(vec3 color) {
  240. // Approximation http://chilliant.blogspot.com/2012/08/srgb-approximations-for-hlsl.html
  241. vec3 linearColor = color.rgb;
  242. vec3 S1 = sqrt(linearColor);
  243. vec3 S2 = sqrt(S1);
  244. vec3 S3 = sqrt(S2);
  245. color.rgb = 0.662002687 * S1 + 0.684122060 * S2 - 0.323583601 * S3 - 0.0225411470 * linearColor;
  246. return color;
  247. }
  248. `,
  249. 'hsv': `
  250. // uniform sampler2D lookupTex;
  251. vec4 lookup(vec4 textureColor) {
  252. return textureColor;
  253. }
  254. vec3 lookup(vec3 textureColor) {
  255. return textureColor;
  256. }
  257. vec3 hsv2rgb( vec3 hsv ) {
  258. vec3 rgb = clamp( abs(mod(hsv.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 );
  259. return hsv.z * mix( vec3(1.0), rgb, hsv.y);
  260. }
  261. vec3 rgb2hsv( vec3 rgb ) {
  262. vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
  263. vec4 p = mix(vec4(rgb.bg, K.wz), vec4(rgb.gb, K.xy), step(rgb.b, rgb.g));
  264. vec4 q = mix(vec4(p.xyw, rgb.r), vec4(rgb.r, p.yzx), step(p.x, rgb.r));
  265. float d = q.x - min(q.w, q.y);
  266. float e = 1.0e-10;
  267. return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
  268. }
  269. `,
  270. 'SrgbToLinear': `
  271. vec3 SrgbToLinear(vec3 color) {
  272. // Approximation http://chilliant.blogspot.com/2012/08/srgb-approximations-for-hlsl.html
  273. vec3 sRGB = color.rgb;
  274. color.rgb = sRGB * (sRGB * (sRGB * 0.305306011 + 0.682171111) + 0.012522878);
  275. return color;
  276. }
  277. `
  278. }
  279. };
  280. let shaders = null;
  281. function getShaders() {
  282. if ( shaders === null ) {
  283. const loader = new THREE.TextureLoader().setPath( './textures/tiltbrush/' );
  284. shaders = {
  285. 'Light': {
  286. uniforms: {
  287. mainTex: {
  288. value: loader.load( 'Light.webp' )
  289. },
  290. alphaTest: {
  291. value: 0.067
  292. },
  293. emission_gain: {
  294. value: 0.45
  295. },
  296. alpha: {
  297. value: 1
  298. }
  299. },
  300. vertexShader: `
  301. precision highp float;
  302. precision highp int;
  303. attribute vec2 uv;
  304. attribute vec4 color;
  305. attribute vec3 position;
  306. uniform mat4 modelMatrix;
  307. uniform mat4 modelViewMatrix;
  308. uniform mat4 projectionMatrix;
  309. uniform mat4 viewMatrix;
  310. uniform mat3 normalMatrix;
  311. uniform vec3 cameraPosition;
  312. varying vec2 vUv;
  313. varying vec3 vColor;
  314. ${common.colors.LinearToSrgb}
  315. ${common.colors.hsv}
  316. void main() {
  317. vUv = uv;
  318. vColor = lookup(color.rgb);
  319. vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  320. gl_Position = projectionMatrix * mvPosition;
  321. }
  322. `,
  323. fragmentShader: `
  324. precision highp float;
  325. precision highp int;
  326. uniform float emission_gain;
  327. uniform sampler2D mainTex;
  328. uniform float alphaTest;
  329. varying vec2 vUv;
  330. varying vec3 vColor;
  331. ${common.colors.BloomColor}
  332. ${common.colors.SrgbToLinear}
  333. void main(){
  334. vec4 col = texture2D(mainTex, vUv);
  335. vec3 color = vColor;
  336. color = BloomColor(color, emission_gain);
  337. color = color * col.rgb;
  338. color = color * col.a;
  339. color = SrgbToLinear(color);
  340. gl_FragColor = vec4(color, 1.0);
  341. }
  342. `,
  343. side: 2,
  344. transparent: true,
  345. depthFunc: 2,
  346. depthWrite: true,
  347. depthTest: false,
  348. blending: 5,
  349. blendDst: 201,
  350. blendDstAlpha: 201,
  351. blendEquation: 100,
  352. blendEquationAlpha: 100,
  353. blendSrc: 201,
  354. blendSrcAlpha: 201
  355. }
  356. };
  357. }
  358. return shaders;
  359. }
  360. function getMaterial( GUID ) {
  361. const name = BRUSH_LIST_ARRAY[ GUID ];
  362. switch ( name ) {
  363. case 'Light':
  364. return new THREE.RawShaderMaterial( getShaders().Light );
  365. default:
  366. return new THREE.MeshBasicMaterial( {
  367. vertexColors: true,
  368. side: THREE.DoubleSide
  369. } );
  370. }
  371. }
  372. THREE.TiltLoader = TiltLoader;
  373. } )();