first commit

.gitignore

@@ -1,7 +1,9 @@
 .DS_Store
 node_modules
-/dist
-
+dist
+out
+better-docs
+better-docs/**
 
 # local env files
 .env.local
@@ -11,7 +13,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
+report*.json
 
 # Editor directories and files
 .idea
@@ -21,3 +23,12 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.bak
+*.log
+kankan-sdk.**.js
+kankan-sdk.**.map
+docs/html
+kankan-sdk.js
+bk
+package-lock.json
+packages/kankan-viewer/public/sdk/*

package-lock.json

@@ -4262,6 +4262,11 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -4739,6 +4744,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -7004,6 +7014,11 @@
         }
       }
     },
+    "three": {
+      "version": "0.158.0",
+      "resolved": "https://registry.npmmirror.com/three/-/three-0.158.0.tgz",
+      "integrity": "sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",

package.json

@@ -8,6 +8,9 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "gsap": "^3.12.5",
+    "jquery": "^3.7.1",
+    "three": "^0.158.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },

src/App.vue

@@ -1,8 +1,4 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
   <router-view/>
 </template>
 

src/examples/files/thumbnails.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <g fill="none" stroke="#000" stroke-linecap="round" stroke-width="35">
+  <path d="m308.67 108.63h-194.68c-27.7 0-50 22.3-50 50v194.68m142.66 55.332h194.59c27.7 0 50-22.3 50-50v-194.59"/>
+  <path d="m66.583 449.71 379.6-379.6"/>
+ </g>
+</svg>

src/examples/fonts/README.md

@@ -0,0 +1,11 @@
+## MgOpen typefaces
+
+# Source and License
+
+https://web.archive.org/web/20050528114140/https://ellak.gr/fonts/mgopen/index.en
+
+# Usage
+
+Use Facetype.js to generate typeface.json fonts: https://gero3.github.io/facetype.js/
+
+Collection of Google fonts as typeface data for usage with three.js: https://github.com/components-ai/typefaces

src/examples/fonts/droid/NOTICE

@@ -0,0 +1,190 @@
+
+   Copyright (c) 2005-2008, The Android Open Source Project
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+

src/examples/fonts/droid/README.txt

@@ -0,0 +1,18 @@
+Copyright (C) 2008 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+  
+     http://www.apache.org/licenses/LICENSE-2.0
+  
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+##########
+
+This directory contains the fonts for the platform. They are licensed
+under the Apache 2 license.

src/examples/fonts/ttf/README.md

@@ -0,0 +1,9 @@
+# Kenney Fonts
+
+## Source
+
+https://www.kenney.nl/assets/kenney-fonts
+
+## License
+
+CC0 1.0 Universal (CC0 1.0) Public Domain Dedication (https://creativecommons.org/publicdomain/zero/1.0/)

src/examples/ies/007cfb11e343e2f42e3b476be4ab684e.ies

@@ -0,0 +1,28 @@
+IESNA:LM-63-1995
+[TEST] 
+[MANUFAC] BEGA
+[MORE] Copyright LUMCat V 
+[LUMCAT] 
+[LUMINAIRE] 50975.6K3 (Preliminary)
+[LAMPCAT] LED  7,9W
+[LAMP]     321 lm,9 W
+TILT=NONE
+1 -1 1.0 73 1 1 2 -0.080 0.000 0.000
+1.0 1.0 9
+   0.0   2.5   5.0   7.5  10.0  12.5  15.0  17.5  20.0  22.5  25.0  27.5  30.0
+  32.5  35.0  37.5  40.0  42.5  45.0  47.5  50.0  52.5  55.0  57.5  60.0  62.5
+  65.0  67.5  70.0  72.5  75.0  77.5  80.0  82.5  85.0  87.5  90.0  92.5  95.0
+  97.5 100.0 102.5 105.0 107.5 110.0 112.5 115.0 117.5 120.0 122.5 125.0 127.5
+ 130.0 132.5 135.0 137.5 140.0 142.5 145.0 147.5 150.0 152.5 155.0 157.5 160.0
+ 162.5 165.0 167.5 170.0 172.5 175.0 177.5 180.0
+   0.0
+     330.8     333.2     335.2     336.2     336.8     337.1     337.2     336.7
+     331.4     302.1     238.1     159.9      90.7      51.3      38.9      36.0
+      34.8      34.2      33.5      32.7      31.6      29.3      25.2      19.8
+      15.4      12.3       9.9       8.1       6.4       5.1       3.9       3.0
+       2.1       1.4       0.9       0.4       0.1       0.1       0.1       0.0
+       0.0       0.0       0.0       0.0       0.0       0.0       0.0       0.0
+       0.0       0.0       0.0       0.0       0.0       0.0       0.0       0.0
+       0.0       0.0       0.0       0.0       0.0       0.0       0.0       0.0
+       0.0       0.0       0.0       0.0       0.0       0.0       0.0       0.0
+       0.0

src/examples/ies/02a7562c650498ebb301153dbbf59207.ies

@@ -0,0 +1,202 @@
+IESNA:LM-63-1995
+[TEST] 
+[MANUFAC] BEGA
+[MORE] Copyright LUMCat V 
+[LUMCAT] 
+[LUMINAIRE] 84659K4 (Preliminary)
+[LAMPCAT] LED  62W
+[LAMP]    9600 lm,68 W
+TILT=NONE
+1 -1 1.0 37 37 1 2 0.240 0.270 0.000
+1.0 1.0 68
+   0.0   2.5   5.0   7.5  10.0  12.5  15.0  17.5  20.0  22.5  25.0  27.5  30.0
+  32.5  35.0  37.5  40.0  42.5  45.0  47.5  50.0  52.5  55.0  57.5  60.0  62.5
+  65.0  67.5  70.0  72.5  75.0  77.5  80.0  82.5  85.0  87.5  90.0
+  90.0  95.0 100.0 105.0 110.0 115.0 120.0 125.0 130.0 135.0 140.0 145.0 150.0
+ 155.0 160.0 165.0 170.0 175.0 180.0 185.0 190.0 195.0 200.0 205.0 210.0 215.0
+ 220.0 225.0 230.0 235.0 240.0 245.0 250.0 255.0 260.0 265.0 270.0
+    1739.8    1748.5    1754.2    1758.7    1775.5    1813.8    1888.7    2057.8
+    2268.7    2530.0    2653.0    2727.6    2847.9    2943.6    3012.0    3010.7
+    2925.3    2695.3    2336.5    1929.2    1501.3    1136.6     808.5     532.9
+     280.7     122.6      64.3      37.0      26.4      18.3      12.9       8.2
+       5.1       2.4       0.3       0.0       0.0
+    1739.8    1748.6    1755.1    1761.4    1779.4    1810.3    1897.9    2049.0
+    2262.6    2522.0    2673.8    2761.2    2883.7    2983.2    3028.5    3050.3
+    2988.3    2746.1    2362.9    1967.1    1541.8    1172.7     839.4     558.2
+     309.8     141.1      80.4      50.8      35.6      24.5      16.9      10.8
+       7.1       4.0       1.2       0.0       0.0
+    1739.8    1749.1    1757.4    1767.4    1785.7    1823.3    1899.7    2048.4
+    2256.2    2498.9    2694.0    2773.9    2844.4    2922.8    2988.7    3031.0
+    3027.4    2881.6    2567.2    2188.7    1761.0    1375.4    1018.7     699.3
+     400.3     196.2     113.3      71.3      47.6      32.5      22.1      14.8
+       9.7       5.2       2.1       0.1       0.0
+    1739.8    1749.8    1760.2    1773.9    1795.1    1832.1    1900.1    2045.2
+    2239.3    2482.5    2660.9    2744.7    2861.5    3034.0    3184.8    3305.3
+    3327.2    3210.1    2878.7    2442.9    1979.1    1517.9    1151.7     808.6
+     498.3     261.5     152.9      99.1      66.3      42.9      26.9      18.1
+      11.5       6.5       2.5       0.0       0.0
+    1739.8    1750.6    1763.0    1780.3    1803.0    1833.0    1894.3    2008.2
+    2199.0    2444.7    2696.9    2888.1    3087.5    3267.2    3389.1    3432.1
+    3418.0    3298.7    3024.6    2609.8    2146.7    1683.6    1305.7     944.7
+     626.2     363.9     214.5     137.1      87.4      54.7      34.9      23.2
+      15.2       8.4       2.5       0.0       0.0
+    1739.8    1751.6    1766.6    1786.2    1806.4    1826.5    1860.2    1973.2
+    2177.0    2478.9    2808.4    3035.9    3161.6    3281.4    3384.3    3448.8
+    3438.0    3361.0    3159.2    2800.0    2365.0    1909.0    1518.8    1156.2
+     839.7     537.7     333.0     229.1     153.9      98.5      60.9      38.2
+      22.2      10.8       3.6       0.0       0.0
+    1739.8    1752.7    1771.7    1792.3    1802.7    1808.7    1832.9    1970.3
+    2231.9    2557.8    2848.8    3046.8    3145.9    3246.5    3374.8    3453.3
+    3465.7    3410.5    3291.8    3011.3    2624.9    2203.5    1792.9    1450.0
+    1136.5     840.7     606.6     481.8     364.3     246.9     150.7      88.9
+      48.1      22.0       6.9       0.3       0.0
+    1739.8    1753.8    1777.0    1796.5    1794.8    1791.9    1841.4    2021.7
+    2280.7    2542.2    2771.2    2975.5    3121.1    3248.2    3391.1    3511.0
+    3531.5    3484.4    3392.6    3203.7    2913.7    2548.4    2163.0    1821.9
+    1540.7    1327.8    1160.0    1022.5     800.9     563.3     370.4     228.6
+     125.4      51.8      15.1       1.2       0.1
+    1739.8    1754.8    1781.0    1795.7    1781.8    1792.6    1886.5    2075.7
+    2261.2    2450.6    2649.5    2876.7    3093.7    3285.2    3444.9    3600.0
+    3677.9    3661.2    3584.7    3460.9    3265.7    2991.9    2661.8    2352.5
+    2166.2    2101.0    2042.7    1810.4    1435.5    1092.7     774.0     501.6
+     276.8     103.1      26.9       2.6       0.0
+    1739.8    1755.4    1782.8    1790.5    1772.5    1813.9    1953.0    2096.5
+    2208.0    2334.6    2514.0    2750.9    3033.0    3305.6    3497.4    3638.5
+    3780.3    3871.8    3869.9    3803.3    3693.5    3534.0    3313.6    3128.5
+    3083.1    3162.1    3100.2    2758.2    2262.6    1809.0    1341.3     899.8
+     500.0     187.6      46.7       4.3       0.0
+    1739.8    1755.7    1782.8    1783.3    1768.3    1848.9    2006.2    2097.5
+    2154.6    2236.7    2392.4    2608.1    2899.4    3231.2    3514.3    3713.1
+    3856.4    3983.7    4070.7    4087.8    4080.7    4098.0    4077.7    4091.0
+    4192.6    4272.4    4144.6    3754.2    3197.0    2607.4    2005.6    1386.9
+     778.1     293.9      79.5       7.5       0.0
+    1739.8    1755.4    1782.2    1774.3    1772.9    1890.9    2037.3    2090.6
+    2116.9    2172.1    2286.5    2481.7    2751.7    3076.9    3413.4    3703.8
+    3904.5    4053.3    4183.4    4293.1    4376.2    4499.1    4733.8    5032.2
+    5271.9    5261.5    5017.0    4611.3    4064.9    3373.1    2651.0    1878.4
+    1053.3     386.3     107.3      13.3       0.0
+    1739.8    1754.8    1781.2    1763.5    1782.8    1925.4    2052.3    2085.7
+    2109.9    2148.2    2230.5    2373.6    2592.0    2872.4    3193.1    3524.8
+    3813.4    4054.3    4243.0    4393.5    4537.7    4758.7    5191.2    5738.1
+    6099.8    6004.9    5742.4    5359.5    4807.0    4117.3    3298.1    2376.1
+    1374.9     499.6     137.2      19.0       0.1
+    1739.8    1754.2    1779.0    1753.3    1795.5    1954.6    2057.7    2081.8
+    2106.0    2140.8    2198.8    2293.9    2431.6    2638.7    2872.8    3146.3
+    3442.6    3729.7    4009.0    4277.9    4534.4    4841.2    5334.3    5971.2
+    6458.4    6427.8    6214.9    5945.5    5405.8    4726.0    3924.8    2910.2
+    1731.6     647.9     172.7      24.4       0.2
+    1739.8    1753.7    1775.5    1747.2    1811.0    1975.6    2058.3    2078.1
+    2100.7    2143.1    2192.8    2252.8    2332.3    2443.4    2578.3    2735.2
+    2900.4    3095.8    3322.8    3611.9    3979.1    4473.8    5057.7    5592.9
+    6039.2    6254.0    6274.6    6086.8    5637.3    5050.5    4315.5    3337.6
+    2052.6     777.2     188.6      27.0       0.1
+    1739.8    1753.5    1772.1    1743.4    1825.3    1988.7    2055.7    2075.2
+    2104.0    2147.1    2182.2    2230.3    2278.6    2338.0    2407.8    2488.4
+    2561.1    2649.0    2758.2    2933.2    3221.1    3689.9    4315.9    4887.8
+    5217.3    5403.3    5578.3    5593.9    5285.6    4859.4    4234.2    3286.5
+    2092.1     833.6     192.9      25.7       0.1
+    1739.8    1753.4    1770.3    1741.1    1834.5    1998.4    2060.2    2074.5
+    2102.5    2137.9    2177.5    2212.0    2239.4    2273.8    2324.5    2374.0
+    2422.9    2478.7    2555.6    2672.0    2890.8    3264.9    3773.6    4189.1
+    4395.8    4538.9    4636.8    4609.0    4417.1    4064.6    3531.1    2726.5
+    1743.9     712.5     163.7      22.3       0.0
+    1739.8    1753.2    1769.9    1740.7    1844.3    2003.6    2059.3    2074.3
+    2101.9    2140.5    2174.2    2200.8    2225.4    2242.9    2274.6    2316.0
+    2375.6    2439.1    2522.0    2651.4    2890.5    3269.0    3713.2    4051.6
+    4168.6    4152.3    4098.0    3932.4    3645.8    3237.7    2704.4    2024.6
+    1266.2     505.7     118.2      17.2       0.2
+    1739.8    1752.7    1768.9    1739.4    1848.0    2005.0    2057.8    2076.1
+    2105.3    2138.8    2172.1    2193.3    2208.4    2232.2    2264.7    2306.5
+    2370.7    2456.0    2566.0    2716.8    2996.1    3411.2    3879.6    4247.8
+    4401.7    4315.5    4107.0    3814.8    3470.1    3017.1    2489.7    1881.1
+    1180.9     457.8     104.1      14.4       0.2
+    1739.8    1751.9    1766.5    1736.6    1841.4    1999.8    2051.3    2064.5
+    2091.3    2125.1    2159.2    2184.1    2191.0    2207.5    2233.7    2281.7
+    2347.3    2428.6    2529.8    2693.0    2968.7    3391.4    3882.6    4271.4
+    4468.1    4373.3    4162.7    3880.4    3514.7    2965.6    2326.5    1745.4
+    1081.3     418.7      96.3      13.4       1.0
+    1739.8    1750.6    1763.4    1733.9    1826.0    1984.8    2039.0    2046.3
+    2062.0    2088.3    2113.7    2133.3    2141.8    2161.8    2185.5    2224.5
+    2273.4    2341.5    2413.9    2555.7    2779.9    3119.7    3534.7    3883.8
+    4018.8    3886.8    3657.9    3358.8    2911.8    2312.5    1679.0    1171.2
+     650.0     219.8      51.6       7.1       0.1
+    1739.8    1748.8    1761.1    1728.9    1802.9    1961.8    2019.1    2024.3
+    2035.5    2051.2    2063.9    2066.3    2069.3    2082.4    2104.1    2127.4
+    2161.4    2207.3    2257.9    2335.9    2458.5    2688.2    2954.9    3149.0
+    3185.9    2991.3    2712.6    2412.9    1981.8    1449.2     948.1     615.6
+     320.2      97.1      23.3       3.3       0.2
+    1739.8    1746.5    1759.4    1723.6    1777.0    1932.0    1998.8    1995.7
+    1994.2    2001.1    2002.5    1998.9    1987.0    1981.7    1985.9    1995.0
+    1999.0    1996.4    1977.9    1933.3    1936.8    2021.7    2181.6    2300.9
+    2256.1    2053.8    1778.0    1471.1    1135.3     799.3     514.5     323.3
+     164.0      54.3      15.1       1.6       0.1
+    1739.8    1744.0    1757.0    1721.8    1748.6    1894.2    1976.7    1971.4
+    1956.9    1944.0    1936.1    1924.3    1898.2    1872.1    1842.7    1794.3
+    1718.2    1646.3    1576.3    1483.8    1417.8    1401.1    1440.9    1460.8
+    1416.0    1272.8    1065.0     836.9     632.9     445.5     286.8     178.6
+      94.5      37.6      12.6       1.2       0.3
+    1739.8    1741.7    1753.4    1722.7    1722.0    1842.1    1944.5    1941.7
+    1918.0    1891.7    1868.5    1851.0    1816.6    1752.6    1640.2    1519.0
+    1434.8    1324.8    1200.9    1070.9     944.0     869.6     846.3     831.3
+     790.4     737.8     618.3     463.7     343.7     247.9     165.4     107.8
+      60.6      28.2      10.6       1.1       0.1
+    1739.8    1739.8    1748.9    1724.2    1698.3    1788.1    1901.0    1907.5
+    1882.0    1856.4    1822.8    1785.5    1710.2    1563.1    1442.7    1331.9
+    1185.6    1054.8     883.0     738.7     614.5     520.0     465.7     457.4
+     447.6     406.0     346.2     275.1     205.1     152.5     114.7      80.8
+      48.6      23.4       9.0       1.0       0.0
+    1739.8    1738.1    1743.9    1725.3    1681.1    1728.5    1845.0    1873.7
+    1849.8    1813.1    1773.9    1679.5    1531.6    1417.5    1288.7    1126.7
+     980.5     804.6     659.8     523.7     411.4     329.1     333.5     349.1
+     341.6     296.6     255.7     218.4     169.0     130.9     111.9      85.7
+      54.1      24.0       7.9       0.6       0.4
+    1739.8    1736.4    1738.6    1726.7    1675.0    1674.9    1765.5    1832.5
+    1821.7    1779.7    1679.0    1525.9    1406.7    1277.8    1119.9     973.6
+     776.8     629.6     489.6     373.0     292.8     297.0     338.4     373.3
+     360.6     319.8     289.8     241.5     177.2     139.2     116.7      85.4
+      50.4      21.6       5.9       0.6       0.2
+    1739.8    1734.9    1733.0    1726.6    1678.5    1639.2    1676.6    1759.3
+    1781.8    1728.1    1560.6    1415.1    1296.8    1138.6     994.1     791.0
+     639.3     488.9     362.5     271.5     278.4     342.3     430.8     470.2
+     433.8     400.4     375.7     296.9     194.9     131.9      99.3      72.7
+      46.8      21.9       6.2       0.3       0.1
+    1739.8    1733.4    1726.2    1721.4    1683.0    1628.9    1608.0    1656.3
+    1704.4    1642.1    1461.3    1338.6    1178.5    1036.7     842.3     665.5
+     509.1     370.1     248.1     237.4     299.4     424.0     538.7     550.9
+     505.8     511.8     478.4     333.3     185.0     107.6      77.9      62.2
+      39.9      17.1       4.6       0.4       0.7
+    1739.8    1731.9    1718.6    1711.6    1685.5    1634.5    1578.3    1566.8
+    1578.6    1503.9    1391.7    1255.9    1088.7     918.0     716.7     559.7
+     401.4     255.8     187.5     211.9     297.5     428.9     500.2     478.8
+     461.1     488.9     417.1     244.3     117.7      65.4      46.5      33.1
+      19.9       8.9       2.5       0.5       0.7
+    1739.8    1730.4    1712.0    1698.4    1680.5    1643.5    1584.6    1522.5
+    1448.6    1328.1    1281.5    1153.1    1024.0     806.2     630.3     450.3
+     309.5     184.1     158.9     180.9     253.0     347.8     373.9     338.1
+     321.6     318.9     245.2     135.1      69.1      41.8      29.2      21.0
+      13.5       6.3       1.6       0.2       0.5
+    1739.8    1728.7    1707.5    1686.4    1669.4    1640.1    1597.6    1534.1
+    1390.3    1215.9    1131.7    1016.4     911.0     711.6     558.9     394.2
+     239.7     152.3     141.0     158.0     216.4     290.9     300.0     255.6
+     228.7     224.1     172.4      88.1      36.6      18.1      12.7       8.7
+       5.8       3.1       0.9       0.3       0.3
+    1739.8    1727.3    1704.7    1677.5    1654.2    1625.8    1594.5    1538.4
+    1391.4    1223.5    1086.3     937.0     788.1     619.2     476.3     340.5
+     195.2     136.2     124.3     136.7     186.6     250.5     253.2     209.8
+     198.9     210.2     154.6      57.6      19.1       7.5       2.6       0.4
+       0.3       0.1       0.3       0.1       0.1
+    1739.8    1726.1    1702.3    1671.4    1641.1    1613.2    1577.6    1520.4
+    1376.1    1245.4    1102.8     950.4     762.0     587.5     432.1     303.3
+     173.0     126.7     111.5     113.1     144.8     183.9     180.1     150.1
+     148.3     152.5     110.7      58.0      29.4      14.6       6.5       3.5
+       2.2       1.2       0.3       0.2       0.3
+    1739.8    1725.3    1699.4    1669.8    1633.6    1599.7    1563.7    1498.5
+    1345.3    1223.2    1074.8     935.8     757.2     592.9     431.9     290.9
+     166.9     125.1     107.4     101.7     108.6     116.4     100.5      77.0
+      69.3      66.1      49.9      31.9      17.8       9.2       6.1       5.1
+       3.8       2.4       0.4       0.2       0.1
+    1739.8    1725.1    1697.8    1670.7    1629.3    1595.2    1555.4    1496.7
+    1324.7    1209.7    1067.7     938.0     736.8     576.8     423.8     288.7
+     163.9     124.3     105.5      94.1      90.2      83.9      64.6      44.4
+      32.4      26.8      19.6      12.9       7.9       4.1       2.8       2.2
+       1.1       0.2       0.2       0.1       0.2

src/examples/ies/06b4cfdc8805709e767b5e2e904be8ad.ies

@@ -0,0 +1,87 @@
+IESNA:LM-63-1995
+[TEST] 
+[MANUFAC] BEGA
+[MORE] Copyright LUMCat V 
+[LUMCAT] 
+[LUMINAIRE] 50899.2K3
+[LAMPCAT] LED  11,5W
+[LAMP]    1221 lm,14 W
+TILT=NONE
+1 -1 1.0 19 24 1 2 -0.120 0.000 0.000
+1.0 1.0 14
+   0.0   5.0  10.0  15.0  20.0  25.0  30.0  35.0  40.0  45.0  50.0  55.0  60.0
+  65.0  70.0  75.0  80.0  85.0  90.0
+   0.0  15.0  30.0  45.0  60.0  75.0  90.0 105.0 120.0 135.0 150.0 165.0 180.0
+ 195.0 210.0 225.0 240.0 255.0 270.0 285.0 300.0 315.0 330.0 345.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0
+    2160.3    1896.0    1447.3    1122.5     882.7     695.9     546.9     529.2
+     284.6      41.6      27.5      23.8      21.4      20.2      18.5      10.0
+       4.9       1.7       0.0

src/examples/ies/1a936937a49c63374e6d4fbed9252b29.ies

@@ -0,0 +1,30 @@
+IESNA:LM-63-2002
+[TEST] LightLab International Test Report No. LL20433-R01-S1
+[MANUFAC] Efficient Lighting Systems,
+[MORE] Brunswick. VIC. 3056.
+[LUMINAIRE] Efficient Lighting Systems LED Display Track Light. Product ID: DT106.XTM10.N.94.61.
+[MORE] Cylindrical cast aluminium body and rectangular gear housing, 150 x 165 x 140 mm deep.
+[MORE] Recessed glass lens. Luminous opening of 92 mm diameter. Specular multifaceted “15 degree” reflector
+[MORE] about LED. One "Xicato XTM19954030CCA 0D" LED centred 60 mm above L/O.
+[MORE] One Harvard Technology CL40-1050S2D 220-240V 50/60Hz electronic driver set to “1050mA”
+[OTHER] Absolute test - lamp lumens value set to -1
+[MORE] NA conventions used for C0 plane alignment and C-plane rotation direction.
+[MORE] The sample was tested at a distance of 8m.
+[MORE] This IES file created by LightLab/LSA Report program version 3.803a.
+[DATE] This file created: Tuesday, 26 September 2017 4:14:01 PM
+[LUMCAT] DT106.XTM10.N.94.61
+[TESTLAB] LightLab International
+[ISSUEDATE] 26/09/2017
+TILT=NONE
+1 -1 1.498 181 1 1 2 -0.092 -0.092 0
+1 1 39
+0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 5.5 6 6.5 7 7.5 8 8.5 9 9.5 10 10.5 11 11.5 12 12.5 13 13.5 14 14.5 15 15.5 16 16.5 17 17.5 18 18.5 19 19.5 20 20.5 21 21.5 22 22.5 23 23.5 24 24.5 25 25.5 26 26.5 27 27.5 28 28.5 29 29.5 30 30.5 31 31.5 32 32.5 33 33.5 34 
+34.5 35 35.5 36 36.5 37 37.5 38 38.5 39 39.5 40 40.5 41 41.5 42 42.5 43 43.5 44 44.5 45 45.5 46 46.5 47 47.5 48 48.5 49 49.5 50 50.5 51 51.5 52 52.5 53 53.5 54 54.5 55 55.5 56 56.5 57 57.5 58 58.5 59 59.5 60 60.5 61 61.5 62 62.5 63 63.5 64 64.5 65 65.5 66
+ 66.5 67 67.5 68 68.5 69 69.5 70 70.5 71 71.5 72 72.5 73 73.5 74 74.5 75 75.5 76 76.5 77 77.5 78 78.5 79 79.5 80 80.5 81 81.5 82 82.5 83 83.5 84 84.5 85 85.5 86 86.5 87 87.5 88 88.5 89 89.5 90
+0
+9769.798 9766.099 9733.675 9662.947 9575.834 9442.665 9280.229 9118.304 8886.575 8613.292 8341.374 7954.059 7478.424 7037.077 6451.128 5813.887 5183.818 4670.251 4124.621 3645.885 3310.188 2945.517 2631.518 2403.866 2164.416 1958.844 1816.224 1663.451 
+1524.167 1419.652 1306.115 1202.535 1115.449 1047.913 981.195 921.649 876.95 831.168 790.026 760.98 730.924 706.114 687.086 667.788 650.355 637.35 624.922 614.813 604.786 598.047 591.914 586.282 582.085 577.621 574.641 572.333 569.62 567.557 565.539 
+563.204 559.745 553.524 544.477 534.858 527.80 521.81 511.364 498.373 483.43 463.707 439.765 418.717 389.445 360.335 336.512 304.879 270.151 238.945 213.729 181.877 150.681 128.811 105.391 82.645 66.833 52.248 42.075 37.054 34.538 33.947 33.94 34.272 
+34.798 35.093 35.396 35.972 36.688 37.212 38.144 38.89 40.057 40.797 41.463 40.917 39.831 37.592 34.888 32.145 28.847 25.431 22.88 20.927 19.271 18.25 17.761 17.155 16.807 16.327 16.267 15.817 15.558 14.90 14.597 14.109 13.879 13.68 13.192 13.221 12.815 
+12.386 12.512 12.193 12.364 11.876 11.735 11.684 11.387 11.248 11.307 11.121 10.967 10.93 10.766 10.818 10.663 10.766 10.522 10.745 10.486 10.56 10.308 10.079 10.064 9.99 9.813 9.724 9.354 9.303 9.111 8.586 8.408 8.061 7.779 7.129 6.693 6.123 5.287 4.541 
+3.646 3.513 2.833 2.678 2.33 1.916 1.709 1.178 0.814 0.502 0.396 0.059 0.00

src/examples/ies/README.md

@@ -0,0 +1,3 @@
+Profiles from the [IES Library](https://ieslibrary.com/en/home) website.
+
+New profiles can be created via [CNDL](https://cndl.io/).

src/examples/jsm/Addons.js

@@ -0,0 +1,290 @@
+export * from './animation/AnimationClipCreator.js';
+export * from './animation/CCDIKSolver.js';
+export * from './animation/MMDAnimationHelper.js';
+export * from './animation/MMDPhysics.js';
+
+export * from './cameras/CinematicCamera.js';
+
+export { default as WebGL } from './capabilities/WebGL.js';
+
+export * from './controls/ArcballControls.js';
+export * from './controls/DragControls.js';
+export * from './controls/FirstPersonControls.js';
+export * from './controls/FlyControls.js';
+export * from './controls/MapControls.js';
+export * from './controls/OrbitControls.js';
+export * from './controls/PointerLockControls.js';
+export * from './controls/TrackballControls.js';
+export * from './controls/TransformControls.js';
+
+export * from './csm/CSM.js';
+export * from './csm/CSMFrustum.js';
+export * from './csm/CSMHelper.js';
+export * from './csm/CSMShader.js';
+
+export * as Curves from './curves/CurveExtras.js';
+export * from './curves/NURBSCurve.js';
+export * from './curves/NURBSSurface.js';
+export * as NURBSUtils from './curves/NURBSUtils.js';
+
+export * from './effects/AnaglyphEffect.js';
+export * from './effects/AsciiEffect.js';
+export * from './effects/OutlineEffect.js';
+export * from './effects/ParallaxBarrierEffect.js';
+export * from './effects/PeppersGhostEffect.js';
+export * from './effects/StereoEffect.js';
+
+export * from './environments/DebugEnvironment.js';
+export * from './environments/RoomEnvironment.js';
+
+export * from './exporters/DRACOExporter.js';
+export * from './exporters/EXRExporter.js';
+export * from './exporters/GLTFExporter.js';
+export * from './exporters/KTX2Exporter.js';
+export * from './exporters/MMDExporter.js';
+export * from './exporters/OBJExporter.js';
+export * from './exporters/PLYExporter.js';
+export * from './exporters/STLExporter.js';
+export * from './exporters/USDZExporter.js';
+
+export * from './geometries/BoxLineGeometry.js';
+export * from './geometries/ConvexGeometry.js';
+export * from './geometries/DecalGeometry.js';
+export * from './geometries/ParametricGeometries.js';
+export * from './geometries/ParametricGeometry.js';
+export * from './geometries/RoundedBoxGeometry.js';
+export * from './geometries/TeapotGeometry.js';
+export * from './geometries/TextGeometry.js';
+
+export * from './helpers/LightProbeHelper.js';
+export * from './helpers/OctreeHelper.js';
+export * from './helpers/PositionalAudioHelper.js';
+export * from './helpers/RectAreaLightHelper.js';
+export * from './helpers/VertexNormalsHelper.js';
+export * from './helpers/VertexTangentsHelper.js';
+export * from './helpers/ViewHelper.js';
+
+export * from './interactive/HTMLMesh.js';
+export * from './interactive/InteractiveGroup.js';
+export * from './interactive/SelectionBox.js';
+export * from './interactive/SelectionHelper.js';
+
+export { default as IESSpotLight } from './lights/IESSpotLight.js';
+export * from './lights/LightProbeGenerator.js';
+export * from './lights/RectAreaLightUniformsLib.js';
+
+export * from './lines/Line2.js';
+export * from './lines/LineGeometry.js';
+export * from './lines/LineMaterial.js';
+export * from './lines/LineSegments2.js';
+export * from './lines/LineSegmentsGeometry.js';
+export * from './lines/Wireframe.js';
+export * from './lines/WireframeGeometry2.js';
+
+export * from './loaders/3DMLoader.js';
+export * from './loaders/3MFLoader.js';
+export * from './loaders/AMFLoader.js';
+export * from './loaders/BVHLoader.js';
+export * from './loaders/ColladaLoader.js';
+export * from './loaders/DDSLoader.js';
+export * from './loaders/DRACOLoader.js';
+export * from './loaders/EXRLoader.js';
+export * from './loaders/FBXLoader.js';
+export * from './loaders/FontLoader.js';
+export * from './loaders/GCodeLoader.js';
+export * from './loaders/GLTFLoader.js';
+export * from './loaders/HDRCubeTextureLoader.js';
+export * from './loaders/IESLoader.js';
+export * from './loaders/KMZLoader.js';
+export * from './loaders/KTX2Loader.js';
+export * from './loaders/KTXLoader.js';
+export * from './loaders/LDrawLoader.js';
+export * from './loaders/LUT3dlLoader.js';
+export * from './loaders/LUTCubeLoader.js';
+export * from './loaders/LWOLoader.js';
+export * from './loaders/LogLuvLoader.js';
+export * from './loaders/LottieLoader.js';
+export * from './loaders/MD2Loader.js';
+export * from './loaders/MDDLoader.js';
+export * from './loaders/MMDLoader.js';
+export * from './loaders/MTLLoader.js';
+export * from './loaders/NRRDLoader.js';
+export * from './loaders/OBJLoader.js';
+export * from './loaders/PCDLoader.js';
+export * from './loaders/PDBLoader.js';
+export * from './loaders/PLYLoader.js';
+export * from './loaders/PVRLoader.js';
+export * from './loaders/RGBELoader.js';
+export * from './loaders/RGBMLoader.js';
+export * from './loaders/STLLoader.js';
+export * from './loaders/SVGLoader.js';
+export * from './loaders/TDSLoader.js';
+export * from './loaders/TGALoader.js';
+export * from './loaders/TIFFLoader.js';
+export * from './loaders/TTFLoader.js';
+export * from './loaders/TiltLoader.js';
+export * from './loaders/USDZLoader.js';
+export * from './loaders/VOXLoader.js';
+export * from './loaders/VRMLLoader.js';
+export * from './loaders/VTKLoader.js';
+export * from './loaders/XYZLoader.js';
+
+export * from './materials/MeshGouraudMaterial.js';
+
+export * from './math/Capsule.js';
+export * from './math/ColorConverter.js';
+export * from './math/ConvexHull.js';
+export * from './math/ImprovedNoise.js';
+export * from './math/Lut.js';
+export * from './math/MeshSurfaceSampler.js';
+export * from './math/OBB.js';
+export * from './math/Octree.js';
+export * from './math/SimplexNoise.js';
+
+export * from './misc/ConvexObjectBreaker.js';
+export * from './misc/GPUComputationRenderer.js';
+export * from './misc/Gyroscope.js';
+export * from './misc/MD2Character.js';
+export * from './misc/MD2CharacterComplex.js';
+export * from './misc/MorphAnimMesh.js';
+export * from './misc/MorphBlendMesh.js';
+export * from './misc/ProgressiveLightMap.js';
+export * from './misc/RollerCoaster.js';
+export * from './misc/TubePainter.js';
+export * from './misc/Volume.js';
+export * from './misc/VolumeSlice.js';
+
+export * from './modifiers/CurveModifier.js';
+export * from './modifiers/EdgeSplitModifier.js';
+export * from './modifiers/SimplifyModifier.js';
+export * from './modifiers/TessellateModifier.js';
+
+export * from './objects/BatchedMesh.js';
+export * from './objects/GroundProjectedSkybox.js';
+export * from './objects/Lensflare.js';
+export * from './objects/MarchingCubes.js';
+export * from './objects/Reflector.js';
+export * from './objects/ReflectorForSSRPass.js';
+export * from './objects/Refractor.js';
+export * from './objects/ShadowMesh.js';
+export * from './objects/Sky.js';
+export * from './objects/Water.js';
+export { Water as Water2 } from './objects/Water2.js';
+
+export * from './physics/AmmoPhysics.js';
+export * from './physics/RapierPhysics.js';
+
+export * from './postprocessing/AfterimagePass.js';
+export * from './postprocessing/BloomPass.js';
+export * from './postprocessing/BokehPass.js';
+export * from './postprocessing/ClearPass.js';
+export * from './postprocessing/CubeTexturePass.js';
+export * from './postprocessing/DotScreenPass.js';
+export * from './postprocessing/EffectComposer.js';
+export * from './postprocessing/FilmPass.js';
+export * from './postprocessing/GlitchPass.js';
+export * from './postprocessing/HalftonePass.js';
+export * from './postprocessing/LUTPass.js';
+export * from './postprocessing/MaskPass.js';
+export * from './postprocessing/OutlinePass.js';
+export * from './postprocessing/OutputPass.js';
+export * from './postprocessing/Pass.js';
+export * from './postprocessing/RenderPass.js';
+export * from './postprocessing/RenderPixelatedPass.js';
+export * from './postprocessing/SAOPass.js';
+export * from './postprocessing/SMAAPass.js';
+export * from './postprocessing/SSAARenderPass.js';
+export * from './postprocessing/SSAOPass.js';
+export * from './postprocessing/SSRPass.js';
+export * from './postprocessing/SavePass.js';
+export * from './postprocessing/ShaderPass.js';
+export * from './postprocessing/TAARenderPass.js';
+export * from './postprocessing/TexturePass.js';
+export * from './postprocessing/UnrealBloomPass.js';
+
+export * from './renderers/CSS2DRenderer.js';
+export * from './renderers/CSS3DRenderer.js';
+export * from './renderers/Projector.js';
+export * from './renderers/SVGRenderer.js';
+
+export * from './shaders/ACESFilmicToneMappingShader.js';
+export * from './shaders/AfterimageShader.js';
+export * from './shaders/BasicShader.js';
+export * from './shaders/BleachBypassShader.js';
+export * from './shaders/BlendShader.js';
+export * from './shaders/BokehShader.js';
+export { BokehShader as BokehShader2 } from './shaders/BokehShader2.js';
+export * from './shaders/BrightnessContrastShader.js';
+export * from './shaders/ColorCorrectionShader.js';
+export * from './shaders/ColorifyShader.js';
+export * from './shaders/ConvolutionShader.js';
+export * from './shaders/CopyShader.js';
+export * from './shaders/DOFMipMapShader.js';
+export * from './shaders/DepthLimitedBlurShader.js';
+export * from './shaders/DigitalGlitch.js';
+export * from './shaders/DotScreenShader.js';
+export * from './shaders/ExposureShader.js';
+export * from './shaders/FXAAShader.js';
+export * from './shaders/FilmShader.js';
+export * from './shaders/FocusShader.js';
+export * from './shaders/FreiChenShader.js';
+export * from './shaders/GammaCorrectionShader.js';
+export * from './shaders/GodRaysShader.js';
+export * from './shaders/HalftoneShader.js';
+export * from './shaders/HorizontalBlurShader.js';
+export * from './shaders/HorizontalTiltShiftShader.js';
+export * from './shaders/HueSaturationShader.js';
+export * from './shaders/KaleidoShader.js';
+export * from './shaders/LuminosityHighPassShader.js';
+export * from './shaders/LuminosityShader.js';
+export * from './shaders/MMDToonShader.js';
+export * from './shaders/MirrorShader.js';
+export * from './shaders/NormalMapShader.js';
+export * from './shaders/OutputShader.js';
+export * from './shaders/RGBShiftShader.js';
+export * from './shaders/SAOShader.js';
+export * from './shaders/SMAAShader.js';
+export * from './shaders/SSAOShader.js';
+export * from './shaders/SSRShader.js';
+export * from './shaders/SepiaShader.js';
+export * from './shaders/SobelOperatorShader.js';
+export * from './shaders/SubsurfaceScatteringShader.js';
+export * from './shaders/TechnicolorShader.js';
+export * from './shaders/ToonShader.js';
+export * from './shaders/TriangleBlurShader.js';
+export * from './shaders/UnpackDepthRGBAShader.js';
+export * from './shaders/VelocityShader.js';
+export * from './shaders/VerticalBlurShader.js';
+export * from './shaders/VerticalTiltShiftShader.js';
+export * from './shaders/VignetteShader.js';
+export * from './shaders/VolumeShader.js';
+export * from './shaders/WaterRefractionShader.js';
+
+export * from './textures/FlakesTexture.js';
+
+export * as BufferGeometryUtils from './utils/BufferGeometryUtils.js';
+export * as CameraUtils from './utils/CameraUtils.js';
+export * from './utils/GPUStatsPanel.js';
+export * as GeometryCompressionUtils from './utils/GeometryCompressionUtils.js';
+export * as GeometryUtils from './utils/GeometryUtils.js';
+export * from './utils/LDrawUtils.js';
+export * from './utils/PackedPhongMaterial.js';
+export * as SceneUtils from './utils/SceneUtils.js';
+export * from './utils/ShadowMapViewer.js';
+export * as SkeletonUtils from './utils/SkeletonUtils.js';
+export * from './utils/TextureUtils.js';
+export * from './utils/UVsDebug.js';
+export * from './utils/WorkerPool.js';
+
+export * from './webxr/ARButton.js';
+export * from './webxr/OculusHandModel.js';
+export * from './webxr/OculusHandPointerModel.js';
+export * from './webxr/Text2D.js';
+export * from './webxr/VRButton.js';
+export * from './webxr/XRButton.js';
+export * from './webxr/XRControllerModelFactory.js';
+export * from './webxr/XREstimatedLight.js';
+export * from './webxr/XRHandMeshModel.js';
+export * from './webxr/XRHandModelFactory.js';
+export * from './webxr/XRHandPrimitiveModel.js';
+export * from './webxr/XRPlanes.js';

src/examples/jsm/animation/AnimationClipCreator.js

@@ -0,0 +1,116 @@
+import {
+	AnimationClip,
+	BooleanKeyframeTrack,
+	ColorKeyframeTrack,
+	NumberKeyframeTrack,
+	Vector3,
+	VectorKeyframeTrack
+} from 'three';
+
+class AnimationClipCreator {
+
+	static CreateRotationAnimation( period, axis = 'x' ) {
+
+		const times = [ 0, period ], values = [ 0, 360 ];
+
+		const trackName = '.rotation[' + axis + ']';
+
+		const track = new NumberKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, period, [ track ] );
+
+	}
+
+	static CreateScaleAxisAnimation( period, axis = 'x' ) {
+
+		const times = [ 0, period ], values = [ 0, 1 ];
+
+		const trackName = '.scale[' + axis + ']';
+
+		const track = new NumberKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, period, [ track ] );
+
+	}
+
+	static CreateShakeAnimation( duration, shakeScale ) {
+
+		const times = [], values = [], tmp = new Vector3();
+
+		for ( let i = 0; i < duration * 10; i ++ ) {
+
+			times.push( i / 10 );
+
+			tmp.set( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ).
+				multiply( shakeScale ).
+				toArray( values, values.length );
+
+		}
+
+		const trackName = '.position';
+
+		const track = new VectorKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+	static CreatePulsationAnimation( duration, pulseScale ) {
+
+		const times = [], values = [], tmp = new Vector3();
+
+		for ( let i = 0; i < duration * 10; i ++ ) {
+
+			times.push( i / 10 );
+
+			const scaleFactor = Math.random() * pulseScale;
+			tmp.set( scaleFactor, scaleFactor, scaleFactor ).
+				toArray( values, values.length );
+
+		}
+
+		const trackName = '.scale';
+
+		const track = new VectorKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+	static CreateVisibilityAnimation( duration ) {
+
+		const times = [ 0, duration / 2, duration ], values = [ true, false, true ];
+
+		const trackName = '.visible';
+
+		const track = new BooleanKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+	static CreateMaterialColorAnimation( duration, colors ) {
+
+		const times = [], values = [],
+			timeStep = duration / colors.length;
+
+		for ( let i = 0; i < colors.length; i ++ ) {
+
+			times.push( i * timeStep );
+
+			const color = colors[ i ];
+			values.push( color.r, color.g, color.b );
+
+		}
+
+		const trackName = '.material.color';
+
+		const track = new ColorKeyframeTrack( trackName, times, values );
+
+		return new AnimationClip( null, duration, [ track ] );
+
+	}
+
+}
+
+export { AnimationClipCreator };

src/examples/jsm/animation/CCDIKSolver.js

@@ -0,0 +1,482 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Color,
+	Line,
+	LineBasicMaterial,
+	Matrix4,
+	Mesh,
+	MeshBasicMaterial,
+	Object3D,
+	Quaternion,
+	SphereGeometry,
+	Vector3
+} from 'three';
+
+const _q = new Quaternion();
+const _targetPos = new Vector3();
+const _targetVec = new Vector3();
+const _effectorPos = new Vector3();
+const _effectorVec = new Vector3();
+const _linkPos = new Vector3();
+const _invLinkQ = new Quaternion();
+const _linkScale = new Vector3();
+const _axis = new Vector3();
+const _vector = new Vector3();
+const _matrix = new Matrix4();
+
+
+/**
+ * CCD Algorithm
+ *  - https://sites.google.com/site/auraliusproject/ccd-algorithm
+ *
+ * // ik parameter example
+ * //
+ * // target, effector, index in links are bone index in skeleton.bones.
+ * // the bones relation should be
+ * // <-- parent                                  child -->
+ * // links[ n ], links[ n - 1 ], ..., links[ 0 ], effector
+ * iks = [ {
+ *	target: 1,
+ *	effector: 2,
+ *	links: [ { index: 5, limitation: new Vector3( 1, 0, 0 ) }, { index: 4, enabled: false }, { index : 3 } ],
+ *	iteration: 10,
+ *	minAngle: 0.0,
+ *	maxAngle: 1.0,
+ * } ];
+ */
+
+class CCDIKSolver {
+
+	/**
+	 * @param {THREE.SkinnedMesh} mesh
+	 * @param {Array<Object>} iks
+	 */
+	constructor( mesh, iks = [] ) {
+
+		this.mesh = mesh;
+		this.iks = iks;
+
+		this._valid();
+
+	}
+
+	/**
+	 * Update all IK bones.
+	 *
+	 * @return {CCDIKSolver}
+	 */
+	update() {
+
+		const iks = this.iks;
+
+		for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+			this.updateOne( iks[ i ] );
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Update one IK bone
+	 *
+	 * @param {Object} ik parameter
+	 * @return {CCDIKSolver}
+	 */
+	updateOne( ik ) {
+
+		const bones = this.mesh.skeleton.bones;
+
+		// for reference overhead reduction in loop
+		const math = Math;
+
+		const effector = bones[ ik.effector ];
+		const target = bones[ ik.target ];
+
+		// don't use getWorldPosition() here for the performance
+		// because it calls updateMatrixWorld( true ) inside.
+		_targetPos.setFromMatrixPosition( target.matrixWorld );
+
+		const links = ik.links;
+		const iteration = ik.iteration !== undefined ? ik.iteration : 1;
+
+		for ( let i = 0; i < iteration; i ++ ) {
+
+			let rotated = false;
+
+			for ( let j = 0, jl = links.length; j < jl; j ++ ) {
+
+				const link = bones[ links[ j ].index ];
+
+				// skip this link and following links.
+				// this skip is used for MMD performance optimization.
+				if ( links[ j ].enabled === false ) break;
+
+				const limitation = links[ j ].limitation;
+				const rotationMin = links[ j ].rotationMin;
+				const rotationMax = links[ j ].rotationMax;
+
+				// don't use getWorldPosition/Quaternion() here for the performance
+				// because they call updateMatrixWorld( true ) inside.
+				link.matrixWorld.decompose( _linkPos, _invLinkQ, _linkScale );
+				_invLinkQ.invert();
+				_effectorPos.setFromMatrixPosition( effector.matrixWorld );
+
+				// work in link world
+				_effectorVec.subVectors( _effectorPos, _linkPos );
+				_effectorVec.applyQuaternion( _invLinkQ );
+				_effectorVec.normalize();
+
+				_targetVec.subVectors( _targetPos, _linkPos );
+				_targetVec.applyQuaternion( _invLinkQ );
+				_targetVec.normalize();
+
+				let angle = _targetVec.dot( _effectorVec );
+
+				if ( angle > 1.0 ) {
+
+					angle = 1.0;
+
+				} else if ( angle < - 1.0 ) {
+
+					angle = - 1.0;
+
+				}
+
+				angle = math.acos( angle );
+
+				// skip if changing angle is too small to prevent vibration of bone
+				if ( angle < 1e-5 ) continue;
+
+				if ( ik.minAngle !== undefined && angle < ik.minAngle ) {
+
+					angle = ik.minAngle;
+
+				}
+
+				if ( ik.maxAngle !== undefined && angle > ik.maxAngle ) {
+
+					angle = ik.maxAngle;
+
+				}
+
+				_axis.crossVectors( _effectorVec, _targetVec );
+				_axis.normalize();
+
+				_q.setFromAxisAngle( _axis, angle );
+				link.quaternion.multiply( _q );
+
+				// TODO: re-consider the limitation specification
+				if ( limitation !== undefined ) {
+
+					let c = link.quaternion.w;
+
+					if ( c > 1.0 ) c = 1.0;
+
+					const c2 = math.sqrt( 1 - c * c );
+					link.quaternion.set( limitation.x * c2,
+					                     limitation.y * c2,
+					                     limitation.z * c2,
+					                     c );
+
+				}
+
+				if ( rotationMin !== undefined ) {
+
+					link.rotation.setFromVector3( _vector.setFromEuler( link.rotation ).max( rotationMin ) );
+
+				}
+
+				if ( rotationMax !== undefined ) {
+
+					link.rotation.setFromVector3( _vector.setFromEuler( link.rotation ).min( rotationMax ) );
+
+				}
+
+				link.updateMatrixWorld( true );
+
+				rotated = true;
+
+			}
+
+			if ( ! rotated ) break;
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Creates Helper
+	 *
+	 * @return {CCDIKHelper}
+	 */
+	createHelper() {
+
+		return new CCDIKHelper( this.mesh, this.iks );
+
+	}
+
+	// private methods
+
+	_valid() {
+
+		const iks = this.iks;
+		const bones = this.mesh.skeleton.bones;
+
+		for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+			const ik = iks[ i ];
+			const effector = bones[ ik.effector ];
+			const links = ik.links;
+			let link0, link1;
+
+			link0 = effector;
+
+			for ( let j = 0, jl = links.length; j < jl; j ++ ) {
+
+				link1 = bones[ links[ j ].index ];
+
+				if ( link0.parent !== link1 ) {
+
+					console.warn( 'THREE.CCDIKSolver: bone ' + link0.name + ' is not the child of bone ' + link1.name );
+
+				}
+
+				link0 = link1;
+
+			}
+
+		}
+
+	}
+
+}
+
+function getPosition( bone, matrixWorldInv ) {
+
+	return _vector
+		.setFromMatrixPosition( bone.matrixWorld )
+		.applyMatrix4( matrixWorldInv );
+
+}
+
+function setPositionOfBoneToAttributeArray( array, index, bone, matrixWorldInv ) {
+
+	const v = getPosition( bone, matrixWorldInv );
+
+	array[ index * 3 + 0 ] = v.x;
+	array[ index * 3 + 1 ] = v.y;
+	array[ index * 3 + 2 ] = v.z;
+
+}
+
+/**
+ * Visualize IK bones
+ *
+ * @param {SkinnedMesh} mesh
+ * @param {Array<Object>} iks
+ */
+class CCDIKHelper extends Object3D {
+
+	constructor( mesh, iks = [], sphereSize = 0.25 ) {
+
+		super();
+
+		this.root = mesh;
+		this.iks = iks;
+
+		this.matrix.copy( mesh.matrixWorld );
+		this.matrixAutoUpdate = false;
+
+		this.sphereGeometry = new SphereGeometry( sphereSize, 16, 8 );
+
+		this.targetSphereMaterial = new MeshBasicMaterial( {
+			color: new Color( 0xff8888 ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this.effectorSphereMaterial = new MeshBasicMaterial( {
+			color: new Color( 0x88ff88 ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this.linkSphereMaterial = new MeshBasicMaterial( {
+			color: new Color( 0x8888ff ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this.lineMaterial = new LineBasicMaterial( {
+			color: new Color( 0xff0000 ),
+			depthTest: false,
+			depthWrite: false,
+			transparent: true
+		} );
+
+		this._init();
+
+	}
+
+	/**
+	 * Updates IK bones visualization.
+	 */
+	updateMatrixWorld( force ) {
+
+		const mesh = this.root;
+
+		if ( this.visible ) {
+
+			let offset = 0;
+
+			const iks = this.iks;
+			const bones = mesh.skeleton.bones;
+
+			_matrix.copy( mesh.matrixWorld ).invert();
+
+			for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+				const ik = iks[ i ];
+
+				const targetBone = bones[ ik.target ];
+				const effectorBone = bones[ ik.effector ];
+
+				const targetMesh = this.children[ offset ++ ];
+				const effectorMesh = this.children[ offset ++ ];
+
+				targetMesh.position.copy( getPosition( targetBone, _matrix ) );
+				effectorMesh.position.copy( getPosition( effectorBone, _matrix ) );
+
+				for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
+
+					const link = ik.links[ j ];
+					const linkBone = bones[ link.index ];
+
+					const linkMesh = this.children[ offset ++ ];
+
+					linkMesh.position.copy( getPosition( linkBone, _matrix ) );
+
+				}
+
+				const line = this.children[ offset ++ ];
+				const array = line.geometry.attributes.position.array;
+
+				setPositionOfBoneToAttributeArray( array, 0, targetBone, _matrix );
+				setPositionOfBoneToAttributeArray( array, 1, effectorBone, _matrix );
+
+				for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
+
+					const link = ik.links[ j ];
+					const linkBone = bones[ link.index ];
+					setPositionOfBoneToAttributeArray( array, j + 2, linkBone, _matrix );
+
+				}
+
+				line.geometry.attributes.position.needsUpdate = true;
+
+			}
+
+		}
+
+		this.matrix.copy( mesh.matrixWorld );
+
+		super.updateMatrixWorld( force );
+
+	}
+
+	/**
+	 * Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
+	 */
+	dispose() {
+
+		this.sphereGeometry.dispose();
+
+		this.targetSphereMaterial.dispose();
+		this.effectorSphereMaterial.dispose();
+		this.linkSphereMaterial.dispose();
+		this.lineMaterial.dispose();
+
+		const children = this.children;
+
+		for ( let i = 0; i < children.length; i ++ ) {
+
+			const child = children[ i ];
+
+			if ( child.isLine ) child.geometry.dispose();
+
+		}
+
+	}
+
+	// private method
+
+	_init() {
+
+		const scope = this;
+		const iks = this.iks;
+
+		function createLineGeometry( ik ) {
+
+			const geometry = new BufferGeometry();
+			const vertices = new Float32Array( ( 2 + ik.links.length ) * 3 );
+			geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
+
+			return geometry;
+
+		}
+
+		function createTargetMesh() {
+
+			return new Mesh( scope.sphereGeometry, scope.targetSphereMaterial );
+
+		}
+
+		function createEffectorMesh() {
+
+			return new Mesh( scope.sphereGeometry, scope.effectorSphereMaterial );
+
+		}
+
+		function createLinkMesh() {
+
+			return new Mesh( scope.sphereGeometry, scope.linkSphereMaterial );
+
+		}
+
+		function createLine( ik ) {
+
+			return new Line( createLineGeometry( ik ), scope.lineMaterial );
+
+		}
+
+		for ( let i = 0, il = iks.length; i < il; i ++ ) {
+
+			const ik = iks[ i ];
+
+			this.add( createTargetMesh() );
+			this.add( createEffectorMesh() );
+
+			for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
+
+				this.add( createLinkMesh() );
+
+			}
+
+			this.add( createLine( ik ) );
+
+		}
+
+	}
+
+}
+
+export { CCDIKSolver, CCDIKHelper };

src/examples/jsm/cameras/CinematicCamera.js

@@ -0,0 +1,208 @@
+import {
+	Mesh,
+	OrthographicCamera,
+	PerspectiveCamera,
+	PlaneGeometry,
+	Scene,
+	ShaderMaterial,
+	UniformsUtils,
+	WebGLRenderTarget
+} from 'three';
+
+import { BokehShader, BokehDepthShader } from '../shaders/BokehShader2.js';
+
+class CinematicCamera extends PerspectiveCamera {
+
+	constructor( fov, aspect, near, far ) {
+
+		super( fov, aspect, near, far );
+
+		this.type = 'CinematicCamera';
+
+		this.postprocessing = { enabled: true };
+		this.shaderSettings = {
+			rings: 3,
+			samples: 4
+		};
+
+		const depthShader = BokehDepthShader;
+
+		this.materialDepth = new ShaderMaterial( {
+			uniforms: depthShader.uniforms,
+			vertexShader: depthShader.vertexShader,
+			fragmentShader: depthShader.fragmentShader
+		} );
+
+		this.materialDepth.uniforms[ 'mNear' ].value = near;
+		this.materialDepth.uniforms[ 'mFar' ].value = far;
+
+		// In case of cinematicCamera, having a default lens set is important
+		this.setLens();
+
+		this.initPostProcessing();
+
+	}
+
+	// providing fnumber and coc(Circle of Confusion) as extra arguments
+	// In case of cinematicCamera, having a default lens set is important
+	// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
+	setLens( focalLength = 35, filmGauge = 35, fNumber = 8, coc = 0.019 ) {
+
+		this.filmGauge = filmGauge;
+
+		this.setFocalLength( focalLength );
+
+		this.fNumber = fNumber;
+		this.coc = coc;
+
+		// fNumber is focalLength by aperture
+		this.aperture = focalLength / this.fNumber;
+
+		// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
+		this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );
+
+	}
+
+	linearize( depth ) {
+
+		const zfar = this.far;
+		const znear = this.near;
+		return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
+
+	}
+
+	smoothstep( near, far, depth ) {
+
+		const x = this.saturate( ( depth - near ) / ( far - near ) );
+		return x * x * ( 3 - 2 * x );
+
+	}
+
+	saturate( x ) {
+
+		return Math.max( 0, Math.min( 1, x ) );
+
+	}
+
+	// function for focusing at a distance from the camera
+	focusAt( focusDistance = 20 ) {
+
+		const focalLength = this.getFocalLength();
+
+		// distance from the camera (normal to frustrum) to focus on
+		this.focus = focusDistance;
+
+		// the nearest point from the camera which is in focus (unused)
+		this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );
+
+		// the farthest point from the camera which is in focus (unused)
+		this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );
+
+		// the gap or width of the space in which is everything is in focus (unused)
+		this.depthOfField = this.farPoint - this.nearPoint;
+
+		// Considering minimum distance of focus for a standard lens (unused)
+		if ( this.depthOfField < 0 ) this.depthOfField = 0;
+
+		this.sdistance = this.smoothstep( this.near, this.far, this.focus );
+
+		this.ldistance = this.linearize( 1 -	this.sdistance );
+
+		this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
+
+	}
+
+	initPostProcessing() {
+
+		if ( this.postprocessing.enabled ) {
+
+			this.postprocessing.scene = new Scene();
+
+			this.postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,	window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
+
+			this.postprocessing.scene.add( this.postprocessing.camera );
+
+			this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
+			this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
+
+			const bokeh_shader = BokehShader;
+
+			this.postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );
+
+			this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;
+			this.postprocessing.bokeh_uniforms[ 'tDepth' ].value = this.postprocessing.rtTextureDepth.texture;
+
+			this.postprocessing.bokeh_uniforms[ 'manualdof' ].value = 0;
+			this.postprocessing.bokeh_uniforms[ 'shaderFocus' ].value = 0;
+
+			this.postprocessing.bokeh_uniforms[ 'fstop' ].value = 2.8;
+
+			this.postprocessing.bokeh_uniforms[ 'showFocus' ].value = 1;
+
+			this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1;
+
+			//console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
+
+			this.postprocessing.bokeh_uniforms[ 'znear' ].value = this.near;
+			this.postprocessing.bokeh_uniforms[ 'zfar' ].value = this.near;
+
+
+			this.postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
+
+			this.postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
+
+			this.postprocessing.materialBokeh = new ShaderMaterial( {
+				uniforms: this.postprocessing.bokeh_uniforms,
+				vertexShader: bokeh_shader.vertexShader,
+				fragmentShader: bokeh_shader.fragmentShader,
+				defines: {
+					RINGS: this.shaderSettings.rings,
+					SAMPLES: this.shaderSettings.samples,
+					DEPTH_PACKING: 1
+				}
+			} );
+
+			this.postprocessing.quad = new Mesh( new PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
+			this.postprocessing.quad.position.z = - 500;
+			this.postprocessing.scene.add( this.postprocessing.quad );
+
+		}
+
+	}
+
+	renderCinematic( scene, renderer ) {
+
+		if ( this.postprocessing.enabled ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			renderer.clear();
+
+			// Render scene into texture
+
+			scene.overrideMaterial = null;
+			renderer.setRenderTarget( this.postprocessing.rtTextureColor );
+			renderer.clear();
+			renderer.render( scene, this );
+
+			// Render depth into texture
+
+			scene.overrideMaterial = this.materialDepth;
+			renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
+			renderer.clear();
+			renderer.render( scene, this );
+
+			// Render bokeh composite
+
+			renderer.setRenderTarget( null );
+			renderer.render( this.postprocessing.scene, this.postprocessing.camera );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		}
+
+	}
+
+}
+
+export { CinematicCamera };

src/examples/jsm/capabilities/WebGL.js

@@ -0,0 +1,108 @@
+class WebGL {
+
+	static isWebGLAvailable() {
+
+		try {
+
+			const canvas = document.createElement( 'canvas' );
+			return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	}
+
+	static isWebGL2Available() {
+
+		try {
+
+			const canvas = document.createElement( 'canvas' );
+			return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	}
+
+	static isColorSpaceAvailable( colorSpace ) {
+
+		try {
+
+			const canvas = document.createElement( 'canvas' );
+			const ctx = window.WebGL2RenderingContext && canvas.getContext( 'webgl2' );
+			ctx.drawingBufferColorSpace = colorSpace;
+			return ctx.drawingBufferColorSpace === colorSpace; // deepscan-disable-line SAME_OPERAND_VALUE
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	}
+
+	static getWebGLErrorMessage() {
+
+		return this.getErrorMessage( 1 );
+
+	}
+
+	static getWebGL2ErrorMessage() {
+
+		return this.getErrorMessage( 2 );
+
+	}
+
+	static getErrorMessage( version ) {
+
+		const names = {
+			1: 'WebGL',
+			2: 'WebGL 2'
+		};
+
+		const contexts = {
+			1: window.WebGLRenderingContext,
+			2: window.WebGL2RenderingContext
+		};
+
+		let message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';
+
+		const element = document.createElement( 'div' );
+		element.id = 'webglmessage';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		if ( contexts[ version ] ) {
+
+			message = message.replace( '$0', 'graphics card' );
+
+		} else {
+
+			message = message.replace( '$0', 'browser' );
+
+		}
+
+		message = message.replace( '$1', names[ version ] );
+
+		element.innerHTML = message;
+
+		return element;
+
+	}
+
+}
+
+export default WebGL;

src/examples/jsm/capabilities/WebGPU.js

@@ -0,0 +1,53 @@
+if ( window.GPUShaderStage === undefined ) {
+
+	window.GPUShaderStage = { VERTEX: 1, FRAGMENT: 2, COMPUTE: 4 };
+
+}
+
+let isAvailable = false;
+
+if ( navigator.gpu !== undefined ) {
+
+	const adapter = await navigator.gpu.requestAdapter();
+
+	if ( adapter !== null ) {
+
+		isAvailable = true;
+
+	}
+
+}
+
+class WebGPU {
+
+	static isAvailable() {
+
+		return isAvailable;
+
+	}
+
+	static getErrorMessage() {
+
+		const message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:blue">WebGPU</a> yet';
+
+		const element = document.createElement( 'div' );
+		element.id = 'webgpumessage';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.maxWidth = '400px';
+		element.style.margin = '5em auto 0';
+
+		element.innerHTML = message;
+
+		return element;
+
+	}
+
+}
+
+export default WebGPU;

src/examples/jsm/controls/DragControls.js

@@ -0,0 +1,221 @@
+import {
+	EventDispatcher,
+	Matrix4,
+	Plane,
+	Raycaster,
+	Vector2,
+	Vector3
+} from 'three';
+
+const _plane = new Plane();
+const _raycaster = new Raycaster();
+
+const _pointer = new Vector2();
+const _offset = new Vector3();
+const _intersection = new Vector3();
+const _worldPosition = new Vector3();
+const _inverseMatrix = new Matrix4();
+
+class DragControls extends EventDispatcher {
+
+	constructor( _objects, _camera, _domElement ) {
+
+		super();
+
+		_domElement.style.touchAction = 'none'; // disable touch scroll
+
+		let _selected = null, _hovered = null;
+
+		const _intersections = [];
+
+		//
+
+		const scope = this;
+
+		function activate() {
+
+			_domElement.addEventListener( 'pointermove', onPointerMove );
+			_domElement.addEventListener( 'pointerdown', onPointerDown );
+			_domElement.addEventListener( 'pointerup', onPointerCancel );
+			_domElement.addEventListener( 'pointerleave', onPointerCancel );
+
+		}
+
+		function deactivate() {
+
+			_domElement.removeEventListener( 'pointermove', onPointerMove );
+			_domElement.removeEventListener( 'pointerdown', onPointerDown );
+			_domElement.removeEventListener( 'pointerup', onPointerCancel );
+			_domElement.removeEventListener( 'pointerleave', onPointerCancel );
+
+			_domElement.style.cursor = '';
+
+		}
+
+		function dispose() {
+
+			deactivate();
+
+		}
+
+		function getObjects() {
+
+			return _objects;
+
+		}
+
+		function getRaycaster() {
+
+			return _raycaster;
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			updatePointer( event );
+
+			_raycaster.setFromCamera( _pointer, _camera );
+
+			if ( _selected ) {
+
+				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+					_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+
+				}
+
+				scope.dispatchEvent( { type: 'drag', object: _selected } );
+
+				return;
+
+			}
+
+			// hover support
+
+			if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
+
+				_intersections.length = 0;
+
+				_raycaster.setFromCamera( _pointer, _camera );
+				_raycaster.intersectObjects( _objects, scope.recursive, _intersections );
+
+				if ( _intersections.length > 0 ) {
+
+					const object = _intersections[ 0 ].object;
+
+					_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
+
+					if ( _hovered !== object && _hovered !== null ) {
+
+						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+
+						_domElement.style.cursor = 'auto';
+						_hovered = null;
+
+					}
+
+					if ( _hovered !== object ) {
+
+						scope.dispatchEvent( { type: 'hoveron', object: object } );
+
+						_domElement.style.cursor = 'pointer';
+						_hovered = object;
+
+					}
+
+				} else {
+
+					if ( _hovered !== null ) {
+
+						scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
+
+						_domElement.style.cursor = 'auto';
+						_hovered = null;
+
+					}
+
+				}
+
+			}
+
+		}
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			updatePointer( event );
+
+			_intersections.length = 0;
+
+			_raycaster.setFromCamera( _pointer, _camera );
+			_raycaster.intersectObjects( _objects, scope.recursive, _intersections );
+
+			if ( _intersections.length > 0 ) {
+
+				_selected = ( scope.transformGroup === true ) ? _objects[ 0 ] : _intersections[ 0 ].object;
+
+				_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+					_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
+					_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+				}
+
+				_domElement.style.cursor = 'move';
+
+				scope.dispatchEvent( { type: 'dragstart', object: _selected } );
+
+			}
+
+
+		}
+
+		function onPointerCancel() {
+
+			if ( scope.enabled === false ) return;
+
+			if ( _selected ) {
+
+				scope.dispatchEvent( { type: 'dragend', object: _selected } );
+
+				_selected = null;
+
+			}
+
+			_domElement.style.cursor = _hovered ? 'pointer' : 'auto';
+
+		}
+
+		function updatePointer( event ) {
+
+			const rect = _domElement.getBoundingClientRect();
+
+			_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
+			_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
+
+		}
+
+		activate();
+
+		// API
+
+		this.enabled = true;
+		this.recursive = true;
+		this.transformGroup = false;
+
+		this.activate = activate;
+		this.deactivate = deactivate;
+		this.dispose = dispose;
+		this.getObjects = getObjects;
+		this.getRaycaster = getRaycaster;
+
+	}
+
+}
+
+export { DragControls };

src/examples/jsm/controls/FirstPersonControls.js

@@ -0,0 +1,325 @@
+import {
+	MathUtils,
+	Spherical,
+	Vector3
+} from 'three';
+
+const _lookDirection = new Vector3();
+const _spherical = new Spherical();
+const _target = new Vector3();
+
+class FirstPersonControls {
+
+	constructor( object, domElement ) {
+
+		this.object = object;
+		this.domElement = domElement;
+
+		// API
+
+		this.enabled = true;
+
+		this.movementSpeed = 1.0;
+		this.lookSpeed = 0.005;
+
+		this.lookVertical = true;
+		this.autoForward = false;
+
+		this.activeLook = true;
+
+		this.heightSpeed = false;
+		this.heightCoef = 1.0;
+		this.heightMin = 0.0;
+		this.heightMax = 1.0;
+
+		this.constrainVertical = false;
+		this.verticalMin = 0;
+		this.verticalMax = Math.PI;
+
+		this.mouseDragOn = false;
+
+		// internals
+
+		this.autoSpeedFactor = 0.0;
+
+		this.pointerX = 0;
+		this.pointerY = 0;
+
+		this.moveForward = false;
+		this.moveBackward = false;
+		this.moveLeft = false;
+		this.moveRight = false;
+
+		this.viewHalfX = 0;
+		this.viewHalfY = 0;
+
+		// private variables
+
+		let lat = 0;
+		let lon = 0;
+
+		//
+
+		this.handleResize = function () {
+
+			if ( this.domElement === document ) {
+
+				this.viewHalfX = window.innerWidth / 2;
+				this.viewHalfY = window.innerHeight / 2;
+
+			} else {
+
+				this.viewHalfX = this.domElement.offsetWidth / 2;
+				this.viewHalfY = this.domElement.offsetHeight / 2;
+
+			}
+
+		};
+
+		this.onPointerDown = function ( event ) {
+
+			if ( this.domElement !== document ) {
+
+				this.domElement.focus();
+
+			}
+
+			if ( this.activeLook ) {
+
+				switch ( event.button ) {
+
+					case 0: this.moveForward = true; break;
+					case 2: this.moveBackward = true; break;
+
+				}
+
+			}
+
+			this.mouseDragOn = true;
+
+		};
+
+		this.onPointerUp = function ( event ) {
+
+			if ( this.activeLook ) {
+
+				switch ( event.button ) {
+
+					case 0: this.moveForward = false; break;
+					case 2: this.moveBackward = false; break;
+
+				}
+
+			}
+
+			this.mouseDragOn = false;
+
+		};
+
+		this.onPointerMove = function ( event ) {
+
+			if ( this.domElement === document ) {
+
+				this.pointerX = event.pageX - this.viewHalfX;
+				this.pointerY = event.pageY - this.viewHalfY;
+
+			} else {
+
+				this.pointerX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
+				this.pointerY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
+
+			}
+
+		};
+
+		this.onKeyDown = function ( event ) {
+
+			switch ( event.code ) {
+
+				case 'ArrowUp':
+				case 'KeyW': this.moveForward = true; break;
+
+				case 'ArrowLeft':
+				case 'KeyA': this.moveLeft = true; break;
+
+				case 'ArrowDown':
+				case 'KeyS': this.moveBackward = true; break;
+
+				case 'ArrowRight':
+				case 'KeyD': this.moveRight = true; break;
+
+				case 'KeyR': this.moveUp = true; break;
+				case 'KeyF': this.moveDown = true; break;
+
+			}
+
+		};
+
+		this.onKeyUp = function ( event ) {
+
+			switch ( event.code ) {
+
+				case 'ArrowUp':
+				case 'KeyW': this.moveForward = false; break;
+
+				case 'ArrowLeft':
+				case 'KeyA': this.moveLeft = false; break;
+
+				case 'ArrowDown':
+				case 'KeyS': this.moveBackward = false; break;
+
+				case 'ArrowRight':
+				case 'KeyD': this.moveRight = false; break;
+
+				case 'KeyR': this.moveUp = false; break;
+				case 'KeyF': this.moveDown = false; break;
+
+			}
+
+		};
+
+		this.lookAt = function ( x, y, z ) {
+
+			if ( x.isVector3 ) {
+
+				_target.copy( x );
+
+			} else {
+
+				_target.set( x, y, z );
+
+			}
+
+			this.object.lookAt( _target );
+
+			setOrientation( this );
+
+			return this;
+
+		};
+
+		this.update = function () {
+
+			const targetPosition = new Vector3();
+
+			return function update( delta ) {
+
+				if ( this.enabled === false ) return;
+
+				if ( this.heightSpeed ) {
+
+					const y = MathUtils.clamp( this.object.position.y, this.heightMin, this.heightMax );
+					const heightDelta = y - this.heightMin;
+
+					this.autoSpeedFactor = delta * ( heightDelta * this.heightCoef );
+
+				} else {
+
+					this.autoSpeedFactor = 0.0;
+
+				}
+
+				const actualMoveSpeed = delta * this.movementSpeed;
+
+				if ( this.moveForward || ( this.autoForward && ! this.moveBackward ) ) this.object.translateZ( - ( actualMoveSpeed + this.autoSpeedFactor ) );
+				if ( this.moveBackward ) this.object.translateZ( actualMoveSpeed );
+
+				if ( this.moveLeft ) this.object.translateX( - actualMoveSpeed );
+				if ( this.moveRight ) this.object.translateX( actualMoveSpeed );
+
+				if ( this.moveUp ) this.object.translateY( actualMoveSpeed );
+				if ( this.moveDown ) this.object.translateY( - actualMoveSpeed );
+
+				let actualLookSpeed = delta * this.lookSpeed;
+
+				if ( ! this.activeLook ) {
+
+					actualLookSpeed = 0;
+
+				}
+
+				let verticalLookRatio = 1;
+
+				if ( this.constrainVertical ) {
+
+					verticalLookRatio = Math.PI / ( this.verticalMax - this.verticalMin );
+
+				}
+
+				lon -= this.pointerX * actualLookSpeed;
+				if ( this.lookVertical ) lat -= this.pointerY * actualLookSpeed * verticalLookRatio;
+
+				lat = Math.max( - 85, Math.min( 85, lat ) );
+
+				let phi = MathUtils.degToRad( 90 - lat );
+				const theta = MathUtils.degToRad( lon );
+
+				if ( this.constrainVertical ) {
+
+					phi = MathUtils.mapLinear( phi, 0, Math.PI, this.verticalMin, this.verticalMax );
+
+				}
+
+				const position = this.object.position;
+
+				targetPosition.setFromSphericalCoords( 1, phi, theta ).add( position );
+
+				this.object.lookAt( targetPosition );
+
+			};
+
+		}();
+
+		this.dispose = function () {
+
+			this.domElement.removeEventListener( 'contextmenu', contextmenu );
+			this.domElement.removeEventListener( 'pointerdown', _onPointerDown );
+			this.domElement.removeEventListener( 'pointermove', _onPointerMove );
+			this.domElement.removeEventListener( 'pointerup', _onPointerUp );
+
+			window.removeEventListener( 'keydown', _onKeyDown );
+			window.removeEventListener( 'keyup', _onKeyUp );
+
+		};
+
+		const _onPointerMove = this.onPointerMove.bind( this );
+		const _onPointerDown = this.onPointerDown.bind( this );
+		const _onPointerUp = this.onPointerUp.bind( this );
+		const _onKeyDown = this.onKeyDown.bind( this );
+		const _onKeyUp = this.onKeyUp.bind( this );
+
+		this.domElement.addEventListener( 'contextmenu', contextmenu );
+		this.domElement.addEventListener( 'pointerdown', _onPointerDown );
+		this.domElement.addEventListener( 'pointermove', _onPointerMove );
+		this.domElement.addEventListener( 'pointerup', _onPointerUp );
+
+		window.addEventListener( 'keydown', _onKeyDown );
+		window.addEventListener( 'keyup', _onKeyUp );
+
+		function setOrientation( controls ) {
+
+			const quaternion = controls.object.quaternion;
+
+			_lookDirection.set( 0, 0, - 1 ).applyQuaternion( quaternion );
+			_spherical.setFromVector3( _lookDirection );
+
+			lat = 90 - MathUtils.radToDeg( _spherical.phi );
+			lon = MathUtils.radToDeg( _spherical.theta );
+
+		}
+
+		this.handleResize();
+
+		setOrientation( this );
+
+	}
+
+}
+
+function contextmenu( event ) {
+
+	event.preventDefault();
+
+}
+
+export { FirstPersonControls };

src/examples/jsm/controls/FlyControls.js

@@ -0,0 +1,326 @@
+import {
+	EventDispatcher,
+	Quaternion,
+	Vector3
+} from 'three';
+
+const _changeEvent = { type: 'change' };
+
+class FlyControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		this.object = object;
+		this.domElement = domElement;
+
+		// API
+
+		// Set to false to disable this control
+		this.enabled = true;
+
+		this.movementSpeed = 1.0;
+		this.rollSpeed = 0.005;
+
+		this.dragToLook = false;
+		this.autoForward = false;
+
+		// disable default target object behavior
+
+		// internals
+
+		const scope = this;
+
+		const EPS = 0.000001;
+
+		const lastQuaternion = new Quaternion();
+		const lastPosition = new Vector3();
+
+		this.tmpQuaternion = new Quaternion();
+
+		this.status = 0;
+
+		this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
+		this.moveVector = new Vector3( 0, 0, 0 );
+		this.rotationVector = new Vector3( 0, 0, 0 );
+
+		this.keydown = function ( event ) {
+
+			if ( event.altKey || this.enabled === false ) {
+
+				return;
+
+			}
+
+			switch ( event.code ) {
+
+				case 'ShiftLeft':
+				case 'ShiftRight': this.movementSpeedMultiplier = .1; break;
+
+				case 'KeyW': this.moveState.forward = 1; break;
+				case 'KeyS': this.moveState.back = 1; break;
+
+				case 'KeyA': this.moveState.left = 1; break;
+				case 'KeyD': this.moveState.right = 1; break;
+
+				case 'KeyR': this.moveState.up = 1; break;
+				case 'KeyF': this.moveState.down = 1; break;
+
+				case 'ArrowUp': this.moveState.pitchUp = 1; break;
+				case 'ArrowDown': this.moveState.pitchDown = 1; break;
+
+				case 'ArrowLeft': this.moveState.yawLeft = 1; break;
+				case 'ArrowRight': this.moveState.yawRight = 1; break;
+
+				case 'KeyQ': this.moveState.rollLeft = 1; break;
+				case 'KeyE': this.moveState.rollRight = 1; break;
+
+			}
+
+			this.updateMovementVector();
+			this.updateRotationVector();
+
+		};
+
+		this.keyup = function ( event ) {
+
+			if ( this.enabled === false ) return;
+
+			switch ( event.code ) {
+
+				case 'ShiftLeft':
+				case 'ShiftRight': this.movementSpeedMultiplier = 1; break;
+
+				case 'KeyW': this.moveState.forward = 0; break;
+				case 'KeyS': this.moveState.back = 0; break;
+
+				case 'KeyA': this.moveState.left = 0; break;
+				case 'KeyD': this.moveState.right = 0; break;
+
+				case 'KeyR': this.moveState.up = 0; break;
+				case 'KeyF': this.moveState.down = 0; break;
+
+				case 'ArrowUp': this.moveState.pitchUp = 0; break;
+				case 'ArrowDown': this.moveState.pitchDown = 0; break;
+
+				case 'ArrowLeft': this.moveState.yawLeft = 0; break;
+				case 'ArrowRight': this.moveState.yawRight = 0; break;
+
+				case 'KeyQ': this.moveState.rollLeft = 0; break;
+				case 'KeyE': this.moveState.rollRight = 0; break;
+
+			}
+
+			this.updateMovementVector();
+			this.updateRotationVector();
+
+		};
+
+		this.pointerdown = function ( event ) {
+
+			if ( this.enabled === false ) return;
+
+			if ( this.dragToLook ) {
+
+				this.status ++;
+
+			} else {
+
+				switch ( event.button ) {
+
+					case 0: this.moveState.forward = 1; break;
+					case 2: this.moveState.back = 1; break;
+
+				}
+
+				this.updateMovementVector();
+
+			}
+
+		};
+
+		this.pointermove = function ( event ) {
+
+			if ( this.enabled === false ) return;
+
+			if ( ! this.dragToLook || this.status > 0 ) {
+
+				const container = this.getContainerDimensions();
+				const halfWidth = container.size[ 0 ] / 2;
+				const halfHeight = container.size[ 1 ] / 2;
+
+				this.moveState.yawLeft = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth ) / halfWidth;
+				this.moveState.pitchDown = ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight;
+
+				this.updateRotationVector();
+
+			}
+
+		};
+
+		this.pointerup = function ( event ) {
+
+			if ( this.enabled === false ) return;
+
+			if ( this.dragToLook ) {
+
+				this.status --;
+
+				this.moveState.yawLeft = this.moveState.pitchDown = 0;
+
+			} else {
+
+				switch ( event.button ) {
+
+					case 0: this.moveState.forward = 0; break;
+					case 2: this.moveState.back = 0; break;
+
+				}
+
+				this.updateMovementVector();
+
+			}
+
+			this.updateRotationVector();
+
+		};
+
+		this.pointercancel = function () {
+
+			if ( this.enabled === false ) return;
+
+			if ( this.dragToLook ) {
+
+				this.status = 0;
+
+				this.moveState.yawLeft = this.moveState.pitchDown = 0;
+
+			} else {
+
+				this.moveState.forward = 0;
+				this.moveState.back = 0;
+
+				this.updateMovementVector();
+
+			}
+
+			this.updateRotationVector();
+
+		};
+
+		this.contextMenu = function ( event ) {
+
+			if ( this.enabled === false ) return;
+
+			event.preventDefault();
+
+		};
+
+		this.update = function ( delta ) {
+
+			if ( this.enabled === false ) return;
+
+			const moveMult = delta * scope.movementSpeed;
+			const rotMult = delta * scope.rollSpeed;
+
+			scope.object.translateX( scope.moveVector.x * moveMult );
+			scope.object.translateY( scope.moveVector.y * moveMult );
+			scope.object.translateZ( scope.moveVector.z * moveMult );
+
+			scope.tmpQuaternion.set( scope.rotationVector.x * rotMult, scope.rotationVector.y * rotMult, scope.rotationVector.z * rotMult, 1 ).normalize();
+			scope.object.quaternion.multiply( scope.tmpQuaternion );
+
+			if (
+				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS
+			) {
+
+				scope.dispatchEvent( _changeEvent );
+				lastQuaternion.copy( scope.object.quaternion );
+				lastPosition.copy( scope.object.position );
+
+			}
+
+		};
+
+		this.updateMovementVector = function () {
+
+			const forward = ( this.moveState.forward || ( this.autoForward && ! this.moveState.back ) ) ? 1 : 0;
+
+			this.moveVector.x = ( - this.moveState.left + this.moveState.right );
+			this.moveVector.y = ( - this.moveState.down + this.moveState.up );
+			this.moveVector.z = ( - forward + this.moveState.back );
+
+			//console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );
+
+		};
+
+		this.updateRotationVector = function () {
+
+			this.rotationVector.x = ( - this.moveState.pitchDown + this.moveState.pitchUp );
+			this.rotationVector.y = ( - this.moveState.yawRight + this.moveState.yawLeft );
+			this.rotationVector.z = ( - this.moveState.rollRight + this.moveState.rollLeft );
+
+			//console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );
+
+		};
+
+		this.getContainerDimensions = function () {
+
+			if ( this.domElement != document ) {
+
+				return {
+					size: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
+					offset: [ this.domElement.offsetLeft, this.domElement.offsetTop ]
+				};
+
+			} else {
+
+				return {
+					size: [ window.innerWidth, window.innerHeight ],
+					offset: [ 0, 0 ]
+				};
+
+			}
+
+		};
+
+		this.dispose = function () {
+
+			this.domElement.removeEventListener( 'contextmenu', _contextmenu );
+			this.domElement.removeEventListener( 'pointerdown', _pointerdown );
+			this.domElement.removeEventListener( 'pointermove', _pointermove );
+			this.domElement.removeEventListener( 'pointerup', _pointerup );
+			this.domElement.removeEventListener( 'pointercancel', _pointercancel );
+
+			window.removeEventListener( 'keydown', _keydown );
+			window.removeEventListener( 'keyup', _keyup );
+
+		};
+
+		const _contextmenu = this.contextMenu.bind( this );
+		const _pointermove = this.pointermove.bind( this );
+		const _pointerdown = this.pointerdown.bind( this );
+		const _pointerup = this.pointerup.bind( this );
+		const _pointercancel = this.pointercancel.bind( this );
+		const _keydown = this.keydown.bind( this );
+		const _keyup = this.keyup.bind( this );
+
+		this.domElement.addEventListener( 'contextmenu', _contextmenu );
+		this.domElement.addEventListener( 'pointerdown', _pointerdown );
+		this.domElement.addEventListener( 'pointermove', _pointermove );
+		this.domElement.addEventListener( 'pointerup', _pointerup );
+		this.domElement.addEventListener( 'pointercancel', _pointercancel );
+
+		window.addEventListener( 'keydown', _keydown );
+		window.addEventListener( 'keyup', _keyup );
+
+		this.updateMovementVector();
+		this.updateRotationVector();
+
+	}
+
+}
+
+export { FlyControls };

src/examples/jsm/controls/MapControls.js

@@ -0,0 +1,28 @@
+import { MOUSE, TOUCH } from 'three';
+
+import { OrbitControls } from './OrbitControls.js';
+
+// MapControls performs orbiting, dollying (zooming), and panning.
+// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+//
+//    Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
+//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
+//    Pan - left mouse, or arrow keys / touch: one-finger move
+
+class MapControls extends OrbitControls {
+
+	constructor( object, domElement ) {
+
+		super( object, domElement );
+
+		this.screenSpacePanning = false; // pan orthogonal to world-space direction camera.up
+
+		this.mouseButtons = { LEFT: MOUSE.PAN, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.ROTATE };
+
+		this.touches = { ONE: TOUCH.PAN, TWO: TOUCH.DOLLY_ROTATE };
+
+	}
+
+}
+
+export { MapControls };

src/examples/jsm/controls/PointerLockControls.js

@@ -0,0 +1,162 @@
+import {
+	Euler,
+	EventDispatcher,
+	Vector3
+} from 'three';
+
+const _euler = new Euler( 0, 0, 0, 'YXZ' );
+const _vector = new Vector3();
+
+const _changeEvent = { type: 'change' };
+const _lockEvent = { type: 'lock' };
+const _unlockEvent = { type: 'unlock' };
+
+const _PI_2 = Math.PI / 2;
+
+class PointerLockControls extends EventDispatcher {
+
+	constructor( camera, domElement ) {
+
+		super();
+
+		this.camera = camera;
+		this.domElement = domElement;
+
+		this.isLocked = false;
+
+		// Set to constrain the pitch of the camera
+		// Range is 0 to Math.PI radians
+		this.minPolarAngle = 0; // radians
+		this.maxPolarAngle = Math.PI; // radians
+
+		this.pointerSpeed = 1.0;
+
+		this._onMouseMove = onMouseMove.bind( this );
+		this._onPointerlockChange = onPointerlockChange.bind( this );
+		this._onPointerlockError = onPointerlockError.bind( this );
+
+		this.connect();
+
+	}
+
+	connect() {
+
+		this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );
+		this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );
+		this.domElement.ownerDocument.addEventListener( 'pointerlockerror', this._onPointerlockError );
+
+	}
+
+	disconnect() {
+
+		this.domElement.ownerDocument.removeEventListener( 'mousemove', this._onMouseMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerlockchange', this._onPointerlockChange );
+		this.domElement.ownerDocument.removeEventListener( 'pointerlockerror', this._onPointerlockError );
+
+	}
+
+	dispose() {
+
+		this.disconnect();
+
+	}
+
+	getObject() { // retaining this method for backward compatibility
+
+		return this.camera;
+
+	}
+
+	getDirection( v ) {
+
+		return v.set( 0, 0, - 1 ).applyQuaternion( this.camera.quaternion );
+
+	}
+
+	moveForward( distance ) {
+
+		// move forward parallel to the xz-plane
+		// assumes camera.up is y-up
+
+		const camera = this.camera;
+
+		_vector.setFromMatrixColumn( camera.matrix, 0 );
+
+		_vector.crossVectors( camera.up, _vector );
+
+		camera.position.addScaledVector( _vector, distance );
+
+	}
+
+	moveRight( distance ) {
+
+		const camera = this.camera;
+
+		_vector.setFromMatrixColumn( camera.matrix, 0 );
+
+		camera.position.addScaledVector( _vector, distance );
+
+	}
+
+	lock() {
+
+		this.domElement.requestPointerLock();
+
+	}
+
+	unlock() {
+
+		this.domElement.ownerDocument.exitPointerLock();
+
+	}
+
+}
+
+// event listeners
+
+function onMouseMove( event ) {
+
+	if ( this.isLocked === false ) return;
+
+	const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+	const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+
+	const camera = this.camera;
+	_euler.setFromQuaternion( camera.quaternion );
+
+	_euler.y -= movementX * 0.002 * this.pointerSpeed;
+	_euler.x -= movementY * 0.002 * this.pointerSpeed;
+
+	_euler.x = Math.max( _PI_2 - this.maxPolarAngle, Math.min( _PI_2 - this.minPolarAngle, _euler.x ) );
+
+	camera.quaternion.setFromEuler( _euler );
+
+	this.dispatchEvent( _changeEvent );
+
+}
+
+function onPointerlockChange() {
+
+	if ( this.domElement.ownerDocument.pointerLockElement === this.domElement ) {
+
+		this.dispatchEvent( _lockEvent );
+
+		this.isLocked = true;
+
+	} else {
+
+		this.dispatchEvent( _unlockEvent );
+
+		this.isLocked = false;
+
+	}
+
+}
+
+function onPointerlockError() {
+
+	console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
+
+}
+
+export { PointerLockControls };

src/examples/jsm/controls/TrackballControls.js

@@ -0,0 +1,828 @@
+import {
+	EventDispatcher,
+	MathUtils,
+	MOUSE,
+	Quaternion,
+	Vector2,
+	Vector3
+} from 'three';
+
+const _changeEvent = { type: 'change' };
+const _startEvent = { type: 'start' };
+const _endEvent = { type: 'end' };
+
+class TrackballControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		const scope = this;
+		const STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
+
+		this.object = object;
+		this.domElement = domElement;
+		this.domElement.style.touchAction = 'none'; // disable touch scroll
+
+		// API
+
+		this.enabled = true;
+
+		this.screen = { left: 0, top: 0, width: 0, height: 0 };
+
+		this.rotateSpeed = 1.0;
+		this.zoomSpeed = 1.2;
+		this.panSpeed = 0.3;
+
+		this.noRotate = false;
+		this.noZoom = false;
+		this.noPan = false;
+
+		this.staticMoving = false;
+		this.dynamicDampingFactor = 0.2;
+
+		this.minDistance = 0;
+		this.maxDistance = Infinity;
+
+		this.minZoom = 0;
+		this.maxZoom = Infinity;
+
+		this.keys = [ 'KeyA' /*A*/, 'KeyS' /*S*/, 'KeyD' /*D*/ ];
+
+		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+
+		// internals
+
+		this.target = new Vector3();
+
+		const EPS = 0.000001;
+
+		const lastPosition = new Vector3();
+		let lastZoom = 1;
+
+		let _state = STATE.NONE,
+			_keyState = STATE.NONE,
+
+			_touchZoomDistanceStart = 0,
+			_touchZoomDistanceEnd = 0,
+
+			_lastAngle = 0;
+
+		const _eye = new Vector3(),
+
+			_movePrev = new Vector2(),
+			_moveCurr = new Vector2(),
+
+			_lastAxis = new Vector3(),
+
+			_zoomStart = new Vector2(),
+			_zoomEnd = new Vector2(),
+
+			_panStart = new Vector2(),
+			_panEnd = new Vector2(),
+
+			_pointers = [],
+			_pointerPositions = {};
+
+		// for reset
+
+		this.target0 = this.target.clone();
+		this.position0 = this.object.position.clone();
+		this.up0 = this.object.up.clone();
+		this.zoom0 = this.object.zoom;
+
+		// methods
+
+		this.handleResize = function () {
+
+			const box = scope.domElement.getBoundingClientRect();
+			// adjustments come from similar code in the jquery offset() function
+			const d = scope.domElement.ownerDocument.documentElement;
+			scope.screen.left = box.left + window.pageXOffset - d.clientLeft;
+			scope.screen.top = box.top + window.pageYOffset - d.clientTop;
+			scope.screen.width = box.width;
+			scope.screen.height = box.height;
+
+		};
+
+		const getMouseOnScreen = ( function () {
+
+			const vector = new Vector2();
+
+			return function getMouseOnScreen( pageX, pageY ) {
+
+				vector.set(
+					( pageX - scope.screen.left ) / scope.screen.width,
+					( pageY - scope.screen.top ) / scope.screen.height
+				);
+
+				return vector;
+
+			};
+
+		}() );
+
+		const getMouseOnCircle = ( function () {
+
+			const vector = new Vector2();
+
+			return function getMouseOnCircle( pageX, pageY ) {
+
+				vector.set(
+					( ( pageX - scope.screen.width * 0.5 - scope.screen.left ) / ( scope.screen.width * 0.5 ) ),
+					( ( scope.screen.height + 2 * ( scope.screen.top - pageY ) ) / scope.screen.width ) // screen.width intentional
+				);
+
+				return vector;
+
+			};
+
+		}() );
+
+		this.rotateCamera = ( function () {
+
+			const axis = new Vector3(),
+				quaternion = new Quaternion(),
+				eyeDirection = new Vector3(),
+				objectUpDirection = new Vector3(),
+				objectSidewaysDirection = new Vector3(),
+				moveDirection = new Vector3();
+
+			return function rotateCamera() {
+
+				moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
+				let angle = moveDirection.length();
+
+				if ( angle ) {
+
+					_eye.copy( scope.object.position ).sub( scope.target );
+
+					eyeDirection.copy( _eye ).normalize();
+					objectUpDirection.copy( scope.object.up ).normalize();
+					objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();
+
+					objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
+					objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );
+
+					moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );
+
+					axis.crossVectors( moveDirection, _eye ).normalize();
+
+					angle *= scope.rotateSpeed;
+					quaternion.setFromAxisAngle( axis, angle );
+
+					_eye.applyQuaternion( quaternion );
+					scope.object.up.applyQuaternion( quaternion );
+
+					_lastAxis.copy( axis );
+					_lastAngle = angle;
+
+				} else if ( ! scope.staticMoving && _lastAngle ) {
+
+					_lastAngle *= Math.sqrt( 1.0 - scope.dynamicDampingFactor );
+					_eye.copy( scope.object.position ).sub( scope.target );
+					quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
+					_eye.applyQuaternion( quaternion );
+					scope.object.up.applyQuaternion( quaternion );
+
+				}
+
+				_movePrev.copy( _moveCurr );
+
+			};
+
+		}() );
+
+
+		this.zoomCamera = function () {
+
+			let factor;
+
+			if ( _state === STATE.TOUCH_ZOOM_PAN ) {
+
+				factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
+				_touchZoomDistanceStart = _touchZoomDistanceEnd;
+
+				if ( scope.object.isPerspectiveCamera ) {
+
+					_eye.multiplyScalar( factor );
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					scope.object.zoom = MathUtils.clamp( scope.object.zoom / factor, scope.minZoom, scope.maxZoom );
+
+					if ( lastZoom !== scope.object.zoom ) {
+
+						scope.object.updateProjectionMatrix();
+
+					}
+
+				} else {
+
+					console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+				}
+
+			} else {
+
+				factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * scope.zoomSpeed;
+
+				if ( factor !== 1.0 && factor > 0.0 ) {
+
+					if ( scope.object.isPerspectiveCamera ) {
+
+						_eye.multiplyScalar( factor );
+
+					} else if ( scope.object.isOrthographicCamera ) {
+
+						scope.object.zoom = MathUtils.clamp( scope.object.zoom / factor, scope.minZoom, scope.maxZoom );
+
+						if ( lastZoom !== scope.object.zoom ) {
+
+							scope.object.updateProjectionMatrix();
+
+						}
+
+					} else {
+
+						console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+					}
+
+				}
+
+				if ( scope.staticMoving ) {
+
+					_zoomStart.copy( _zoomEnd );
+
+				} else {
+
+					_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
+
+				}
+
+			}
+
+		};
+
+		this.panCamera = ( function () {
+
+			const mouseChange = new Vector2(),
+				objectUp = new Vector3(),
+				pan = new Vector3();
+
+			return function panCamera() {
+
+				mouseChange.copy( _panEnd ).sub( _panStart );
+
+				if ( mouseChange.lengthSq() ) {
+
+					if ( scope.object.isOrthographicCamera ) {
+
+						const scale_x = ( scope.object.right - scope.object.left ) / scope.object.zoom / scope.domElement.clientWidth;
+						const scale_y = ( scope.object.top - scope.object.bottom ) / scope.object.zoom / scope.domElement.clientWidth;
+
+						mouseChange.x *= scale_x;
+						mouseChange.y *= scale_y;
+
+					}
+
+					mouseChange.multiplyScalar( _eye.length() * scope.panSpeed );
+
+					pan.copy( _eye ).cross( scope.object.up ).setLength( mouseChange.x );
+					pan.add( objectUp.copy( scope.object.up ).setLength( mouseChange.y ) );
+
+					scope.object.position.add( pan );
+					scope.target.add( pan );
+
+					if ( scope.staticMoving ) {
+
+						_panStart.copy( _panEnd );
+
+					} else {
+
+						_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( scope.dynamicDampingFactor ) );
+
+					}
+
+				}
+
+			};
+
+		}() );
+
+		this.checkDistances = function () {
+
+			if ( ! scope.noZoom || ! scope.noPan ) {
+
+				if ( _eye.lengthSq() > scope.maxDistance * scope.maxDistance ) {
+
+					scope.object.position.addVectors( scope.target, _eye.setLength( scope.maxDistance ) );
+					_zoomStart.copy( _zoomEnd );
+
+				}
+
+				if ( _eye.lengthSq() < scope.minDistance * scope.minDistance ) {
+
+					scope.object.position.addVectors( scope.target, _eye.setLength( scope.minDistance ) );
+					_zoomStart.copy( _zoomEnd );
+
+				}
+
+			}
+
+		};
+
+		this.update = function () {
+
+			_eye.subVectors( scope.object.position, scope.target );
+
+			if ( ! scope.noRotate ) {
+
+				scope.rotateCamera();
+
+			}
+
+			if ( ! scope.noZoom ) {
+
+				scope.zoomCamera();
+
+			}
+
+			if ( ! scope.noPan ) {
+
+				scope.panCamera();
+
+			}
+
+			scope.object.position.addVectors( scope.target, _eye );
+
+			if ( scope.object.isPerspectiveCamera ) {
+
+				scope.checkDistances();
+
+				scope.object.lookAt( scope.target );
+
+				if ( lastPosition.distanceToSquared( scope.object.position ) > EPS ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+
+				}
+
+			} else if ( scope.object.isOrthographicCamera ) {
+
+				scope.object.lookAt( scope.target );
+
+				if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || lastZoom !== scope.object.zoom ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+					lastZoom = scope.object.zoom;
+
+				}
+
+			} else {
+
+				console.warn( 'THREE.TrackballControls: Unsupported camera type' );
+
+			}
+
+		};
+
+		this.reset = function () {
+
+			_state = STATE.NONE;
+			_keyState = STATE.NONE;
+
+			scope.target.copy( scope.target0 );
+			scope.object.position.copy( scope.position0 );
+			scope.object.up.copy( scope.up0 );
+			scope.object.zoom = scope.zoom0;
+
+			scope.object.updateProjectionMatrix();
+
+			_eye.subVectors( scope.object.position, scope.target );
+
+			scope.object.lookAt( scope.target );
+
+			scope.dispatchEvent( _changeEvent );
+
+			lastPosition.copy( scope.object.position );
+			lastZoom = scope.object.zoom;
+
+		};
+
+		// listeners
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( _pointers.length === 0 ) {
+
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchEnd( event );
+
+			} else {
+
+				onMouseUp();
+
+			}
+
+			//
+
+			removePointer( event );
+
+			if ( _pointers.length === 0 ) {
+
+				scope.domElement.releasePointerCapture( event.pointerId );
+
+				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			}
+
+
+		}
+
+		function onPointerCancel( event ) {
+
+			removePointer( event );
+
+		}
+
+		function keydown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			window.removeEventListener( 'keydown', keydown );
+
+			if ( _keyState !== STATE.NONE ) {
+
+				return;
+
+			} else if ( event.code === scope.keys[ STATE.ROTATE ] && ! scope.noRotate ) {
+
+				_keyState = STATE.ROTATE;
+
+			} else if ( event.code === scope.keys[ STATE.ZOOM ] && ! scope.noZoom ) {
+
+				_keyState = STATE.ZOOM;
+
+			} else if ( event.code === scope.keys[ STATE.PAN ] && ! scope.noPan ) {
+
+				_keyState = STATE.PAN;
+
+			}
+
+		}
+
+		function keyup() {
+
+			if ( scope.enabled === false ) return;
+
+			_keyState = STATE.NONE;
+
+			window.addEventListener( 'keydown', keydown );
+
+		}
+
+		function onMouseDown( event ) {
+
+			if ( _state === STATE.NONE ) {
+
+				switch ( event.button ) {
+
+					case scope.mouseButtons.LEFT:
+						_state = STATE.ROTATE;
+						break;
+
+					case scope.mouseButtons.MIDDLE:
+						_state = STATE.ZOOM;
+						break;
+
+					case scope.mouseButtons.RIGHT:
+						_state = STATE.PAN;
+						break;
+
+				}
+
+			}
+
+			const state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
+
+			if ( state === STATE.ROTATE && ! scope.noRotate ) {
+
+				_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+				_movePrev.copy( _moveCurr );
+
+			} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
+
+				_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+				_zoomEnd.copy( _zoomStart );
+
+			} else if ( state === STATE.PAN && ! scope.noPan ) {
+
+				_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+				_panEnd.copy( _panStart );
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+
+		}
+
+		function onMouseMove( event ) {
+
+			const state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
+
+			if ( state === STATE.ROTATE && ! scope.noRotate ) {
+
+				_movePrev.copy( _moveCurr );
+				_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+
+			} else if ( state === STATE.ZOOM && ! scope.noZoom ) {
+
+				_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+			} else if ( state === STATE.PAN && ! scope.noPan ) {
+
+				_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
+
+			}
+
+		}
+
+		function onMouseUp() {
+
+			_state = STATE.NONE;
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( scope.noZoom === true ) return;
+
+			event.preventDefault();
+
+			switch ( event.deltaMode ) {
+
+				case 2:
+					// Zoom in pages
+					_zoomStart.y -= event.deltaY * 0.025;
+					break;
+
+				case 1:
+					// Zoom in lines
+					_zoomStart.y -= event.deltaY * 0.01;
+					break;
+
+				default:
+					// undefined, 0, assume pixels
+					_zoomStart.y -= event.deltaY * 0.00025;
+					break;
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( _pointers.length ) {
+
+				case 1:
+					_state = STATE.TOUCH_ROTATE;
+					_moveCurr.copy( getMouseOnCircle( _pointers[ 0 ].pageX, _pointers[ 0 ].pageY ) );
+					_movePrev.copy( _moveCurr );
+					break;
+
+				default: // 2 or more
+					_state = STATE.TOUCH_ZOOM_PAN;
+					const dx = _pointers[ 0 ].pageX - _pointers[ 1 ].pageX;
+					const dy = _pointers[ 0 ].pageY - _pointers[ 1 ].pageY;
+					_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
+
+					const x = ( _pointers[ 0 ].pageX + _pointers[ 1 ].pageX ) / 2;
+					const y = ( _pointers[ 0 ].pageY + _pointers[ 1 ].pageY ) / 2;
+					_panStart.copy( getMouseOnScreen( x, y ) );
+					_panEnd.copy( _panStart );
+					break;
+
+			}
+
+			scope.dispatchEvent( _startEvent );
+
+		}
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			switch ( _pointers.length ) {
+
+				case 1:
+					_movePrev.copy( _moveCurr );
+					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+					break;
+
+				default: // 2 or more
+
+					const position = getSecondPointerPosition( event );
+
+					const dx = event.pageX - position.x;
+					const dy = event.pageY - position.y;
+					_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
+
+					const x = ( event.pageX + position.x ) / 2;
+					const y = ( event.pageY + position.y ) / 2;
+					_panEnd.copy( getMouseOnScreen( x, y ) );
+					break;
+
+			}
+
+		}
+
+		function onTouchEnd( event ) {
+
+			switch ( _pointers.length ) {
+
+				case 0:
+					_state = STATE.NONE;
+					break;
+
+				case 1:
+					_state = STATE.TOUCH_ROTATE;
+					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+					_movePrev.copy( _moveCurr );
+					break;
+
+				case 2:
+					_state = STATE.TOUCH_ZOOM_PAN;
+
+					for ( let i = 0; i < _pointers.length; i ++ ) {
+
+						if ( _pointers[ i ].pointerId !== event.pointerId ) {
+
+							const position = _pointerPositions[ _pointers[ i ].pointerId ];
+							_moveCurr.copy( getMouseOnCircle( position.x, position.y ) );
+							_movePrev.copy( _moveCurr );
+							break;
+
+						}
+
+					}
+
+					break;
+
+			}
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function contextmenu( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+		}
+
+		function addPointer( event ) {
+
+			_pointers.push( event );
+
+		}
+
+		function removePointer( event ) {
+
+			delete _pointerPositions[ event.pointerId ];
+
+			for ( let i = 0; i < _pointers.length; i ++ ) {
+
+				if ( _pointers[ i ].pointerId == event.pointerId ) {
+
+					_pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function trackPointer( event ) {
+
+			let position = _pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new Vector2();
+				_pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			const pointer = ( event.pointerId === _pointers[ 0 ].pointerId ) ? _pointers[ 1 ] : _pointers[ 0 ];
+
+			return _pointerPositions[ pointer.pointerId ];
+
+		}
+
+		this.dispose = function () {
+
+			scope.domElement.removeEventListener( 'contextmenu', contextmenu );
+
+			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
+			scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
+			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			window.removeEventListener( 'keydown', keydown );
+			window.removeEventListener( 'keyup', keyup );
+
+		};
+
+		this.domElement.addEventListener( 'contextmenu', contextmenu );
+
+		this.domElement.addEventListener( 'pointerdown', onPointerDown );
+		this.domElement.addEventListener( 'pointercancel', onPointerCancel );
+		this.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+
+		window.addEventListener( 'keydown', keydown );
+		window.addEventListener( 'keyup', keyup );
+
+		this.handleResize();
+
+		// force an update at start
+		this.update();
+
+	}
+
+}
+
+export { TrackballControls };

src/examples/jsm/csm/CSM.js

@@ -0,0 +1,384 @@
+import {
+	Vector2,
+	Vector3,
+	DirectionalLight,
+	MathUtils,
+	ShaderChunk,
+	Matrix4,
+	Box3
+} from 'three';
+import { CSMFrustum } from './CSMFrustum.js';
+import { CSMShader } from './CSMShader.js';
+
+const _cameraToLightMatrix = new Matrix4();
+const _lightSpaceFrustum = new CSMFrustum();
+const _center = new Vector3();
+const _bbox = new Box3();
+const _uniformArray = [];
+const _logArray = [];
+const _lightOrientationMatrix = new Matrix4();
+const _lightOrientationMatrixInverse = new Matrix4();
+const _up = new Vector3( 0, 1, 0 );
+
+export class CSM {
+
+	constructor( data ) {
+
+		this.camera = data.camera;
+		this.parent = data.parent;
+		this.cascades = data.cascades || 3;
+		this.maxFar = data.maxFar || 100000;
+		this.mode = data.mode || 'practical';
+		this.shadowMapSize = data.shadowMapSize || 2048;
+		this.shadowBias = data.shadowBias || 0.000001;
+		this.lightDirection = data.lightDirection || new Vector3( 1, - 1, 1 ).normalize();
+		this.lightIntensity = data.lightIntensity || 3;
+		this.lightNear = data.lightNear || 1;
+		this.lightFar = data.lightFar || 2000;
+		this.lightMargin = data.lightMargin || 200;
+		this.customSplitsCallback = data.customSplitsCallback;
+		this.fade = false;
+		this.mainFrustum = new CSMFrustum();
+		this.frustums = [];
+		this.breaks = [];
+
+		this.lights = [];
+		this.shaders = new Map();
+
+		this.createLights();
+		this.updateFrustums();
+		this.injectInclude();
+
+	}
+
+	createLights() {
+
+		for ( let i = 0; i < this.cascades; i ++ ) {
+
+			const light = new DirectionalLight( 0xffffff, this.lightIntensity );
+			light.castShadow = true;
+			light.shadow.mapSize.width = this.shadowMapSize;
+			light.shadow.mapSize.height = this.shadowMapSize;
+
+			light.shadow.camera.near = this.lightNear;
+			light.shadow.camera.far = this.lightFar;
+			light.shadow.bias = this.shadowBias;
+
+			this.parent.add( light );
+			this.parent.add( light.target );
+			this.lights.push( light );
+
+		}
+
+	}
+
+	initCascades() {
+
+		const camera = this.camera;
+		camera.updateProjectionMatrix();
+		this.mainFrustum.setFromProjectionMatrix( camera.projectionMatrix, this.maxFar );
+		this.mainFrustum.split( this.breaks, this.frustums );
+
+	}
+
+	updateShadowBounds() {
+
+		const frustums = this.frustums;
+		for ( let i = 0; i < frustums.length; i ++ ) {
+
+			const light = this.lights[ i ];
+			const shadowCam = light.shadow.camera;
+			const frustum = this.frustums[ i ];
+
+			// Get the two points that represent that furthest points on the frustum assuming
+			// that's either the diagonal across the far plane or the diagonal across the whole
+			// frustum itself.
+			const nearVerts = frustum.vertices.near;
+			const farVerts = frustum.vertices.far;
+			const point1 = farVerts[ 0 ];
+			let point2;
+			if ( point1.distanceTo( farVerts[ 2 ] ) > point1.distanceTo( nearVerts[ 2 ] ) ) {
+
+				point2 = farVerts[ 2 ];
+
+			} else {
+
+				point2 = nearVerts[ 2 ];
+
+			}
+
+			let squaredBBWidth = point1.distanceTo( point2 );
+			if ( this.fade ) {
+
+				// expand the shadow extents by the fade margin if fade is enabled.
+				const camera = this.camera;
+				const far = Math.max( camera.far, this.maxFar );
+				const linearDepth = frustum.vertices.far[ 0 ].z / ( far - camera.near );
+				const margin = 0.25 * Math.pow( linearDepth, 2.0 ) * ( far - camera.near );
+
+				squaredBBWidth += margin;
+
+			}
+
+			shadowCam.left = - squaredBBWidth / 2;
+			shadowCam.right = squaredBBWidth / 2;
+			shadowCam.top = squaredBBWidth / 2;
+			shadowCam.bottom = - squaredBBWidth / 2;
+			shadowCam.updateProjectionMatrix();
+
+		}
+
+	}
+
+	getBreaks() {
+
+		const camera = this.camera;
+		const far = Math.min( camera.far, this.maxFar );
+		this.breaks.length = 0;
+
+		switch ( this.mode ) {
+
+			case 'uniform':
+				uniformSplit( this.cascades, camera.near, far, this.breaks );
+				break;
+			case 'logarithmic':
+				logarithmicSplit( this.cascades, camera.near, far, this.breaks );
+				break;
+			case 'practical':
+				practicalSplit( this.cascades, camera.near, far, 0.5, this.breaks );
+				break;
+			case 'custom':
+				if ( this.customSplitsCallback === undefined ) console.error( 'CSM: Custom split scheme callback not defined.' );
+				this.customSplitsCallback( this.cascades, camera.near, far, this.breaks );
+				break;
+
+		}
+
+		function uniformSplit( amount, near, far, target ) {
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( ( near + ( far - near ) * i / amount ) / far );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+		function logarithmicSplit( amount, near, far, target ) {
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( ( near * ( far / near ) ** ( i / amount ) ) / far );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+		function practicalSplit( amount, near, far, lambda, target ) {
+
+			_uniformArray.length = 0;
+			_logArray.length = 0;
+			logarithmicSplit( amount, near, far, _logArray );
+			uniformSplit( amount, near, far, _uniformArray );
+
+			for ( let i = 1; i < amount; i ++ ) {
+
+				target.push( MathUtils.lerp( _uniformArray[ i - 1 ], _logArray[ i - 1 ], lambda ) );
+
+			}
+
+			target.push( 1 );
+
+		}
+
+	}
+
+	update() {
+
+		const camera = this.camera;
+		const frustums = this.frustums;
+
+		// for each frustum we need to find its min-max box aligned with the light orientation
+		// the position in _lightOrientationMatrix does not matter, as we transform there and back
+		_lightOrientationMatrix.lookAt( new Vector3(), this.lightDirection, _up );
+		_lightOrientationMatrixInverse.copy( _lightOrientationMatrix ).invert();
+
+		for ( let i = 0; i < frustums.length; i ++ ) {
+
+			const light = this.lights[ i ];
+			const shadowCam = light.shadow.camera;
+			const texelWidth = ( shadowCam.right - shadowCam.left ) / this.shadowMapSize;
+			const texelHeight = ( shadowCam.top - shadowCam.bottom ) / this.shadowMapSize;
+			_cameraToLightMatrix.multiplyMatrices( _lightOrientationMatrixInverse, camera.matrixWorld );
+			frustums[ i ].toSpace( _cameraToLightMatrix, _lightSpaceFrustum );
+
+			const nearVerts = _lightSpaceFrustum.vertices.near;
+			const farVerts = _lightSpaceFrustum.vertices.far;
+			_bbox.makeEmpty();
+			for ( let j = 0; j < 4; j ++ ) {
+
+				_bbox.expandByPoint( nearVerts[ j ] );
+				_bbox.expandByPoint( farVerts[ j ] );
+
+			}
+
+			_bbox.getCenter( _center );
+			_center.z = _bbox.max.z + this.lightMargin;
+			_center.x = Math.floor( _center.x / texelWidth ) * texelWidth;
+			_center.y = Math.floor( _center.y / texelHeight ) * texelHeight;
+			_center.applyMatrix4( _lightOrientationMatrix );
+
+			light.position.copy( _center );
+			light.target.position.copy( _center );
+
+			light.target.position.x += this.lightDirection.x;
+			light.target.position.y += this.lightDirection.y;
+			light.target.position.z += this.lightDirection.z;
+
+		}
+
+	}
+
+	injectInclude() {
+
+		ShaderChunk.lights_fragment_begin = CSMShader.lights_fragment_begin;
+		ShaderChunk.lights_pars_begin = CSMShader.lights_pars_begin;
+
+	}
+
+	setupMaterial( material ) {
+
+		material.defines = material.defines || {};
+		material.defines.USE_CSM = 1;
+		material.defines.CSM_CASCADES = this.cascades;
+
+		if ( this.fade ) {
+
+			material.defines.CSM_FADE = '';
+
+		}
+
+		const breaksVec2 = [];
+		const scope = this;
+		const shaders = this.shaders;
+
+		material.onBeforeCompile = function ( shader ) {
+
+			const far = Math.min( scope.camera.far, scope.maxFar );
+			scope.getExtendedBreaks( breaksVec2 );
+
+			shader.uniforms.CSM_cascades = { value: breaksVec2 };
+			shader.uniforms.cameraNear = { value: scope.camera.near };
+			shader.uniforms.shadowFar = { value: far };
+
+			shaders.set( material, shader );
+
+		};
+
+		shaders.set( material, null );
+
+	}
+
+	updateUniforms() {
+
+		const far = Math.min( this.camera.far, this.maxFar );
+		const shaders = this.shaders;
+
+		shaders.forEach( function ( shader, material ) {
+
+			if ( shader !== null ) {
+
+				const uniforms = shader.uniforms;
+				this.getExtendedBreaks( uniforms.CSM_cascades.value );
+				uniforms.cameraNear.value = this.camera.near;
+				uniforms.shadowFar.value = far;
+
+			}
+
+			if ( ! this.fade && 'CSM_FADE' in material.defines ) {
+
+				delete material.defines.CSM_FADE;
+				material.needsUpdate = true;
+
+			} else if ( this.fade && ! ( 'CSM_FADE' in material.defines ) ) {
+
+				material.defines.CSM_FADE = '';
+				material.needsUpdate = true;
+
+			}
+
+		}, this );
+
+	}
+
+	getExtendedBreaks( target ) {
+
+		while ( target.length < this.breaks.length ) {
+
+			target.push( new Vector2() );
+
+		}
+
+		target.length = this.breaks.length;
+
+		for ( let i = 0; i < this.cascades; i ++ ) {
+
+			const amount = this.breaks[ i ];
+			const prev = this.breaks[ i - 1 ] || 0;
+			target[ i ].x = prev;
+			target[ i ].y = amount;
+
+		}
+
+	}
+
+	updateFrustums() {
+
+		this.getBreaks();
+		this.initCascades();
+		this.updateShadowBounds();
+		this.updateUniforms();
+
+	}
+
+	remove() {
+
+		for ( let i = 0; i < this.lights.length; i ++ ) {
+
+			this.parent.remove( this.lights[ i ].target );
+			this.parent.remove( this.lights[ i ] );
+
+		}
+
+	}
+
+	dispose() {
+
+		const shaders = this.shaders;
+		shaders.forEach( function ( shader, material ) {
+
+			delete material.onBeforeCompile;
+			delete material.defines.USE_CSM;
+			delete material.defines.CSM_CASCADES;
+			delete material.defines.CSM_FADE;
+
+			if ( shader !== null ) {
+
+				delete shader.uniforms.CSM_cascades;
+				delete shader.uniforms.cameraNear;
+				delete shader.uniforms.shadowFar;
+
+			}
+
+			material.needsUpdate = true;
+
+		} );
+		shaders.clear();
+
+	}
+
+}

src/examples/jsm/csm/CSMFrustum.js

@@ -0,0 +1,152 @@
+import { Vector3, Matrix4 } from 'three';
+
+const inverseProjectionMatrix = new Matrix4();
+
+class CSMFrustum {
+
+	constructor( data ) {
+
+		data = data || {};
+
+		this.vertices = {
+			near: [
+				new Vector3(),
+				new Vector3(),
+				new Vector3(),
+				new Vector3()
+			],
+			far: [
+				new Vector3(),
+				new Vector3(),
+				new Vector3(),
+				new Vector3()
+			]
+		};
+
+		if ( data.projectionMatrix !== undefined ) {
+
+			this.setFromProjectionMatrix( data.projectionMatrix, data.maxFar || 10000 );
+
+		}
+
+	}
+
+	setFromProjectionMatrix( projectionMatrix, maxFar ) {
+
+		const isOrthographic = projectionMatrix.elements[ 2 * 4 + 3 ] === 0;
+
+		inverseProjectionMatrix.copy( projectionMatrix ).invert();
+
+		// 3 --- 0  vertices.near/far order
+		// |     |
+		// 2 --- 1
+		// clip space spans from [-1, 1]
+
+		this.vertices.near[ 0 ].set( 1, 1, - 1 );
+		this.vertices.near[ 1 ].set( 1, - 1, - 1 );
+		this.vertices.near[ 2 ].set( - 1, - 1, - 1 );
+		this.vertices.near[ 3 ].set( - 1, 1, - 1 );
+		this.vertices.near.forEach( function ( v ) {
+
+			v.applyMatrix4( inverseProjectionMatrix );
+
+		} );
+
+		this.vertices.far[ 0 ].set( 1, 1, 1 );
+		this.vertices.far[ 1 ].set( 1, - 1, 1 );
+		this.vertices.far[ 2 ].set( - 1, - 1, 1 );
+		this.vertices.far[ 3 ].set( - 1, 1, 1 );
+		this.vertices.far.forEach( function ( v ) {
+
+			v.applyMatrix4( inverseProjectionMatrix );
+
+			const absZ = Math.abs( v.z );
+			if ( isOrthographic ) {
+
+				v.z *= Math.min( maxFar / absZ, 1.0 );
+
+			} else {
+
+				v.multiplyScalar( Math.min( maxFar / absZ, 1.0 ) );
+
+			}
+
+		} );
+
+		return this.vertices;
+
+	}
+
+	split( breaks, target ) {
+
+		while ( breaks.length > target.length ) {
+
+			target.push( new CSMFrustum() );
+
+		}
+
+		target.length = breaks.length;
+
+		for ( let i = 0; i < breaks.length; i ++ ) {
+
+			const cascade = target[ i ];
+
+			if ( i === 0 ) {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.near[ j ].copy( this.vertices.near[ j ] );
+
+				}
+
+			} else {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.near[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i - 1 ] );
+
+				}
+
+			}
+
+			if ( i === breaks.length - 1 ) {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.far[ j ].copy( this.vertices.far[ j ] );
+
+				}
+
+			} else {
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					cascade.vertices.far[ j ].lerpVectors( this.vertices.near[ j ], this.vertices.far[ j ], breaks[ i ] );
+
+				}
+
+			}
+
+		}
+
+	}
+
+	toSpace( cameraMatrix, target ) {
+
+		for ( let i = 0; i < 4; i ++ ) {
+
+			target.vertices.near[ i ]
+				.copy( this.vertices.near[ i ] )
+				.applyMatrix4( cameraMatrix );
+
+			target.vertices.far[ i ]
+				.copy( this.vertices.far[ i ] )
+				.applyMatrix4( cameraMatrix );
+
+		}
+
+	}
+
+}
+
+export { CSMFrustum };

src/examples/jsm/csm/CSMHelper.js

@@ -0,0 +1,193 @@
+import {
+	Group,
+	Mesh,
+	LineSegments,
+	BufferGeometry,
+	LineBasicMaterial,
+	Box3Helper,
+	Box3,
+	PlaneGeometry,
+	MeshBasicMaterial,
+	BufferAttribute,
+	DoubleSide
+} from 'three';
+
+class CSMHelper extends Group {
+
+	constructor( csm ) {
+
+		super();
+		this.csm = csm;
+		this.displayFrustum = true;
+		this.displayPlanes = true;
+		this.displayShadowBounds = true;
+
+		const indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
+		const positions = new Float32Array( 24 );
+		const frustumGeometry = new BufferGeometry();
+		frustumGeometry.setIndex( new BufferAttribute( indices, 1 ) );
+		frustumGeometry.setAttribute( 'position', new BufferAttribute( positions, 3, false ) );
+		const frustumLines = new LineSegments( frustumGeometry, new LineBasicMaterial() );
+		this.add( frustumLines );
+
+		this.frustumLines = frustumLines;
+		this.cascadeLines = [];
+		this.cascadePlanes = [];
+		this.shadowLines = [];
+
+	}
+
+	updateVisibility() {
+
+		const displayFrustum = this.displayFrustum;
+		const displayPlanes = this.displayPlanes;
+		const displayShadowBounds = this.displayShadowBounds;
+
+		const frustumLines = this.frustumLines;
+		const cascadeLines = this.cascadeLines;
+		const cascadePlanes = this.cascadePlanes;
+		const shadowLines = this.shadowLines;
+		for ( let i = 0, l = cascadeLines.length; i < l; i ++ ) {
+
+			const cascadeLine = cascadeLines[ i ];
+			const cascadePlane = cascadePlanes[ i ];
+			const shadowLineGroup = shadowLines[ i ];
+
+			cascadeLine.visible = displayFrustum;
+			cascadePlane.visible = displayFrustum && displayPlanes;
+			shadowLineGroup.visible = displayShadowBounds;
+
+		}
+
+		frustumLines.visible = displayFrustum;
+
+	}
+
+	update() {
+
+		const csm = this.csm;
+		const camera = csm.camera;
+		const cascades = csm.cascades;
+		const mainFrustum = csm.mainFrustum;
+		const frustums = csm.frustums;
+		const lights = csm.lights;
+
+		const frustumLines = this.frustumLines;
+		const frustumLinePositions = frustumLines.geometry.getAttribute( 'position' );
+		const cascadeLines = this.cascadeLines;
+		const cascadePlanes = this.cascadePlanes;
+		const shadowLines = this.shadowLines;
+
+		this.position.copy( camera.position );
+		this.quaternion.copy( camera.quaternion );
+		this.scale.copy( camera.scale );
+		this.updateMatrixWorld( true );
+
+		while ( cascadeLines.length > cascades ) {
+
+			this.remove( cascadeLines.pop() );
+			this.remove( cascadePlanes.pop() );
+			this.remove( shadowLines.pop() );
+
+		}
+
+		while ( cascadeLines.length < cascades ) {
+
+			const cascadeLine = new Box3Helper( new Box3(), 0xffffff );
+			const planeMat = new MeshBasicMaterial( { transparent: true, opacity: 0.1, depthWrite: false, side: DoubleSide } );
+			const cascadePlane = new Mesh( new PlaneGeometry(), planeMat );
+			const shadowLineGroup = new Group();
+			const shadowLine = new Box3Helper( new Box3(), 0xffff00 );
+			shadowLineGroup.add( shadowLine );
+
+			this.add( cascadeLine );
+			this.add( cascadePlane );
+			this.add( shadowLineGroup );
+
+			cascadeLines.push( cascadeLine );
+			cascadePlanes.push( cascadePlane );
+			shadowLines.push( shadowLineGroup );
+
+		}
+
+		for ( let i = 0; i < cascades; i ++ ) {
+
+			const frustum = frustums[ i ];
+			const light = lights[ i ];
+			const shadowCam = light.shadow.camera;
+			const farVerts = frustum.vertices.far;
+
+			const cascadeLine = cascadeLines[ i ];
+			const cascadePlane = cascadePlanes[ i ];
+			const shadowLineGroup = shadowLines[ i ];
+			const shadowLine = shadowLineGroup.children[ 0 ];
+
+			cascadeLine.box.min.copy( farVerts[ 2 ] );
+			cascadeLine.box.max.copy( farVerts[ 0 ] );
+			cascadeLine.box.max.z += 1e-4;
+
+			cascadePlane.position.addVectors( farVerts[ 0 ], farVerts[ 2 ] );
+			cascadePlane.position.multiplyScalar( 0.5 );
+			cascadePlane.scale.subVectors( farVerts[ 0 ], farVerts[ 2 ] );
+			cascadePlane.scale.z = 1e-4;
+
+			this.remove( shadowLineGroup );
+			shadowLineGroup.position.copy( shadowCam.position );
+			shadowLineGroup.quaternion.copy( shadowCam.quaternion );
+			shadowLineGroup.scale.copy( shadowCam.scale );
+			shadowLineGroup.updateMatrixWorld( true );
+			this.attach( shadowLineGroup );
+
+			shadowLine.box.min.set( shadowCam.bottom, shadowCam.left, - shadowCam.far );
+			shadowLine.box.max.set( shadowCam.top, shadowCam.right, - shadowCam.near );
+
+		}
+
+		const nearVerts = mainFrustum.vertices.near;
+		const farVerts = mainFrustum.vertices.far;
+		frustumLinePositions.setXYZ( 0, farVerts[ 0 ].x, farVerts[ 0 ].y, farVerts[ 0 ].z );
+		frustumLinePositions.setXYZ( 1, farVerts[ 3 ].x, farVerts[ 3 ].y, farVerts[ 3 ].z );
+		frustumLinePositions.setXYZ( 2, farVerts[ 2 ].x, farVerts[ 2 ].y, farVerts[ 2 ].z );
+		frustumLinePositions.setXYZ( 3, farVerts[ 1 ].x, farVerts[ 1 ].y, farVerts[ 1 ].z );
+
+		frustumLinePositions.setXYZ( 4, nearVerts[ 0 ].x, nearVerts[ 0 ].y, nearVerts[ 0 ].z );
+		frustumLinePositions.setXYZ( 5, nearVerts[ 3 ].x, nearVerts[ 3 ].y, nearVerts[ 3 ].z );
+		frustumLinePositions.setXYZ( 6, nearVerts[ 2 ].x, nearVerts[ 2 ].y, nearVerts[ 2 ].z );
+		frustumLinePositions.setXYZ( 7, nearVerts[ 1 ].x, nearVerts[ 1 ].y, nearVerts[ 1 ].z );
+		frustumLinePositions.needsUpdate = true;
+
+	}
+
+	dispose() {
+
+		const frustumLines = this.frustumLines;
+		const cascadeLines = this.cascadeLines;
+		const cascadePlanes = this.cascadePlanes;
+		const shadowLines = this.shadowLines;
+
+		frustumLines.geometry.dispose();
+		frustumLines.material.dispose();
+
+		const cascades = this.csm.cascades;
+
+		for ( let i = 0; i < cascades; i ++ ) {
+
+			const cascadeLine = cascadeLines[ i ];
+			const cascadePlane = cascadePlanes[ i ];
+			const shadowLineGroup = shadowLines[ i ];
+			const shadowLine = shadowLineGroup.children[ 0 ];
+
+			cascadeLine.dispose(); // Box3Helper
+
+			cascadePlane.geometry.dispose();
+			cascadePlane.material.dispose();
+
+			shadowLine.dispose(); // Box3Helper
+
+		}
+
+	}
+
+}
+
+export { CSMHelper };

src/examples/jsm/csm/CSMShader.js

@@ -0,0 +1,290 @@
+import { ShaderChunk } from 'three';
+
+const CSMShader = {
+	lights_fragment_begin: /* glsl */`
+vec3 geometryPosition = - vViewPosition;
+vec3 geometryNormal = normal;
+vec3 geometryViewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( vViewPosition );
+
+vec3 geometryClearcoatNormal = vec3( 0.0 );
+
+#ifdef USE_CLEARCOAT
+
+	geometryClearcoatNormal = clearcoatNormal;
+
+#endif
+
+#ifdef USE_IRIDESCENCE
+	float dotNVi = saturate( dot( normal, geometryViewDir ) );
+	if ( material.iridescenceThickness == 0.0 ) {
+		material.iridescence = 0.0;
+	} else {
+		material.iridescence = saturate( material.iridescence );
+	}
+	if ( material.iridescence > 0.0 ) {
+		material.iridescenceFresnel = evalIridescence( 1.0, material.iridescenceIOR, dotNVi, material.iridescenceThickness, material.specularColor );
+		// Iridescence F0 approximation
+		material.iridescenceF0 = Schlick_to_F0( material.iridescenceFresnel, 1.0, dotNVi );
+	}
+#endif
+
+IncidentLight directLight;
+
+#if ( NUM_POINT_LIGHTS > 0 ) && defined( RE_Direct )
+
+	PointLight pointLight;
+	#if defined( USE_SHADOWMAP ) && NUM_POINT_LIGHT_SHADOWS > 0
+	PointLightShadow pointLightShadow;
+	#endif
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {
+
+		pointLight = pointLights[ i ];
+
+		getPointLightInfo( pointLight, geometryPosition, directLight );
+
+		#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_POINT_LIGHT_SHADOWS )
+		pointLightShadow = pointLightShadows[ i ];
+		directLight.color *= ( directLight.visible && receiveShadow ) ? getPointShadow( pointShadowMap[ i ], pointLightShadow.shadowMapSize, pointLightShadow.shadowBias, pointLightShadow.shadowRadius, vPointShadowCoord[ i ], pointLightShadow.shadowCameraNear, pointLightShadow.shadowCameraFar ) : 1.0;
+		#endif
+
+		RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if ( NUM_SPOT_LIGHTS > 0 ) && defined( RE_Direct )
+
+	SpotLight spotLight;
+ 	vec4 spotColor;
+	vec3 spotLightCoord;
+	bool inSpotLightMap;
+ 
+	#if defined( USE_SHADOWMAP ) && NUM_SPOT_LIGHT_SHADOWS > 0
+	SpotLightShadow spotLightShadow;
+	#endif
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) {
+
+		spotLight = spotLights[ i ];
+
+		getSpotLightInfo( spotLight, geometryPosition, directLight );
+
+  		// spot lights are ordered [shadows with maps, shadows without maps, maps without shadows, none]
+		#if ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS_WITH_MAPS )
+		#define SPOT_LIGHT_MAP_INDEX UNROLLED_LOOP_INDEX
+		#elif ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS )
+		#define SPOT_LIGHT_MAP_INDEX NUM_SPOT_LIGHT_MAPS
+		#else
+		#define SPOT_LIGHT_MAP_INDEX ( UNROLLED_LOOP_INDEX - NUM_SPOT_LIGHT_SHADOWS + NUM_SPOT_LIGHT_SHADOWS_WITH_MAPS )
+		#endif
+		#if ( SPOT_LIGHT_MAP_INDEX < NUM_SPOT_LIGHT_MAPS )
+			spotLightCoord = vSpotLightCoord[ i ].xyz / vSpotLightCoord[ i ].w;
+			inSpotLightMap = all( lessThan( abs( spotLightCoord * 2. - 1. ), vec3( 1.0 ) ) );
+			spotColor = texture2D( spotLightMap[ SPOT_LIGHT_MAP_INDEX ], spotLightCoord.xy );
+			directLight.color = inSpotLightMap ? directLight.color * spotColor.rgb : directLight.color;
+		#endif
+		#undef SPOT_LIGHT_MAP_INDEX
+
+		#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS )
+		spotLightShadow = spotLightShadows[ i ];
+		directLight.color *= ( directLight.visible && receiveShadow ) ? getShadow( spotShadowMap[ i ], spotLightShadow.shadowMapSize, spotLightShadow.shadowBias, spotLightShadow.shadowRadius, vSpotLightCoord[ i ] ) : 1.0;
+
+		#endif
+
+		RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct ) && defined( USE_CSM ) && defined( CSM_CASCADES )
+
+	DirectionalLight directionalLight;
+	float linearDepth = (vViewPosition.z) / (shadowFar - cameraNear);
+	#if defined( USE_SHADOWMAP ) && NUM_DIR_LIGHT_SHADOWS > 0
+	DirectionalLightShadow directionalLightShadow;
+	#endif
+
+	#if defined( USE_SHADOWMAP ) && defined( CSM_FADE )
+	vec2 cascade;
+	float cascadeCenter;
+	float closestEdge;
+	float margin;
+	float csmx;
+	float csmy;
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+		directionalLight = directionalLights[ i ];
+		getDirectionalLightInfo( directionalLight, directLight );
+
+	  	#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )
+			// NOTE: Depth gets larger away from the camera.
+			// cascade.x is closer, cascade.y is further
+			cascade = CSM_cascades[ i ];
+			cascadeCenter = ( cascade.x + cascade.y ) / 2.0;
+			closestEdge = linearDepth < cascadeCenter ? cascade.x : cascade.y;
+			margin = 0.25 * pow( closestEdge, 2.0 );
+			csmx = cascade.x - margin / 2.0;
+			csmy = cascade.y + margin / 2.0;
+			if( linearDepth >= csmx && ( linearDepth < csmy || UNROLLED_LOOP_INDEX == CSM_CASCADES - 1 ) ) {
+
+				float dist = min( linearDepth - csmx, csmy - linearDepth );
+				float ratio = clamp( dist / margin, 0.0, 1.0 );
+
+				vec3 prevColor = directLight.color;
+				directionalLightShadow = directionalLightShadows[ i ];
+				directLight.color *= ( directLight.visible && receiveShadow ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;
+
+				bool shouldFadeLastCascade = UNROLLED_LOOP_INDEX == CSM_CASCADES - 1 && linearDepth > cascadeCenter;
+				directLight.color = mix( prevColor, directLight.color, shouldFadeLastCascade ? ratio : 1.0 );
+
+				ReflectedLight prevLight = reflectedLight;
+				RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+
+				bool shouldBlend = UNROLLED_LOOP_INDEX != CSM_CASCADES - 1 || UNROLLED_LOOP_INDEX == CSM_CASCADES - 1 && linearDepth < cascadeCenter;
+				float blendRatio = shouldBlend ? ratio : 1.0;
+
+				reflectedLight.directDiffuse = mix( prevLight.directDiffuse, reflectedLight.directDiffuse, blendRatio );
+				reflectedLight.directSpecular = mix( prevLight.directSpecular, reflectedLight.directSpecular, blendRatio );
+				reflectedLight.indirectDiffuse = mix( prevLight.indirectDiffuse, reflectedLight.indirectDiffuse, blendRatio );
+				reflectedLight.indirectSpecular = mix( prevLight.indirectSpecular, reflectedLight.indirectSpecular, blendRatio );
+
+			}
+	  	#endif
+
+	}
+	#pragma unroll_loop_end
+	#else
+
+		#pragma unroll_loop_start
+		for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+			directionalLight = directionalLights[ i ];
+			getDirectionalLightInfo( directionalLight, directLight );
+
+			#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )
+
+			directionalLightShadow = directionalLightShadows[ i ];
+			if(linearDepth >= CSM_cascades[UNROLLED_LOOP_INDEX].x && linearDepth < CSM_cascades[UNROLLED_LOOP_INDEX].y) directLight.color *= ( directLight.visible && receiveShadow ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;
+
+			if(linearDepth >= CSM_cascades[UNROLLED_LOOP_INDEX].x && (linearDepth < CSM_cascades[UNROLLED_LOOP_INDEX].y || UNROLLED_LOOP_INDEX == CSM_CASCADES - 1)) RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+
+			#endif
+
+		}
+		#pragma unroll_loop_end
+
+	#endif
+
+	#if ( NUM_DIR_LIGHTS > NUM_DIR_LIGHT_SHADOWS)
+		// compute the lights not casting shadows (if any)
+
+		#pragma unroll_loop_start
+		for ( int i = NUM_DIR_LIGHT_SHADOWS; i < NUM_DIR_LIGHTS; i ++ ) {
+
+			directionalLight = directionalLights[ i ];
+
+			getDirectionalLightInfo( directionalLight, directLight );
+
+			RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+
+		}
+		#pragma unroll_loop_end
+
+	#endif
+
+#endif
+
+
+#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct ) && !defined( USE_CSM ) && !defined( CSM_CASCADES )
+
+	DirectionalLight directionalLight;
+	#if defined( USE_SHADOWMAP ) && NUM_DIR_LIGHT_SHADOWS > 0
+	DirectionalLightShadow directionalLightShadow;
+	#endif
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+		directionalLight = directionalLights[ i ];
+
+		getDirectionalLightInfo( directionalLight, directLight );
+
+		#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )
+		directionalLightShadow = directionalLightShadows[ i ];
+		directLight.color *= ( directLight.visible && receiveShadow ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;
+		#endif
+
+		RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if ( NUM_RECT_AREA_LIGHTS > 0 ) && defined( RE_Direct_RectArea )
+
+	RectAreaLight rectAreaLight;
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_RECT_AREA_LIGHTS; i ++ ) {
+
+		rectAreaLight = rectAreaLights[ i ];
+		RE_Direct_RectArea( rectAreaLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if defined( RE_IndirectDiffuse )
+
+	vec3 iblIrradiance = vec3( 0.0 );
+
+	vec3 irradiance = getAmbientLightIrradiance( ambientLightColor );
+
+	#if defined( USE_LIGHT_PROBES )
+
+		irradiance += getLightProbeIrradiance( lightProbe, geometryNormal );
+
+	#endif
+
+	#if ( NUM_HEMI_LIGHTS > 0 )
+
+		#pragma unroll_loop_start
+		for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {
+
+			irradiance += getHemisphereLightIrradiance( hemisphereLights[ i ], geometryNormal );
+
+		}
+		#pragma unroll_loop_end
+
+	#endif
+
+#endif
+
+#if defined( RE_IndirectSpecular )
+
+	vec3 radiance = vec3( 0.0 );
+	vec3 clearcoatRadiance = vec3( 0.0 );
+
+#endif
+`,
+	lights_pars_begin: /* glsl */`
+#if defined( USE_CSM ) && defined( CSM_CASCADES )
+uniform vec2 CSM_cascades[CSM_CASCADES];
+uniform float cameraNear;
+uniform float shadowFar;
+#endif
+	` + ShaderChunk.lights_pars_begin
+};
+
+export { CSMShader };

src/examples/jsm/curves/CurveExtras.js

@@ -0,0 +1,422 @@
+import {
+	Curve,
+	Vector3
+} from 'three';
+
+/**
+ * A bunch of parametric curves
+ *
+ * Formulas collected from various sources
+ * http://mathworld.wolfram.com/HeartCurve.html
+ * http://en.wikipedia.org/wiki/Viviani%27s_curve
+ * http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
+ * https://prideout.net/blog/old/blog/index.html@p=44.html
+ */
+
+// GrannyKnot
+
+class GrannyKnot extends Curve {
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = 2 * Math.PI * t;
+
+		const x = - 0.22 * Math.cos( t ) - 1.28 * Math.sin( t ) - 0.44 * Math.cos( 3 * t ) - 0.78 * Math.sin( 3 * t );
+		const y = - 0.1 * Math.cos( 2 * t ) - 0.27 * Math.sin( 2 * t ) + 0.38 * Math.cos( 4 * t ) + 0.46 * Math.sin( 4 * t );
+		const z = 0.7 * Math.cos( 3 * t ) - 0.4 * Math.sin( 3 * t );
+
+		return point.set( x, y, z ).multiplyScalar( 20 );
+
+	}
+
+}
+
+// HeartCurve
+
+class HeartCurve extends Curve {
+
+	constructor( scale = 5 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= 2 * Math.PI;
+
+		const x = 16 * Math.pow( Math.sin( t ), 3 );
+		const y = 13 * Math.cos( t ) - 5 * Math.cos( 2 * t ) - 2 * Math.cos( 3 * t ) - Math.cos( 4 * t );
+		const z = 0;
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// Viviani's Curve
+
+class VivianiCurve extends Curve {
+
+	constructor( scale = 70 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = t * 4 * Math.PI; // normalized to 0..1
+		const a = this.scale / 2;
+
+		const x = a * ( 1 + Math.cos( t ) );
+		const y = a * Math.sin( t );
+		const z = 2 * a * Math.sin( t / 2 );
+
+		return point.set( x, y, z );
+
+	}
+
+}
+
+// KnotCurve
+
+class KnotCurve extends Curve {
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= 2 * Math.PI;
+
+		const R = 10;
+		const s = 50;
+
+		const x = s * Math.sin( t );
+		const y = Math.cos( t ) * ( R + s * Math.cos( t ) );
+		const z = Math.sin( t ) * ( R + s * Math.cos( t ) );
+
+		return point.set( x, y, z );
+
+	}
+
+}
+
+
+// HelixCurve
+
+class HelixCurve extends Curve {
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const a = 30; // radius
+		const b = 150; // height
+
+		const t2 = 2 * Math.PI * t * b / 30;
+
+		const x = Math.cos( t2 ) * a;
+		const y = Math.sin( t2 ) * a;
+		const z = b * t;
+
+		return point.set( x, y, z );
+
+	}
+
+}
+
+// TrefoilKnot
+
+class TrefoilKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= Math.PI * 2;
+
+		const x = ( 2 + Math.cos( 3 * t ) ) * Math.cos( 2 * t );
+		const y = ( 2 + Math.cos( 3 * t ) ) * Math.sin( 2 * t );
+		const z = Math.sin( 3 * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// TorusKnot
+
+class TorusKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const p = 3;
+		const q = 4;
+
+		t *= Math.PI * 2;
+
+		const x = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
+		const y = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
+		const z = Math.sin( q * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// CinquefoilKnot
+
+class CinquefoilKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const p = 2;
+		const q = 5;
+
+		t *= Math.PI * 2;
+
+		const x = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
+		const y = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
+		const z = Math.sin( q * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+
+// TrefoilPolynomialKnot
+
+class TrefoilPolynomialKnot extends Curve {
+
+	constructor( scale = 10 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = t * 4 - 2;
+
+		const x = Math.pow( t, 3 ) - 3 * t;
+		const y = Math.pow( t, 4 ) - 4 * t * t;
+		const z = 1 / 5 * Math.pow( t, 5 ) - 2 * t;
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+function scaleTo( x, y, t ) {
+
+	const r = y - x;
+	return t * r + x;
+
+}
+
+// FigureEightPolynomialKnot
+
+class FigureEightPolynomialKnot extends Curve {
+
+	constructor( scale = 1 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t = scaleTo( - 4, 4, t );
+
+		const x = 2 / 5 * t * ( t * t - 7 ) * ( t * t - 10 );
+		const y = Math.pow( t, 4 ) - 13 * t * t;
+		const z = 1 / 10 * t * ( t * t - 4 ) * ( t * t - 9 ) * ( t * t - 12 );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// DecoratedTorusKnot4a
+
+class DecoratedTorusKnot4a extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		t *= Math.PI * 2;
+
+		const x = Math.cos( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) );
+		const y = Math.sin( 2 * t ) * ( 1 + 0.6 * ( Math.cos( 5 * t ) + 0.75 * Math.cos( 10 * t ) ) );
+		const z = 0.35 * Math.sin( 5 * t );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// DecoratedTorusKnot4b
+
+class DecoratedTorusKnot4b extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const fi = t * Math.PI * 2;
+
+		const x = Math.cos( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) );
+		const y = Math.sin( 2 * fi ) * ( 1 + 0.45 * Math.cos( 3 * fi ) + 0.4 * Math.cos( 9 * fi ) );
+		const z = 0.2 * Math.sin( 9 * fi );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+
+// DecoratedTorusKnot5a
+
+class DecoratedTorusKnot5a extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const fi = t * Math.PI * 2;
+
+		const x = Math.cos( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) );
+		const y = Math.sin( 3 * fi ) * ( 1 + 0.3 * Math.cos( 5 * fi ) + 0.5 * Math.cos( 10 * fi ) );
+		const z = 0.2 * Math.sin( 20 * fi );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+// DecoratedTorusKnot5c
+
+class DecoratedTorusKnot5c extends Curve {
+
+	constructor( scale = 40 ) {
+
+		super();
+
+		this.scale = scale;
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const fi = t * Math.PI * 2;
+
+		const x = Math.cos( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) );
+		const y = Math.sin( 4 * fi ) * ( 1 + 0.5 * ( Math.cos( 5 * fi ) + 0.4 * Math.cos( 20 * fi ) ) );
+		const z = 0.35 * Math.sin( 15 * fi );
+
+		return point.set( x, y, z ).multiplyScalar( this.scale );
+
+	}
+
+}
+
+export {
+	GrannyKnot,
+	HeartCurve,
+	VivianiCurve,
+	KnotCurve,
+	HelixCurve,
+	TrefoilKnot,
+	TorusKnot,
+	CinquefoilKnot,
+	TrefoilPolynomialKnot,
+	FigureEightPolynomialKnot,
+	DecoratedTorusKnot4a,
+	DecoratedTorusKnot4b,
+	DecoratedTorusKnot5a,
+	DecoratedTorusKnot5c
+};

src/examples/jsm/curves/NURBSCurve.js

@@ -0,0 +1,80 @@
+import {
+	Curve,
+	Vector3,
+	Vector4
+} from 'three';
+import * as NURBSUtils from '../curves/NURBSUtils.js';
+
+/**
+ * NURBS curve object
+ *
+ * Derives from Curve, overriding getPoint and getTangent.
+ *
+ * Implementation is based on (x, y [, z=0 [, w=1]]) control points with w=weight.
+ *
+ **/
+
+class NURBSCurve extends Curve {
+
+	constructor(
+		degree,
+		knots /* array of reals */,
+		controlPoints /* array of Vector(2|3|4) */,
+		startKnot /* index in knots */,
+		endKnot /* index in knots */
+	) {
+
+		super();
+
+		this.degree = degree;
+		this.knots = knots;
+		this.controlPoints = [];
+		// Used by periodic NURBS to remove hidden spans
+		this.startKnot = startKnot || 0;
+		this.endKnot = endKnot || ( this.knots.length - 1 );
+
+		for ( let i = 0; i < controlPoints.length; ++ i ) {
+
+			// ensure Vector4 for control points
+			const point = controlPoints[ i ];
+			this.controlPoints[ i ] = new Vector4( point.x, point.y, point.z, point.w );
+
+		}
+
+	}
+
+	getPoint( t, optionalTarget = new Vector3() ) {
+
+		const point = optionalTarget;
+
+		const u = this.knots[ this.startKnot ] + t * ( this.knots[ this.endKnot ] - this.knots[ this.startKnot ] ); // linear mapping t->u
+
+		// following results in (wx, wy, wz, w) homogeneous point
+		const hpoint = NURBSUtils.calcBSplinePoint( this.degree, this.knots, this.controlPoints, u );
+
+		if ( hpoint.w !== 1.0 ) {
+
+			// project to 3D space: (wx, wy, wz, w) -> (x, y, z, 1)
+			hpoint.divideScalar( hpoint.w );
+
+		}
+
+		return point.set( hpoint.x, hpoint.y, hpoint.z );
+
+	}
+
+	getTangent( t, optionalTarget = new Vector3() ) {
+
+		const tangent = optionalTarget;
+
+		const u = this.knots[ 0 ] + t * ( this.knots[ this.knots.length - 1 ] - this.knots[ 0 ] );
+		const ders = NURBSUtils.calcNURBSDerivatives( this.degree, this.knots, this.controlPoints, u, 1 );
+		tangent.copy( ders[ 1 ] ).normalize();
+
+		return tangent;
+
+	}
+
+}
+
+export { NURBSCurve };

src/examples/jsm/curves/NURBSSurface.js

@@ -0,0 +1,52 @@
+import {
+	Vector4
+} from 'three';
+import * as NURBSUtils from '../curves/NURBSUtils.js';
+
+/**
+ * NURBS surface object
+ *
+ * Implementation is based on (x, y [, z=0 [, w=1]]) control points with w=weight.
+ **/
+
+class NURBSSurface {
+
+	constructor( degree1, degree2, knots1, knots2 /* arrays of reals */, controlPoints /* array^2 of Vector(2|3|4) */ ) {
+
+		this.degree1 = degree1;
+		this.degree2 = degree2;
+		this.knots1 = knots1;
+		this.knots2 = knots2;
+		this.controlPoints = [];
+
+		const len1 = knots1.length - degree1 - 1;
+		const len2 = knots2.length - degree2 - 1;
+
+		// ensure Vector4 for control points
+		for ( let i = 0; i < len1; ++ i ) {
+
+			this.controlPoints[ i ] = [];
+
+			for ( let j = 0; j < len2; ++ j ) {
+
+				const point = controlPoints[ i ][ j ];
+				this.controlPoints[ i ][ j ] = new Vector4( point.x, point.y, point.z, point.w );
+
+			}
+
+		}
+
+	}
+
+	getPoint( t1, t2, target ) {
+
+		const u = this.knots1[ 0 ] + t1 * ( this.knots1[ this.knots1.length - 1 ] - this.knots1[ 0 ] ); // linear mapping t1->u
+		const v = this.knots2[ 0 ] + t2 * ( this.knots2[ this.knots2.length - 1 ] - this.knots2[ 0 ] ); // linear mapping t2->u
+
+		NURBSUtils.calcSurfacePoint( this.degree1, this.degree2, this.knots1, this.knots2, this.controlPoints, u, v, target );
+
+	}
+
+}
+
+export { NURBSSurface };

src/examples/jsm/curves/NURBSUtils.js

@@ -0,0 +1,487 @@
+import {
+	Vector3,
+	Vector4
+} from 'three';
+
+/**
+ * NURBS utils
+ *
+ * See NURBSCurve and NURBSSurface.
+ **/
+
+
+/**************************************************************
+ *	NURBS Utils
+ **************************************************************/
+
+/*
+Finds knot vector span.
+
+p : degree
+u : parametric value
+U : knot vector
+
+returns the span
+*/
+function findSpan( p, u, U ) {
+
+	const n = U.length - p - 1;
+
+	if ( u >= U[ n ] ) {
+
+		return n - 1;
+
+	}
+
+	if ( u <= U[ p ] ) {
+
+		return p;
+
+	}
+
+	let low = p;
+	let high = n;
+	let mid = Math.floor( ( low + high ) / 2 );
+
+	while ( u < U[ mid ] || u >= U[ mid + 1 ] ) {
+
+		if ( u < U[ mid ] ) {
+
+			high = mid;
+
+		} else {
+
+			low = mid;
+
+		}
+
+		mid = Math.floor( ( low + high ) / 2 );
+
+	}
+
+	return mid;
+
+}
+
+
+/*
+Calculate basis functions. See The NURBS Book, page 70, algorithm A2.2
+
+span : span in which u lies
+u    : parametric point
+p    : degree
+U    : knot vector
+
+returns array[p+1] with basis functions values.
+*/
+function calcBasisFunctions( span, u, p, U ) {
+
+	const N = [];
+	const left = [];
+	const right = [];
+	N[ 0 ] = 1.0;
+
+	for ( let j = 1; j <= p; ++ j ) {
+
+		left[ j ] = u - U[ span + 1 - j ];
+		right[ j ] = U[ span + j ] - u;
+
+		let saved = 0.0;
+
+		for ( let r = 0; r < j; ++ r ) {
+
+			const rv = right[ r + 1 ];
+			const lv = left[ j - r ];
+			const temp = N[ r ] / ( rv + lv );
+			N[ r ] = saved + rv * temp;
+			saved = lv * temp;
+
+		}
+
+		N[ j ] = saved;
+
+	}
+
+	return N;
+
+}
+
+
+/*
+Calculate B-Spline curve points. See The NURBS Book, page 82, algorithm A3.1.
+
+p : degree of B-Spline
+U : knot vector
+P : control points (x, y, z, w)
+u : parametric point
+
+returns point for given u
+*/
+function calcBSplinePoint( p, U, P, u ) {
+
+	const span = findSpan( p, u, U );
+	const N = calcBasisFunctions( span, u, p, U );
+	const C = new Vector4( 0, 0, 0, 0 );
+
+	for ( let j = 0; j <= p; ++ j ) {
+
+		const point = P[ span - p + j ];
+		const Nj = N[ j ];
+		const wNj = point.w * Nj;
+		C.x += point.x * wNj;
+		C.y += point.y * wNj;
+		C.z += point.z * wNj;
+		C.w += point.w * Nj;
+
+	}
+
+	return C;
+
+}
+
+
+/*
+Calculate basis functions derivatives. See The NURBS Book, page 72, algorithm A2.3.
+
+span : span in which u lies
+u    : parametric point
+p    : degree
+n    : number of derivatives to calculate
+U    : knot vector
+
+returns array[n+1][p+1] with basis functions derivatives
+*/
+function calcBasisFunctionDerivatives( span, u, p, n, U ) {
+
+	const zeroArr = [];
+	for ( let i = 0; i <= p; ++ i )
+		zeroArr[ i ] = 0.0;
+
+	const ders = [];
+
+	for ( let i = 0; i <= n; ++ i )
+		ders[ i ] = zeroArr.slice( 0 );
+
+	const ndu = [];
+
+	for ( let i = 0; i <= p; ++ i )
+		ndu[ i ] = zeroArr.slice( 0 );
+
+	ndu[ 0 ][ 0 ] = 1.0;
+
+	const left = zeroArr.slice( 0 );
+	const right = zeroArr.slice( 0 );
+
+	for ( let j = 1; j <= p; ++ j ) {
+
+		left[ j ] = u - U[ span + 1 - j ];
+		right[ j ] = U[ span + j ] - u;
+
+		let saved = 0.0;
+
+		for ( let r = 0; r < j; ++ r ) {
+
+			const rv = right[ r + 1 ];
+			const lv = left[ j - r ];
+			ndu[ j ][ r ] = rv + lv;
+
+			const temp = ndu[ r ][ j - 1 ] / ndu[ j ][ r ];
+			ndu[ r ][ j ] = saved + rv * temp;
+			saved = lv * temp;
+
+		}
+
+		ndu[ j ][ j ] = saved;
+
+	}
+
+	for ( let j = 0; j <= p; ++ j ) {
+
+		ders[ 0 ][ j ] = ndu[ j ][ p ];
+
+	}
+
+	for ( let r = 0; r <= p; ++ r ) {
+
+		let s1 = 0;
+		let s2 = 1;
+
+		const a = [];
+		for ( let i = 0; i <= p; ++ i ) {
+
+			a[ i ] = zeroArr.slice( 0 );
+
+		}
+
+		a[ 0 ][ 0 ] = 1.0;
+
+		for ( let k = 1; k <= n; ++ k ) {
+
+			let d = 0.0;
+			const rk = r - k;
+			const pk = p - k;
+
+			if ( r >= k ) {
+
+				a[ s2 ][ 0 ] = a[ s1 ][ 0 ] / ndu[ pk + 1 ][ rk ];
+				d = a[ s2 ][ 0 ] * ndu[ rk ][ pk ];
+
+			}
+
+			const j1 = ( rk >= - 1 ) ? 1 : - rk;
+			const j2 = ( r - 1 <= pk ) ? k - 1 : p - r;
+
+			for ( let j = j1; j <= j2; ++ j ) {
+
+				a[ s2 ][ j ] = ( a[ s1 ][ j ] - a[ s1 ][ j - 1 ] ) / ndu[ pk + 1 ][ rk + j ];
+				d += a[ s2 ][ j ] * ndu[ rk + j ][ pk ];
+
+			}
+
+			if ( r <= pk ) {
+
+				a[ s2 ][ k ] = - a[ s1 ][ k - 1 ] / ndu[ pk + 1 ][ r ];
+				d += a[ s2 ][ k ] * ndu[ r ][ pk ];
+
+			}
+
+			ders[ k ][ r ] = d;
+
+			const j = s1;
+			s1 = s2;
+			s2 = j;
+
+		}
+
+	}
+
+	let r = p;
+
+	for ( let k = 1; k <= n; ++ k ) {
+
+		for ( let j = 0; j <= p; ++ j ) {
+
+			ders[ k ][ j ] *= r;
+
+		}
+
+		r *= p - k;
+
+	}
+
+	return ders;
+
+}
+
+
+/*
+	Calculate derivatives of a B-Spline. See The NURBS Book, page 93, algorithm A3.2.
+
+	p  : degree
+	U  : knot vector
+	P  : control points
+	u  : Parametric points
+	nd : number of derivatives
+
+	returns array[d+1] with derivatives
+	*/
+function calcBSplineDerivatives( p, U, P, u, nd ) {
+
+	const du = nd < p ? nd : p;
+	const CK = [];
+	const span = findSpan( p, u, U );
+	const nders = calcBasisFunctionDerivatives( span, u, p, du, U );
+	const Pw = [];
+
+	for ( let i = 0; i < P.length; ++ i ) {
+
+		const point = P[ i ].clone();
+		const w = point.w;
+
+		point.x *= w;
+		point.y *= w;
+		point.z *= w;
+
+		Pw[ i ] = point;
+
+	}
+
+	for ( let k = 0; k <= du; ++ k ) {
+
+		const point = Pw[ span - p ].clone().multiplyScalar( nders[ k ][ 0 ] );
+
+		for ( let j = 1; j <= p; ++ j ) {
+
+			point.add( Pw[ span - p + j ].clone().multiplyScalar( nders[ k ][ j ] ) );
+
+		}
+
+		CK[ k ] = point;
+
+	}
+
+	for ( let k = du + 1; k <= nd + 1; ++ k ) {
+
+		CK[ k ] = new Vector4( 0, 0, 0 );
+
+	}
+
+	return CK;
+
+}
+
+
+/*
+Calculate "K over I"
+
+returns k!/(i!(k-i)!)
+*/
+function calcKoverI( k, i ) {
+
+	let nom = 1;
+
+	for ( let j = 2; j <= k; ++ j ) {
+
+		nom *= j;
+
+	}
+
+	let denom = 1;
+
+	for ( let j = 2; j <= i; ++ j ) {
+
+		denom *= j;
+
+	}
+
+	for ( let j = 2; j <= k - i; ++ j ) {
+
+		denom *= j;
+
+	}
+
+	return nom / denom;
+
+}
+
+
+/*
+Calculate derivatives (0-nd) of rational curve. See The NURBS Book, page 127, algorithm A4.2.
+
+Pders : result of function calcBSplineDerivatives
+
+returns array with derivatives for rational curve.
+*/
+function calcRationalCurveDerivatives( Pders ) {
+
+	const nd = Pders.length;
+	const Aders = [];
+	const wders = [];
+
+	for ( let i = 0; i < nd; ++ i ) {
+
+		const point = Pders[ i ];
+		Aders[ i ] = new Vector3( point.x, point.y, point.z );
+		wders[ i ] = point.w;
+
+	}
+
+	const CK = [];
+
+	for ( let k = 0; k < nd; ++ k ) {
+
+		const v = Aders[ k ].clone();
+
+		for ( let i = 1; i <= k; ++ i ) {
+
+			v.sub( CK[ k - i ].clone().multiplyScalar( calcKoverI( k, i ) * wders[ i ] ) );
+
+		}
+
+		CK[ k ] = v.divideScalar( wders[ 0 ] );
+
+	}
+
+	return CK;
+
+}
+
+
+/*
+Calculate NURBS curve derivatives. See The NURBS Book, page 127, algorithm A4.2.
+
+p  : degree
+U  : knot vector
+P  : control points in homogeneous space
+u  : parametric points
+nd : number of derivatives
+
+returns array with derivatives.
+*/
+function calcNURBSDerivatives( p, U, P, u, nd ) {
+
+	const Pders = calcBSplineDerivatives( p, U, P, u, nd );
+	return calcRationalCurveDerivatives( Pders );
+
+}
+
+
+/*
+Calculate rational B-Spline surface point. See The NURBS Book, page 134, algorithm A4.3.
+
+p1, p2 : degrees of B-Spline surface
+U1, U2 : knot vectors
+P      : control points (x, y, z, w)
+u, v   : parametric values
+
+returns point for given (u, v)
+*/
+function calcSurfacePoint( p, q, U, V, P, u, v, target ) {
+
+	const uspan = findSpan( p, u, U );
+	const vspan = findSpan( q, v, V );
+	const Nu = calcBasisFunctions( uspan, u, p, U );
+	const Nv = calcBasisFunctions( vspan, v, q, V );
+	const temp = [];
+
+	for ( let l = 0; l <= q; ++ l ) {
+
+		temp[ l ] = new Vector4( 0, 0, 0, 0 );
+		for ( let k = 0; k <= p; ++ k ) {
+
+			const point = P[ uspan - p + k ][ vspan - q + l ].clone();
+			const w = point.w;
+			point.x *= w;
+			point.y *= w;
+			point.z *= w;
+			temp[ l ].add( point.multiplyScalar( Nu[ k ] ) );
+
+		}
+
+	}
+
+	const Sw = new Vector4( 0, 0, 0, 0 );
+	for ( let l = 0; l <= q; ++ l ) {
+
+		Sw.add( temp[ l ].multiplyScalar( Nv[ l ] ) );
+
+	}
+
+	Sw.divideScalar( Sw.w );
+	target.set( Sw.x, Sw.y, Sw.z );
+
+}
+
+
+
+export {
+	findSpan,
+	calcBasisFunctions,
+	calcBSplinePoint,
+	calcBasisFunctionDerivatives,
+	calcBSplineDerivatives,
+	calcKoverI,
+	calcRationalCurveDerivatives,
+	calcNURBSDerivatives,
+	calcSurfacePoint,
+};

src/examples/jsm/effects/AnaglyphEffect.js

@@ -0,0 +1,154 @@
+import {
+	LinearFilter,
+	Matrix3,
+	Mesh,
+	NearestFilter,
+	OrthographicCamera,
+	PlaneGeometry,
+	RGBAFormat,
+	Scene,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+
+class AnaglyphEffect {
+
+	constructor( renderer, width = 512, height = 512 ) {
+
+		// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
+
+		this.colorMatrixLeft = new Matrix3().fromArray( [
+			0.456100, - 0.0400822, - 0.0152161,
+			0.500484, - 0.0378246, - 0.0205971,
+			0.176381, - 0.0157589, - 0.00546856
+		] );
+
+		this.colorMatrixRight = new Matrix3().fromArray( [
+			- 0.0434706, 0.378476, - 0.0721527,
+			- 0.0879388, 0.73364, - 0.112961,
+			- 0.00155529, - 0.0184503, 1.2264
+		] );
+
+		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
+		const _scene = new Scene();
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( width, height, _params );
+		const _renderTargetR = new WebGLRenderTarget( width, height, _params );
+
+		const _material = new ShaderMaterial( {
+
+			uniforms: {
+
+				'mapLeft': { value: _renderTargetL.texture },
+				'mapRight': { value: _renderTargetR.texture },
+
+				'colorMatrixLeft': { value: this.colorMatrixLeft },
+				'colorMatrixRight': { value: this.colorMatrixRight }
+
+			},
+
+			vertexShader: [
+
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vUv = vec2( uv.x, uv.y );',
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+				'}'
+
+			].join( '\n' ),
+
+			fragmentShader: [
+
+				'uniform sampler2D mapLeft;',
+				'uniform sampler2D mapRight;',
+				'varying vec2 vUv;',
+
+				'uniform mat3 colorMatrixLeft;',
+				'uniform mat3 colorMatrixRight;',
+
+				'void main() {',
+
+				'	vec2 uv = vUv;',
+
+				'	vec4 colorL = texture2D( mapLeft, uv );',
+				'	vec4 colorR = texture2D( mapRight, uv );',
+
+				'	vec3 color = clamp(',
+				'			colorMatrixLeft * colorL.rgb +',
+				'			colorMatrixRight * colorR.rgb, 0., 1. );',
+
+				'	gl_FragColor = vec4(',
+				'			color.r, color.g, color.b,',
+				'			max( colorL.a, colorR.a ) );',
+
+				'	#include <tonemapping_fragment>',
+				'	#include <colorspace_fragment>',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const _mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
+		_scene.add( _mesh );
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+			const pixelRatio = renderer.getPixelRatio();
+
+			_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
+			_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.setRenderTarget( _renderTargetL );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			renderer.render( _scene, _camera );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+			_mesh.geometry.dispose();
+			_mesh.material.dispose();
+
+		};
+
+	}
+
+}
+
+export { AnaglyphEffect };

src/examples/jsm/effects/AsciiEffect.js

@@ -0,0 +1,263 @@
+/**
+ * Ascii generation is based on https://github.com/hassadee/jsascii/blob/master/jsascii.js
+ *
+ * 16 April 2012 - @blurspline
+ */
+
+class AsciiEffect {
+
+	constructor( renderer, charSet = ' .:-=+*#%@', options = {} ) {
+
+		// ' .,:;=|iI+hHOE#`$';
+		// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
+		// ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
+
+		// Some ASCII settings
+
+		const fResolution = options[ 'resolution' ] || 0.15; // Higher for more details
+		const iScale = options[ 'scale' ] || 1;
+		const bColor = options[ 'color' ] || false; // nice but slows down rendering!
+		const bAlpha = options[ 'alpha' ] || false; // Transparency
+		const bBlock = options[ 'block' ] || false; // blocked characters. like good O dos
+		const bInvert = options[ 'invert' ] || false; // black is white, white is black
+		const strResolution = options[ 'strResolution' ] || 'low';
+
+		let width, height;
+
+		const domElement = document.createElement( 'div' );
+		domElement.style.cursor = 'default';
+
+		const oAscii = document.createElement( 'table' );
+		domElement.appendChild( oAscii );
+
+		let iWidth, iHeight;
+		let oImg;
+
+		this.setSize = function ( w, h ) {
+
+			width = w;
+			height = h;
+
+			renderer.setSize( w, h );
+
+			initAsciiSize();
+
+		};
+
+
+		this.render = function ( scene, camera ) {
+
+			renderer.render( scene, camera );
+			asciifyImage( oAscii );
+
+		};
+
+		this.domElement = domElement;
+
+
+		// Throw in ascii library from https://github.com/hassadee/jsascii/blob/master/jsascii.js (MIT License)
+
+		function initAsciiSize() {
+
+			iWidth = Math.floor( width * fResolution );
+			iHeight = Math.floor( height * fResolution );
+
+			oCanvas.width = iWidth;
+			oCanvas.height = iHeight;
+			// oCanvas.style.display = "none";
+			// oCanvas.style.width = iWidth;
+			// oCanvas.style.height = iHeight;
+
+			oImg = renderer.domElement;
+
+			if ( oImg.style.backgroundColor ) {
+
+				oAscii.rows[ 0 ].cells[ 0 ].style.backgroundColor = oImg.style.backgroundColor;
+				oAscii.rows[ 0 ].cells[ 0 ].style.color = oImg.style.color;
+
+			}
+
+			oAscii.cellSpacing = 0;
+			oAscii.cellPadding = 0;
+
+			const oStyle = oAscii.style;
+			oStyle.whiteSpace = 'pre';
+			oStyle.margin = '0px';
+			oStyle.padding = '0px';
+			oStyle.letterSpacing = fLetterSpacing + 'px';
+			oStyle.fontFamily = strFont;
+			oStyle.fontSize = fFontSize + 'px';
+			oStyle.lineHeight = fLineHeight + 'px';
+			oStyle.textAlign = 'left';
+			oStyle.textDecoration = 'none';
+
+		}
+
+
+		const aDefaultCharList = ( ' .,:;i1tfLCG08@' ).split( '' );
+		const aDefaultColorCharList = ( ' CGO08@' ).split( '' );
+		const strFont = 'courier new, monospace';
+
+		const oCanvasImg = renderer.domElement;
+
+		const oCanvas = document.createElement( 'canvas' );
+		if ( ! oCanvas.getContext ) {
+
+			return;
+
+		}
+
+		const oCtx = oCanvas.getContext( '2d' );
+		if ( ! oCtx.getImageData ) {
+
+			return;
+
+		}
+
+		let aCharList = ( bColor ? aDefaultColorCharList : aDefaultCharList );
+
+		if ( charSet ) aCharList = charSet;
+
+		// Setup dom
+
+		const fFontSize = ( 2 / fResolution ) * iScale;
+		const fLineHeight = ( 2 / fResolution ) * iScale;
+
+		// adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
+
+		let fLetterSpacing = 0;
+
+		if ( strResolution == 'low' ) {
+
+			switch ( iScale ) {
+
+				case 1 : fLetterSpacing = - 1; break;
+				case 2 :
+				case 3 : fLetterSpacing = - 2.1; break;
+				case 4 : fLetterSpacing = - 3.1; break;
+				case 5 : fLetterSpacing = - 4.15; break;
+
+			}
+
+		}
+
+		if ( strResolution == 'medium' ) {
+
+			switch ( iScale ) {
+
+				case 1 : fLetterSpacing = 0; break;
+				case 2 : fLetterSpacing = - 1; break;
+				case 3 : fLetterSpacing = - 1.04; break;
+				case 4 :
+				case 5 : fLetterSpacing = - 2.1; break;
+
+			}
+
+		}
+
+		if ( strResolution == 'high' ) {
+
+			switch ( iScale ) {
+
+				case 1 :
+				case 2 : fLetterSpacing = 0; break;
+				case 3 :
+				case 4 :
+				case 5 : fLetterSpacing = - 1; break;
+
+			}
+
+		}
+
+
+		// can't get a span or div to flow like an img element, but a table works?
+
+
+		// convert img element to ascii
+
+		function asciifyImage( oAscii ) {
+
+			oCtx.clearRect( 0, 0, iWidth, iHeight );
+			oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
+			const oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data;
+
+			// Coloring loop starts now
+			let strChars = '';
+
+			// console.time('rendering');
+
+			for ( let y = 0; y < iHeight; y += 2 ) {
+
+				for ( let x = 0; x < iWidth; x ++ ) {
+
+					const iOffset = ( y * iWidth + x ) * 4;
+
+					const iRed = oImgData[ iOffset ];
+					const iGreen = oImgData[ iOffset + 1 ];
+					const iBlue = oImgData[ iOffset + 2 ];
+					const iAlpha = oImgData[ iOffset + 3 ];
+					let iCharIdx;
+
+					let fBrightness;
+
+					fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255;
+					// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
+
+					if ( iAlpha == 0 ) {
+
+						// should calculate alpha instead, but quick hack :)
+						//fBrightness *= (iAlpha / 255);
+						fBrightness = 1;
+
+					}
+
+					iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );
+
+					if ( bInvert ) {
+
+						iCharIdx = aCharList.length - iCharIdx - 1;
+
+					}
+
+					// good for debugging
+					//fBrightness = Math.floor(fBrightness * 10);
+					//strThisChar = fBrightness;
+
+					let strThisChar = aCharList[ iCharIdx ];
+
+					if ( strThisChar === undefined || strThisChar == ' ' )
+						strThisChar = '&nbsp;';
+
+					if ( bColor ) {
+
+						strChars += '<span style=\''
+							+ 'color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');'
+							+ ( bBlock ? 'background-color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');' : '' )
+							+ ( bAlpha ? 'opacity:' + ( iAlpha / 255 ) + ';' : '' )
+							+ '\'>' + strThisChar + '</span>';
+
+					} else {
+
+						strChars += strThisChar;
+
+					}
+
+				}
+
+				strChars += '<br/>';
+
+			}
+
+			oAscii.innerHTML = `<tr><td style="display:block;width:${width}px;height:${height}px;overflow:hidden">${strChars}</td></tr>`;
+
+			// console.timeEnd('rendering');
+
+			// return oAscii;
+
+		}
+
+	}
+
+}
+
+export { AsciiEffect };

src/examples/jsm/effects/OutlineEffect.js

@@ -0,0 +1,539 @@
+import {
+	BackSide,
+	Color,
+	ShaderMaterial,
+	UniformsLib,
+	UniformsUtils
+} from 'three';
+
+/**
+ * Reference: https://en.wikipedia.org/wiki/Cel_shading
+ *
+ * API
+ *
+ * 1. Traditional
+ *
+ * const effect = new OutlineEffect( renderer );
+ *
+ * function render() {
+ *
+ * 	effect.render( scene, camera );
+ *
+ * }
+ *
+ * 2. VR compatible
+ *
+ * const effect = new OutlineEffect( renderer );
+ * let renderingOutline = false;
+ *
+ * scene.onAfterRender = function () {
+ *
+ * 	if ( renderingOutline ) return;
+ *
+ * 	renderingOutline = true;
+ *
+ * 	effect.renderOutline( scene, camera );
+ *
+ * 	renderingOutline = false;
+ *
+ * };
+ *
+ * function render() {
+ *
+ * 	renderer.render( scene, camera );
+ *
+ * }
+ *
+ * // How to set default outline parameters
+ * new OutlineEffect( renderer, {
+ * 	defaultThickness: 0.01,
+ * 	defaultColor: [ 0, 0, 0 ],
+ * 	defaultAlpha: 0.8,
+ * 	defaultKeepAlive: true // keeps outline material in cache even if material is removed from scene
+ * } );
+ *
+ * // How to set outline parameters for each material
+ * material.userData.outlineParameters = {
+ * 	thickness: 0.01,
+ * 	color: [ 0, 0, 0 ],
+ * 	alpha: 0.8,
+ * 	visible: true,
+ * 	keepAlive: true
+ * };
+ */
+
+class OutlineEffect {
+
+	constructor( renderer, parameters = {} ) {
+
+		this.enabled = true;
+
+		const defaultThickness = parameters.defaultThickness !== undefined ? parameters.defaultThickness : 0.003;
+		const defaultColor = new Color().fromArray( parameters.defaultColor !== undefined ? parameters.defaultColor : [ 0, 0, 0 ] );
+		const defaultAlpha = parameters.defaultAlpha !== undefined ? parameters.defaultAlpha : 1.0;
+		const defaultKeepAlive = parameters.defaultKeepAlive !== undefined ? parameters.defaultKeepAlive : false;
+
+		// object.material.uuid -> outlineMaterial or
+		// object.material[ n ].uuid -> outlineMaterial
+		// save at the outline material creation and release
+		// if it's unused removeThresholdCount frames
+		// unless keepAlive is true.
+		const cache = {};
+
+		const removeThresholdCount = 60;
+
+		// outlineMaterial.uuid -> object.material or
+		// outlineMaterial.uuid -> object.material[ n ]
+		// save before render and release after render.
+		const originalMaterials = {};
+
+		// object.uuid -> originalOnBeforeRender
+		// save before render and release after render.
+		const originalOnBeforeRenders = {};
+
+		//this.cache = cache;  // for debug
+
+		const uniformsOutline = {
+			outlineThickness: { value: defaultThickness },
+			outlineColor: { value: defaultColor },
+			outlineAlpha: { value: defaultAlpha }
+		};
+
+		const vertexShader = [
+			'#include <common>',
+			'#include <uv_pars_vertex>',
+			'#include <displacementmap_pars_vertex>',
+			'#include <fog_pars_vertex>',
+			'#include <morphtarget_pars_vertex>',
+			'#include <skinning_pars_vertex>',
+			'#include <logdepthbuf_pars_vertex>',
+			'#include <clipping_planes_pars_vertex>',
+
+			'uniform float outlineThickness;',
+
+			'vec4 calculateOutline( vec4 pos, vec3 normal, vec4 skinned ) {',
+			'	float thickness = outlineThickness;',
+			'	const float ratio = 1.0;', // TODO: support outline thickness ratio for each vertex
+			'	vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + normal, 1.0 );',
+			// NOTE: subtract pos2 from pos because BackSide objectNormal is negative
+			'	vec4 norm = normalize( pos - pos2 );',
+			'	return pos + norm * thickness * pos.w * ratio;',
+			'}',
+
+			'void main() {',
+
+			'	#include <uv_vertex>',
+
+			'	#include <beginnormal_vertex>',
+			'	#include <morphnormal_vertex>',
+			'	#include <skinbase_vertex>',
+			'	#include <skinnormal_vertex>',
+
+			'	#include <begin_vertex>',
+			'	#include <morphtarget_vertex>',
+			'	#include <skinning_vertex>',
+			'	#include <displacementmap_vertex>',
+			'	#include <project_vertex>',
+
+			'	vec3 outlineNormal = - objectNormal;', // the outline material is always rendered with BackSide
+
+			'	gl_Position = calculateOutline( gl_Position, outlineNormal, vec4( transformed, 1.0 ) );',
+
+			'	#include <logdepthbuf_vertex>',
+			'	#include <clipping_planes_vertex>',
+			'	#include <fog_vertex>',
+
+			'}',
+
+		].join( '\n' );
+
+		const fragmentShader = [
+
+			'#include <common>',
+			'#include <fog_pars_fragment>',
+			'#include <logdepthbuf_pars_fragment>',
+			'#include <clipping_planes_pars_fragment>',
+
+			'uniform vec3 outlineColor;',
+			'uniform float outlineAlpha;',
+
+			'void main() {',
+
+			'	#include <clipping_planes_fragment>',
+			'	#include <logdepthbuf_fragment>',
+
+			'	gl_FragColor = vec4( outlineColor, outlineAlpha );',
+
+			'	#include <tonemapping_fragment>',
+			'	#include <colorspace_fragment>',
+			'	#include <fog_fragment>',
+			'	#include <premultiplied_alpha_fragment>',
+
+			'}'
+
+		].join( '\n' );
+
+		function createMaterial() {
+
+			return new ShaderMaterial( {
+				type: 'OutlineEffect',
+				uniforms: UniformsUtils.merge( [
+					UniformsLib[ 'fog' ],
+					UniformsLib[ 'displacementmap' ],
+					uniformsOutline
+				] ),
+				vertexShader: vertexShader,
+				fragmentShader: fragmentShader,
+				side: BackSide
+			} );
+
+		}
+
+		function getOutlineMaterialFromCache( originalMaterial ) {
+
+			let data = cache[ originalMaterial.uuid ];
+
+			if ( data === undefined ) {
+
+				data = {
+					material: createMaterial(),
+					used: true,
+					keepAlive: defaultKeepAlive,
+					count: 0
+				};
+
+				cache[ originalMaterial.uuid ] = data;
+
+			}
+
+			data.used = true;
+
+			return data.material;
+
+		}
+
+		function getOutlineMaterial( originalMaterial ) {
+
+			const outlineMaterial = getOutlineMaterialFromCache( originalMaterial );
+
+			originalMaterials[ outlineMaterial.uuid ] = originalMaterial;
+
+			updateOutlineMaterial( outlineMaterial, originalMaterial );
+
+			return outlineMaterial;
+
+		}
+
+		function isCompatible( object ) {
+
+			const geometry = object.geometry;
+			const hasNormals = ( geometry !== undefined ) && ( geometry.attributes.normal !== undefined );
+
+			return ( object.isMesh === true && object.material !== undefined && hasNormals === true );
+
+		}
+
+		function setOutlineMaterial( object ) {
+
+			if ( isCompatible( object ) === false ) return;
+
+			if ( Array.isArray( object.material ) ) {
+
+				for ( let i = 0, il = object.material.length; i < il; i ++ ) {
+
+					object.material[ i ] = getOutlineMaterial( object.material[ i ] );
+
+				}
+
+			} else {
+
+				object.material = getOutlineMaterial( object.material );
+
+			}
+
+			originalOnBeforeRenders[ object.uuid ] = object.onBeforeRender;
+			object.onBeforeRender = onBeforeRender;
+
+		}
+
+		function restoreOriginalMaterial( object ) {
+
+			if ( isCompatible( object ) === false ) return;
+
+			if ( Array.isArray( object.material ) ) {
+
+				for ( let i = 0, il = object.material.length; i < il; i ++ ) {
+
+					object.material[ i ] = originalMaterials[ object.material[ i ].uuid ];
+
+				}
+
+			} else {
+
+				object.material = originalMaterials[ object.material.uuid ];
+
+			}
+
+			object.onBeforeRender = originalOnBeforeRenders[ object.uuid ];
+
+		}
+
+		function onBeforeRender( renderer, scene, camera, geometry, material ) {
+
+			const originalMaterial = originalMaterials[ material.uuid ];
+
+			// just in case
+			if ( originalMaterial === undefined ) return;
+
+			updateUniforms( material, originalMaterial );
+
+		}
+
+		function updateUniforms( material, originalMaterial ) {
+
+			const outlineParameters = originalMaterial.userData.outlineParameters;
+
+			material.uniforms.outlineAlpha.value = originalMaterial.opacity;
+
+			if ( outlineParameters !== undefined ) {
+
+				if ( outlineParameters.thickness !== undefined ) material.uniforms.outlineThickness.value = outlineParameters.thickness;
+				if ( outlineParameters.color !== undefined ) material.uniforms.outlineColor.value.fromArray( outlineParameters.color );
+				if ( outlineParameters.alpha !== undefined ) material.uniforms.outlineAlpha.value = outlineParameters.alpha;
+
+			}
+
+			if ( originalMaterial.displacementMap ) {
+
+				material.uniforms.displacementMap.value = originalMaterial.displacementMap;
+				material.uniforms.displacementScale.value = originalMaterial.displacementScale;
+				material.uniforms.displacementBias.value = originalMaterial.displacementBias;
+
+			}
+
+		}
+
+		function updateOutlineMaterial( material, originalMaterial ) {
+
+			if ( material.name === 'invisible' ) return;
+
+			const outlineParameters = originalMaterial.userData.outlineParameters;
+
+			material.fog = originalMaterial.fog;
+			material.toneMapped = originalMaterial.toneMapped;
+			material.premultipliedAlpha = originalMaterial.premultipliedAlpha;
+			material.displacementMap = originalMaterial.displacementMap;
+
+			if ( outlineParameters !== undefined ) {
+
+				if ( originalMaterial.visible === false ) {
+
+					material.visible = false;
+
+				} else {
+
+					material.visible = ( outlineParameters.visible !== undefined ) ? outlineParameters.visible : true;
+
+				}
+
+				material.transparent = ( outlineParameters.alpha !== undefined && outlineParameters.alpha < 1.0 ) ? true : originalMaterial.transparent;
+
+				if ( outlineParameters.keepAlive !== undefined ) cache[ originalMaterial.uuid ].keepAlive = outlineParameters.keepAlive;
+
+			} else {
+
+				material.transparent = originalMaterial.transparent;
+				material.visible = originalMaterial.visible;
+
+			}
+
+			if ( originalMaterial.wireframe === true || originalMaterial.depthTest === false ) material.visible = false;
+
+			if ( originalMaterial.clippingPlanes ) {
+
+				material.clipping = true;
+
+				material.clippingPlanes = originalMaterial.clippingPlanes;
+				material.clipIntersection = originalMaterial.clipIntersection;
+				material.clipShadows = originalMaterial.clipShadows;
+
+			}
+
+			material.version = originalMaterial.version; // update outline material if necessary
+
+		}
+
+		function cleanupCache() {
+
+			let keys;
+
+			// clear originialMaterials
+			keys = Object.keys( originalMaterials );
+
+			for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+				originalMaterials[ keys[ i ] ] = undefined;
+
+			}
+
+			// clear originalOnBeforeRenders
+			keys = Object.keys( originalOnBeforeRenders );
+
+			for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+				originalOnBeforeRenders[ keys[ i ] ] = undefined;
+
+			}
+
+			// remove unused outlineMaterial from cache
+			keys = Object.keys( cache );
+
+			for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+				const key = keys[ i ];
+
+				if ( cache[ key ].used === false ) {
+
+					cache[ key ].count ++;
+
+					if ( cache[ key ].keepAlive === false && cache[ key ].count > removeThresholdCount ) {
+
+						delete cache[ key ];
+
+					}
+
+				} else {
+
+					cache[ key ].used = false;
+					cache[ key ].count = 0;
+
+				}
+
+			}
+
+		}
+
+		this.render = function ( scene, camera ) {
+
+			if ( this.enabled === false ) {
+
+				renderer.render( scene, camera );
+				return;
+
+			}
+
+			const currentAutoClear = renderer.autoClear;
+			renderer.autoClear = this.autoClear;
+
+			renderer.render( scene, camera );
+
+			renderer.autoClear = currentAutoClear;
+
+			this.renderOutline( scene, camera );
+
+		};
+
+		this.renderOutline = function ( scene, camera ) {
+
+			const currentAutoClear = renderer.autoClear;
+			const currentSceneAutoUpdate = scene.matrixWorldAutoUpdate;
+			const currentSceneBackground = scene.background;
+			const currentShadowMapEnabled = renderer.shadowMap.enabled;
+
+			scene.matrixWorldAutoUpdate = false;
+			scene.background = null;
+			renderer.autoClear = false;
+			renderer.shadowMap.enabled = false;
+
+			scene.traverse( setOutlineMaterial );
+
+			renderer.render( scene, camera );
+
+			scene.traverse( restoreOriginalMaterial );
+
+			cleanupCache();
+
+			scene.matrixWorldAutoUpdate = currentSceneAutoUpdate;
+			scene.background = currentSceneBackground;
+			renderer.autoClear = currentAutoClear;
+			renderer.shadowMap.enabled = currentShadowMapEnabled;
+
+		};
+
+		/*
+		 * See #9918
+		 *
+		 * The following property copies and wrapper methods enable
+		 * OutlineEffect to be called from other *Effect, like
+		 *
+		 * effect = new StereoEffect( new OutlineEffect( renderer ) );
+		 *
+		 * function render () {
+		 *
+	 	 * 	effect.render( scene, camera );
+		 *
+		 * }
+		 */
+		this.autoClear = renderer.autoClear;
+		this.domElement = renderer.domElement;
+		this.shadowMap = renderer.shadowMap;
+
+		this.clear = function ( color, depth, stencil ) {
+
+			renderer.clear( color, depth, stencil );
+
+		};
+
+		this.getPixelRatio = function () {
+
+			return renderer.getPixelRatio();
+
+		};
+
+		this.setPixelRatio = function ( value ) {
+
+			renderer.setPixelRatio( value );
+
+		};
+
+		this.getSize = function ( target ) {
+
+			return renderer.getSize( target );
+
+		};
+
+		this.setSize = function ( width, height, updateStyle ) {
+
+			renderer.setSize( width, height, updateStyle );
+
+		};
+
+		this.setViewport = function ( x, y, width, height ) {
+
+			renderer.setViewport( x, y, width, height );
+
+		};
+
+		this.setScissor = function ( x, y, width, height ) {
+
+			renderer.setScissor( x, y, width, height );
+
+		};
+
+		this.setScissorTest = function ( boolean ) {
+
+			renderer.setScissorTest( boolean );
+
+		};
+
+		this.setRenderTarget = function ( renderTarget ) {
+
+			renderer.setRenderTarget( renderTarget );
+
+		};
+
+	}
+
+}
+
+export { OutlineEffect };

src/examples/jsm/effects/ParallaxBarrierEffect.js

@@ -0,0 +1,119 @@
+import {
+	LinearFilter,
+	Mesh,
+	NearestFilter,
+	OrthographicCamera,
+	PlaneGeometry,
+	RGBAFormat,
+	Scene,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+
+class ParallaxBarrierEffect {
+
+	constructor( renderer ) {
+
+		const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
+		const _scene = new Scene();
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( 512, 512, _params );
+		const _renderTargetR = new WebGLRenderTarget( 512, 512, _params );
+
+		const _material = new ShaderMaterial( {
+
+			uniforms: {
+
+				'mapLeft': { value: _renderTargetL.texture },
+				'mapRight': { value: _renderTargetR.texture }
+
+			},
+
+			vertexShader: [
+
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vUv = vec2( uv.x, uv.y );',
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+				'}'
+
+			].join( '\n' ),
+
+			fragmentShader: [
+
+				'uniform sampler2D mapLeft;',
+				'uniform sampler2D mapRight;',
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vec2 uv = vUv;',
+
+				'	if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {',
+
+				'		gl_FragColor = texture2D( mapLeft, uv );',
+
+				'	} else {',
+
+				'		gl_FragColor = texture2D( mapRight, uv );',
+
+				'	}',
+
+				'	#include <tonemapping_fragment>',
+				'	#include <colorspace_fragment>',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
+		_scene.add( mesh );
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+			const pixelRatio = renderer.getPixelRatio();
+
+			_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
+			_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.setRenderTarget( _renderTargetL );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			renderer.render( _scene, _camera );
+
+		};
+
+	}
+
+}
+
+export { ParallaxBarrierEffect };

src/examples/jsm/effects/PeppersGhostEffect.js

@@ -0,0 +1,153 @@
+import {
+	PerspectiveCamera,
+	Quaternion,
+	Vector3
+} from 'three';
+
+/**
+ * peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS
+ */
+
+class PeppersGhostEffect {
+
+	constructor( renderer ) {
+
+		const scope = this;
+
+		scope.cameraDistance = 15;
+		scope.reflectFromAbove = false;
+
+		// Internals
+		let _halfWidth, _width, _height;
+
+		const _cameraF = new PerspectiveCamera(); //front
+		const _cameraB = new PerspectiveCamera(); //back
+		const _cameraL = new PerspectiveCamera(); //left
+		const _cameraR = new PerspectiveCamera(); //right
+
+		const _position = new Vector3();
+		const _quaternion = new Quaternion();
+		const _scale = new Vector3();
+
+		// Initialization
+		renderer.autoClear = false;
+
+		this.setSize = function ( width, height ) {
+
+			_halfWidth = width / 2;
+			if ( width < height ) {
+
+				_width = width / 3;
+				_height = width / 3;
+
+			} else {
+
+				_width = height / 3;
+				_height = height / 3;
+
+			}
+
+			renderer.setSize( width, height );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			camera.matrixWorld.decompose( _position, _quaternion, _scale );
+
+			// front
+			_cameraF.position.copy( _position );
+			_cameraF.quaternion.copy( _quaternion );
+			_cameraF.translateZ( scope.cameraDistance );
+			_cameraF.lookAt( scene.position );
+
+			// back
+			_cameraB.position.copy( _position );
+			_cameraB.quaternion.copy( _quaternion );
+			_cameraB.translateZ( - ( scope.cameraDistance ) );
+			_cameraB.lookAt( scene.position );
+			_cameraB.rotation.z += 180 * ( Math.PI / 180 );
+
+			// left
+			_cameraL.position.copy( _position );
+			_cameraL.quaternion.copy( _quaternion );
+			_cameraL.translateX( - ( scope.cameraDistance ) );
+			_cameraL.lookAt( scene.position );
+			_cameraL.rotation.x += 90 * ( Math.PI / 180 );
+
+			// right
+			_cameraR.position.copy( _position );
+			_cameraR.quaternion.copy( _quaternion );
+			_cameraR.translateX( scope.cameraDistance );
+			_cameraR.lookAt( scene.position );
+			_cameraR.rotation.x += 90 * ( Math.PI / 180 );
+
+
+			renderer.clear();
+			renderer.setScissorTest( true );
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraB );
+
+			} else {
+
+				renderer.render( scene, _cameraF );
+
+			}
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ), 0, _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ), 0, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraF );
+
+			} else {
+
+				renderer.render( scene, _cameraB );
+
+			}
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraR );
+
+			} else {
+
+				renderer.render( scene, _cameraL );
+
+			}
+
+			renderer.setScissor( _halfWidth + ( _width / 2 ), _height, _width, _height );
+			renderer.setViewport( _halfWidth + ( _width / 2 ), _height, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraL );
+
+			} else {
+
+				renderer.render( scene, _cameraR );
+
+			}
+
+			renderer.setScissorTest( false );
+
+		};
+
+	}
+
+}
+
+export { PeppersGhostEffect };

src/examples/jsm/effects/StereoEffect.js

@@ -0,0 +1,55 @@
+import {
+	StereoCamera,
+	Vector2
+} from 'three';
+
+class StereoEffect {
+
+	constructor( renderer ) {
+
+		const _stereo = new StereoCamera();
+		_stereo.aspect = 0.5;
+		const size = new Vector2();
+
+		this.setEyeSeparation = function ( eyeSep ) {
+
+			_stereo.eyeSep = eyeSep;
+
+		};
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.getSize( size );
+
+			if ( renderer.autoClear ) renderer.clear();
+			renderer.setScissorTest( true );
+
+			renderer.setScissor( 0, 0, size.width / 2, size.height );
+			renderer.setViewport( 0, 0, size.width / 2, size.height );
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
+			renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setScissorTest( false );
+
+		};
+
+	}
+
+}
+
+export { StereoEffect };

src/examples/jsm/environments/DebugEnvironment.js

@@ -0,0 +1,52 @@
+import {
+	BackSide,
+	BoxGeometry,
+	Mesh,
+	MeshLambertMaterial,
+	MeshStandardMaterial,
+	PointLight,
+	Scene,
+} from 'three';
+
+class DebugEnvironment extends Scene {
+
+	constructor() {
+
+		super();
+
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+		const roomMaterial = new MeshStandardMaterial( { metalness: 0, side: BackSide } );
+		const room = new Mesh( geometry, roomMaterial );
+		room.scale.setScalar( 10 );
+		this.add( room );
+
+		const mainLight = new PointLight( 0xffffff, 50, 0, 2 );
+		this.add( mainLight );
+
+		const material1 = new MeshLambertMaterial( { color: 0xff0000, emissive: 0xffffff, emissiveIntensity: 10 } );
+
+		const light1 = new Mesh( geometry, material1 );
+		light1.position.set( - 5, 2, 0 );
+		light1.scale.set( 0.1, 1, 1 );
+		this.add( light1 );
+
+		const material2 = new MeshLambertMaterial( { color: 0x00ff00, emissive: 0xffffff, emissiveIntensity: 10 } );
+
+		const light2 = new Mesh( geometry, material2 );
+		light2.position.set( 0, 5, 0 );
+		light2.scale.set( 1, 0.1, 1 );
+		this.add( light2 );
+
+		const material3 = new MeshLambertMaterial( { color: 0x0000ff, emissive: 0xffffff, emissiveIntensity: 10 } );
+
+		const light3 = new Mesh( geometry, material3 );
+		light3.position.set( 2, 1, 5 );
+		light3.scale.set( 1.5, 2, 0.1 );
+		this.add( light3 );
+
+	}
+
+}
+
+export { DebugEnvironment };

src/examples/jsm/environments/RoomEnvironment.js

@@ -0,0 +1,148 @@
+/**
+ * https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts
+ */
+
+import {
+ 	BackSide,
+ 	BoxGeometry,
+ 	Mesh,
+	MeshBasicMaterial,
+ 	MeshStandardMaterial,
+ 	PointLight,
+ 	Scene,
+} from 'three';
+
+class RoomEnvironment extends Scene {
+
+	constructor( renderer = null ) {
+
+		super();
+
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+
+		const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
+		const boxMaterial = new MeshStandardMaterial();
+
+		let intensity = 5;
+
+		if ( renderer !== null && renderer._useLegacyLights === false ) intensity = 900;
+
+		const mainLight = new PointLight( 0xffffff, intensity, 28, 2 );
+		mainLight.position.set( 0.418, 16.199, 0.300 );
+		this.add( mainLight );
+
+		const room = new Mesh( geometry, roomMaterial );
+		room.position.set( - 0.757, 13.219, 0.717 );
+		room.scale.set( 31.713, 28.305, 28.591 );
+		this.add( room );
+
+		const box1 = new Mesh( geometry, boxMaterial );
+		box1.position.set( - 10.906, 2.009, 1.846 );
+		box1.rotation.set( 0, - 0.195, 0 );
+		box1.scale.set( 2.328, 7.905, 4.651 );
+		this.add( box1 );
+
+		const box2 = new Mesh( geometry, boxMaterial );
+		box2.position.set( - 5.607, - 0.754, - 0.758 );
+		box2.rotation.set( 0, 0.994, 0 );
+		box2.scale.set( 1.970, 1.534, 3.955 );
+		this.add( box2 );
+
+		const box3 = new Mesh( geometry, boxMaterial );
+		box3.position.set( 6.167, 0.857, 7.803 );
+		box3.rotation.set( 0, 0.561, 0 );
+		box3.scale.set( 3.927, 6.285, 3.687 );
+		this.add( box3 );
+
+		const box4 = new Mesh( geometry, boxMaterial );
+		box4.position.set( - 2.017, 0.018, 6.124 );
+		box4.rotation.set( 0, 0.333, 0 );
+		box4.scale.set( 2.002, 4.566, 2.064 );
+		this.add( box4 );
+
+		const box5 = new Mesh( geometry, boxMaterial );
+		box5.position.set( 2.291, - 0.756, - 2.621 );
+		box5.rotation.set( 0, - 0.286, 0 );
+		box5.scale.set( 1.546, 1.552, 1.496 );
+		this.add( box5 );
+
+		const box6 = new Mesh( geometry, boxMaterial );
+		box6.position.set( - 2.193, - 0.369, - 5.547 );
+		box6.rotation.set( 0, 0.516, 0 );
+		box6.scale.set( 3.875, 3.487, 2.986 );
+		this.add( box6 );
+
+
+		// -x right
+		const light1 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light1.position.set( - 16.116, 14.37, 8.208 );
+		light1.scale.set( 0.1, 2.428, 2.739 );
+		this.add( light1 );
+
+		// -x left
+		const light2 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light2.position.set( - 16.109, 18.021, - 8.207 );
+		light2.scale.set( 0.1, 2.425, 2.751 );
+		this.add( light2 );
+
+		// +x
+		const light3 = new Mesh( geometry, createAreaLightMaterial( 17 ) );
+		light3.position.set( 14.904, 12.198, - 1.832 );
+		light3.scale.set( 0.15, 4.265, 6.331 );
+		this.add( light3 );
+
+		// +z
+		const light4 = new Mesh( geometry, createAreaLightMaterial( 43 ) );
+		light4.position.set( - 0.462, 8.89, 14.520 );
+		light4.scale.set( 4.38, 5.441, 0.088 );
+		this.add( light4 );
+
+		// -z
+		const light5 = new Mesh( geometry, createAreaLightMaterial( 20 ) );
+		light5.position.set( 3.235, 11.486, - 12.541 );
+		light5.scale.set( 2.5, 2.0, 0.1 );
+		this.add( light5 );
+
+		// +y
+		const light6 = new Mesh( geometry, createAreaLightMaterial( 100 ) );
+		light6.position.set( 0.0, 20.0, 0.0 );
+		light6.scale.set( 1.0, 0.1, 1.0 );
+		this.add( light6 );
+
+	}
+
+	dispose() {
+
+		const resources = new Set();
+
+		this.traverse( ( object ) => {
+
+			if ( object.isMesh ) {
+
+				resources.add( object.geometry );
+				resources.add( object.material );
+
+			}
+
+		} );
+
+		for ( const resource of resources ) {
+
+			resource.dispose();
+
+		}
+
+	}
+
+}
+
+function createAreaLightMaterial( intensity ) {
+
+	const material = new MeshBasicMaterial();
+	material.color.setScalar( intensity );
+	return material;
+
+}
+
+export { RoomEnvironment };

src/examples/jsm/exporters/DRACOExporter.js

@@ -0,0 +1,267 @@
+import { Color } from 'three';
+
+/**
+ * Export draco compressed files from threejs geometry objects.
+ *
+ * Draco files are compressed and usually are smaller than conventional 3D file formats.
+ *
+ * The exporter receives a options object containing
+ *  - decodeSpeed, indicates how to tune the encoder regarding decode speed (0 gives better speed but worst quality)
+ *  - encodeSpeed, indicates how to tune the encoder parameters (0 gives better speed but worst quality)
+ *  - encoderMethod
+ *  - quantization, indicates the presision of each type of data stored in the draco file in the order (POSITION, NORMAL, COLOR, TEX_COORD, GENERIC)
+ *  - exportUvs
+ *  - exportNormals
+ *  - exportColor
+ */
+
+/* global DracoEncoderModule */
+
+class DRACOExporter {
+
+	parse( object, options = {} ) {
+
+		options = Object.assign( {
+			decodeSpeed: 5,
+			encodeSpeed: 5,
+			encoderMethod: DRACOExporter.MESH_EDGEBREAKER_ENCODING,
+			quantization: [ 16, 8, 8, 8, 8 ],
+			exportUvs: true,
+			exportNormals: true,
+			exportColor: false,
+		}, options );
+
+		if ( DracoEncoderModule === undefined ) {
+
+			throw new Error( 'THREE.DRACOExporter: required the draco_encoder to work.' );
+
+		}
+
+		const geometry = object.geometry;
+
+		const dracoEncoder = DracoEncoderModule();
+		const encoder = new dracoEncoder.Encoder();
+		let builder;
+		let dracoObject;
+
+		if ( object.isMesh === true ) {
+
+			builder = new dracoEncoder.MeshBuilder();
+			dracoObject = new dracoEncoder.Mesh();
+
+			const vertices = geometry.getAttribute( 'position' );
+			builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.POSITION, vertices.count, vertices.itemSize, vertices.array );
+
+			const faces = geometry.getIndex();
+
+			if ( faces !== null ) {
+
+				builder.AddFacesToMesh( dracoObject, faces.count / 3, faces.array );
+
+			} else {
+
+				const faces = new ( vertices.count > 65535 ? Uint32Array : Uint16Array )( vertices.count );
+
+				for ( let i = 0; i < faces.length; i ++ ) {
+
+					faces[ i ] = i;
+
+				}
+
+				builder.AddFacesToMesh( dracoObject, vertices.count, faces );
+
+			}
+
+			if ( options.exportNormals === true ) {
+
+				const normals = geometry.getAttribute( 'normal' );
+
+				if ( normals !== undefined ) {
+
+					builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.NORMAL, normals.count, normals.itemSize, normals.array );
+
+				}
+
+			}
+
+			if ( options.exportUvs === true ) {
+
+				const uvs = geometry.getAttribute( 'uv' );
+
+				if ( uvs !== undefined ) {
+
+					builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.TEX_COORD, uvs.count, uvs.itemSize, uvs.array );
+
+				}
+
+			}
+
+			if ( options.exportColor === true ) {
+
+				const colors = geometry.getAttribute( 'color' );
+
+				if ( colors !== undefined ) {
+
+					const array = createVertexColorSRGBArray( colors );
+
+					builder.AddFloatAttributeToMesh( dracoObject, dracoEncoder.COLOR, colors.count, colors.itemSize, array );
+
+				}
+
+			}
+
+		} else if ( object.isPoints === true ) {
+
+			builder = new dracoEncoder.PointCloudBuilder();
+			dracoObject = new dracoEncoder.PointCloud();
+
+			const vertices = geometry.getAttribute( 'position' );
+			builder.AddFloatAttribute( dracoObject, dracoEncoder.POSITION, vertices.count, vertices.itemSize, vertices.array );
+
+			if ( options.exportColor === true ) {
+
+				const colors = geometry.getAttribute( 'color' );
+
+				if ( colors !== undefined ) {
+
+					const array = createVertexColorSRGBArray( colors );
+
+					builder.AddFloatAttribute( dracoObject, dracoEncoder.COLOR, colors.count, colors.itemSize, array );
+
+				}
+
+			}
+
+		} else {
+
+			throw new Error( 'DRACOExporter: Unsupported object type.' );
+
+		}
+
+		//Compress using draco encoder
+
+		const encodedData = new dracoEncoder.DracoInt8Array();
+
+		//Sets the desired encoding and decoding speed for the given options from 0 (slowest speed, but the best compression) to 10 (fastest, but the worst compression).
+
+		const encodeSpeed = ( options.encodeSpeed !== undefined ) ? options.encodeSpeed : 5;
+		const decodeSpeed = ( options.decodeSpeed !== undefined ) ? options.decodeSpeed : 5;
+
+		encoder.SetSpeedOptions( encodeSpeed, decodeSpeed );
+
+		// Sets the desired encoding method for a given geometry.
+
+		if ( options.encoderMethod !== undefined ) {
+
+			encoder.SetEncodingMethod( options.encoderMethod );
+
+		}
+
+		// Sets the quantization (number of bits used to represent) compression options for a named attribute.
+		// The attribute values will be quantized in a box defined by the maximum extent of the attribute values.
+		if ( options.quantization !== undefined ) {
+
+			for ( let i = 0; i < 5; i ++ ) {
+
+				if ( options.quantization[ i ] !== undefined ) {
+
+					encoder.SetAttributeQuantization( i, options.quantization[ i ] );
+
+				}
+
+			}
+
+		}
+
+		let length;
+
+		if ( object.isMesh === true ) {
+
+			length = encoder.EncodeMeshToDracoBuffer( dracoObject, encodedData );
+
+		} else {
+
+			length = encoder.EncodePointCloudToDracoBuffer( dracoObject, true, encodedData );
+
+		}
+
+		dracoEncoder.destroy( dracoObject );
+
+		if ( length === 0 ) {
+
+			throw new Error( 'THREE.DRACOExporter: Draco encoding failed.' );
+
+		}
+
+		//Copy encoded data to buffer.
+		const outputData = new Int8Array( new ArrayBuffer( length ) );
+
+		for ( let i = 0; i < length; i ++ ) {
+
+			outputData[ i ] = encodedData.GetValue( i );
+
+		}
+
+		dracoEncoder.destroy( encodedData );
+		dracoEncoder.destroy( encoder );
+		dracoEncoder.destroy( builder );
+
+		return outputData;
+
+	}
+
+}
+
+function createVertexColorSRGBArray( attribute ) {
+
+	// While .drc files do not specify colorspace, the only 'official' tooling
+	// is PLY and OBJ converters, which use sRGB. We'll assume sRGB is expected
+	// for .drc files, but note that Draco buffers embedded in glTF files will
+	// be Linear-sRGB instead.
+
+	const _color = new Color();
+
+	const count = attribute.count;
+	const itemSize = attribute.itemSize;
+	const array = new Float32Array( count * itemSize );
+
+	for ( let i = 0, il = count; i < il; i ++ ) {
+
+		_color.fromBufferAttribute( attribute, i ).convertLinearToSRGB();
+
+		array[ i * itemSize ] = _color.r;
+		array[ i * itemSize + 1 ] = _color.g;
+		array[ i * itemSize + 2 ] = _color.b;
+
+		if ( itemSize === 4 ) {
+
+			array[ i * itemSize + 3 ] = attribute.getW( i );
+
+		}
+
+	}
+
+	return array;
+
+}
+
+// Encoder methods
+
+DRACOExporter.MESH_EDGEBREAKER_ENCODING = 1;
+DRACOExporter.MESH_SEQUENTIAL_ENCODING = 0;
+
+// Geometry type
+
+DRACOExporter.POINT_CLOUD = 0;
+DRACOExporter.TRIANGULAR_MESH = 1;
+
+// Attribute type
+
+DRACOExporter.INVALID = - 1;
+DRACOExporter.POSITION = 0;
+DRACOExporter.NORMAL = 1;
+DRACOExporter.COLOR = 2;
+DRACOExporter.TEX_COORD = 3;
+DRACOExporter.GENERIC = 4;
+
+export { DRACOExporter };

src/examples/jsm/exporters/EXRExporter.js

@@ -0,0 +1,579 @@
+/**
+ * @author sciecode / https://github.com/sciecode
+ *
+ * EXR format references:
+ * 	https://www.openexr.com/documentation/openexrfilelayout.pdf
+ */
+
+import {
+	FloatType,
+	HalfFloatType,
+	RGBAFormat,
+	DataUtils,
+} from 'three';
+import * as fflate from '../libs/fflate.module.js';
+
+const textEncoder = new TextEncoder();
+
+const NO_COMPRESSION = 0;
+const ZIPS_COMPRESSION = 2;
+const ZIP_COMPRESSION = 3;
+
+class EXRExporter {
+
+	parse( arg1, arg2, arg3 ) {
+
+		if ( ! arg1 || ! ( arg1.isWebGLRenderer || arg1.isDataTexture ) ) {
+
+			throw Error( 'EXRExporter.parse: Unsupported first parameter, expected instance of WebGLRenderer or DataTexture.' );
+
+		} else if ( arg1.isWebGLRenderer ) {
+
+			const renderer = arg1, renderTarget = arg2, options = arg3;
+
+			supportedRTT( renderTarget );
+
+			const info = buildInfoRTT( renderTarget, options ),
+				dataBuffer = getPixelData( renderer, renderTarget, info ),
+				rawContentBuffer = reorganizeDataBuffer( dataBuffer, info ),
+				chunks = compressData( rawContentBuffer, info );
+
+			return fillData( chunks, info );
+
+		} else if ( arg1.isDataTexture ) {
+
+			const texture = arg1, options = arg2;
+
+			supportedDT( texture );
+
+			const info = buildInfoDT( texture, options ),
+				dataBuffer = texture.image.data,
+				rawContentBuffer = reorganizeDataBuffer( dataBuffer, info ),
+				chunks = compressData( rawContentBuffer, info );
+
+			return fillData( chunks, info );
+
+		}
+
+	}
+
+}
+
+function supportedRTT( renderTarget ) {
+
+	if ( ! renderTarget || ! renderTarget.isWebGLRenderTarget ) {
+
+		throw Error( 'EXRExporter.parse: Unsupported second parameter, expected instance of WebGLRenderTarget.' );
+
+	}
+
+	if ( renderTarget.isWebGLCubeRenderTarget || renderTarget.isWebGL3DRenderTarget || renderTarget.isWebGLArrayRenderTarget ) {
+
+		throw Error( 'EXRExporter.parse: Unsupported render target type, expected instance of WebGLRenderTarget.' );
+
+	}
+
+	if ( renderTarget.texture.type !== FloatType && renderTarget.texture.type !== HalfFloatType ) {
+
+		throw Error( 'EXRExporter.parse: Unsupported WebGLRenderTarget texture type.' );
+
+	}
+
+	if ( renderTarget.texture.format !== RGBAFormat ) {
+
+		throw Error( 'EXRExporter.parse: Unsupported WebGLRenderTarget texture format, expected RGBAFormat.' );
+
+	}
+
+}
+
+function supportedDT( texture ) {
+
+	if ( texture.type !== FloatType && texture.type !== HalfFloatType ) {
+
+		throw Error( 'EXRExporter.parse: Unsupported DataTexture texture type.' );
+
+	}
+
+	if ( texture.format !== RGBAFormat ) {
+
+		throw Error( 'EXRExporter.parse: Unsupported DataTexture texture format, expected RGBAFormat.' );
+
+	}
+
+	if ( ! texture.image.data ) {
+
+		throw Error( 'EXRExporter.parse: Invalid DataTexture image data.' );
+
+	}
+
+	if ( texture.type === FloatType && texture.image.data.constructor.name !== 'Float32Array' ) {
+
+		throw Error( 'EXRExporter.parse: DataTexture image data doesn\'t match type, expected \'Float32Array\'.' );
+
+	}
+
+	if ( texture.type === HalfFloatType && texture.image.data.constructor.name !== 'Uint16Array' ) {
+
+		throw Error( 'EXRExporter.parse: DataTexture image data doesn\'t match type, expected \'Uint16Array\'.' );
+
+	}
+
+}
+
+function buildInfoRTT( renderTarget, options = {} ) {
+
+	const compressionSizes = {
+		0: 1,
+		2: 1,
+		3: 16
+	};
+
+	const WIDTH = renderTarget.width,
+		HEIGHT = renderTarget.height,
+		TYPE = renderTarget.texture.type,
+		FORMAT = renderTarget.texture.format,
+		COMPRESSION = ( options.compression !== undefined ) ? options.compression : ZIP_COMPRESSION,
+		EXPORTER_TYPE = ( options.type !== undefined ) ? options.type : HalfFloatType,
+		OUT_TYPE = ( EXPORTER_TYPE === FloatType ) ? 2 : 1,
+		COMPRESSION_SIZE = compressionSizes[ COMPRESSION ],
+		NUM_CHANNELS = 4;
+
+	return {
+		width: WIDTH,
+		height: HEIGHT,
+		type: TYPE,
+		format: FORMAT,
+		compression: COMPRESSION,
+		blockLines: COMPRESSION_SIZE,
+		dataType: OUT_TYPE,
+		dataSize: 2 * OUT_TYPE,
+		numBlocks: Math.ceil( HEIGHT / COMPRESSION_SIZE ),
+		numInputChannels: 4,
+		numOutputChannels: NUM_CHANNELS,
+	};
+
+}
+
+function buildInfoDT( texture, options = {} ) {
+
+	const compressionSizes = {
+		0: 1,
+		2: 1,
+		3: 16
+	};
+
+	const WIDTH = texture.image.width,
+		HEIGHT = texture.image.height,
+		TYPE = texture.type,
+		FORMAT = texture.format,
+		COMPRESSION = ( options.compression !== undefined ) ? options.compression : ZIP_COMPRESSION,
+		EXPORTER_TYPE = ( options.type !== undefined ) ? options.type : HalfFloatType,
+		OUT_TYPE = ( EXPORTER_TYPE === FloatType ) ? 2 : 1,
+		COMPRESSION_SIZE = compressionSizes[ COMPRESSION ],
+		NUM_CHANNELS = 4;
+
+	return {
+		width: WIDTH,
+		height: HEIGHT,
+		type: TYPE,
+		format: FORMAT,
+		compression: COMPRESSION,
+		blockLines: COMPRESSION_SIZE,
+		dataType: OUT_TYPE,
+		dataSize: 2 * OUT_TYPE,
+		numBlocks: Math.ceil( HEIGHT / COMPRESSION_SIZE ),
+		numInputChannels: 4,
+		numOutputChannels: NUM_CHANNELS,
+	};
+
+}
+
+function getPixelData( renderer, rtt, info ) {
+
+	let dataBuffer;
+
+	if ( info.type === FloatType ) {
+
+		dataBuffer = new Float32Array( info.width * info.height * info.numInputChannels );
+
+	} else {
+
+		dataBuffer = new Uint16Array( info.width * info.height * info.numInputChannels );
+
+	}
+
+	renderer.readRenderTargetPixels( rtt, 0, 0, info.width, info.height, dataBuffer );
+
+	return dataBuffer;
+
+}
+
+function reorganizeDataBuffer( inBuffer, info ) {
+
+	const w = info.width,
+		h = info.height,
+		dec = { r: 0, g: 0, b: 0, a: 0 },
+		offset = { value: 0 },
+		cOffset = ( info.numOutputChannels == 4 ) ? 1 : 0,
+		getValue = ( info.type == FloatType ) ? getFloat32 : getFloat16,
+		setValue = ( info.dataType == 1 ) ? setFloat16 : setFloat32,
+		outBuffer = new Uint8Array( info.width * info.height * info.numOutputChannels * info.dataSize ),
+		dv = new DataView( outBuffer.buffer );
+
+	for ( let y = 0; y < h; ++ y ) {
+
+		for ( let x = 0; x < w; ++ x ) {
+
+			const i = y * w * 4 + x * 4;
+
+			const r = getValue( inBuffer, i );
+			const g = getValue( inBuffer, i + 1 );
+			const b = getValue( inBuffer, i + 2 );
+			const a = getValue( inBuffer, i + 3 );
+
+			const line = ( h - y - 1 ) * w * ( 3 + cOffset ) * info.dataSize;
+
+			decodeLinear( dec, r, g, b, a );
+
+			offset.value = line + x * info.dataSize;
+			setValue( dv, dec.a, offset );
+
+			offset.value = line + ( cOffset ) * w * info.dataSize + x * info.dataSize;
+			setValue( dv, dec.b, offset );
+
+			offset.value = line + ( 1 + cOffset ) * w * info.dataSize + x * info.dataSize;
+			setValue( dv, dec.g, offset );
+
+			offset.value = line + ( 2 + cOffset ) * w * info.dataSize + x * info.dataSize;
+			setValue( dv, dec.r, offset );
+
+		}
+
+	}
+
+	return outBuffer;
+
+}
+
+function compressData( inBuffer, info ) {
+
+	let compress,
+		tmpBuffer,
+		sum = 0;
+
+	const chunks = { data: new Array(), totalSize: 0 },
+		size = info.width * info.numOutputChannels * info.blockLines * info.dataSize;
+
+	switch ( info.compression ) {
+
+		case 0:
+			compress = compressNONE;
+			break;
+
+		case 2:
+		case 3:
+			compress = compressZIP;
+			break;
+
+	}
+
+	if ( info.compression !== 0 ) {
+
+		tmpBuffer = new Uint8Array( size );
+
+	}
+
+	for ( let i = 0; i < info.numBlocks; ++ i ) {
+
+		const arr = inBuffer.subarray( size * i, size * ( i + 1 ) );
+
+		const block = compress( arr, tmpBuffer );
+
+		sum += block.length;
+
+		chunks.data.push( { dataChunk: block, size: block.length } );
+
+	}
+
+	chunks.totalSize = sum;
+
+	return chunks;
+
+}
+
+function compressNONE( data ) {
+
+	return data;
+
+}
+
+function compressZIP( data, tmpBuffer ) {
+
+	//
+	// Reorder the pixel data.
+	//
+
+	let t1 = 0,
+		t2 = Math.floor( ( data.length + 1 ) / 2 ),
+		s = 0;
+
+	const stop = data.length - 1;
+
+	while ( true ) {
+
+		if ( s > stop ) break;
+		tmpBuffer[ t1 ++ ] = data[ s ++ ];
+
+		if ( s > stop ) break;
+		tmpBuffer[ t2 ++ ] = data[ s ++ ];
+
+	}
+
+	//
+	// Predictor.
+	//
+
+	let p = tmpBuffer[ 0 ];
+
+	for ( let t = 1; t < tmpBuffer.length; t ++ ) {
+
+		const d = tmpBuffer[ t ] - p + ( 128 + 256 );
+		p = tmpBuffer[ t ];
+		tmpBuffer[ t ] = d;
+
+	}
+
+	const deflate = fflate.zlibSync( tmpBuffer );
+
+	return deflate;
+
+}
+
+function fillHeader( outBuffer, chunks, info ) {
+
+	const offset = { value: 0 };
+	const dv = new DataView( outBuffer.buffer );
+
+	setUint32( dv, 20000630, offset ); // magic
+	setUint32( dv, 2, offset ); // mask
+
+	// = HEADER =
+
+	setString( dv, 'compression', offset );
+	setString( dv, 'compression', offset );
+	setUint32( dv, 1, offset );
+	setUint8( dv, info.compression, offset );
+
+	setString( dv, 'screenWindowCenter', offset );
+	setString( dv, 'v2f', offset );
+	setUint32( dv, 8, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, 0, offset );
+
+	setString( dv, 'screenWindowWidth', offset );
+	setString( dv, 'float', offset );
+	setUint32( dv, 4, offset );
+	setFloat32( dv, 1.0, offset );
+
+	setString( dv, 'pixelAspectRatio', offset );
+	setString( dv, 'float', offset );
+	setUint32( dv, 4, offset );
+	setFloat32( dv, 1.0, offset );
+
+	setString( dv, 'lineOrder', offset );
+	setString( dv, 'lineOrder', offset );
+	setUint32( dv, 1, offset );
+	setUint8( dv, 0, offset );
+
+	setString( dv, 'dataWindow', offset );
+	setString( dv, 'box2i', offset );
+	setUint32( dv, 16, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, info.width - 1, offset );
+	setUint32( dv, info.height - 1, offset );
+
+	setString( dv, 'displayWindow', offset );
+	setString( dv, 'box2i', offset );
+	setUint32( dv, 16, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, 0, offset );
+	setUint32( dv, info.width - 1, offset );
+	setUint32( dv, info.height - 1, offset );
+
+	setString( dv, 'channels', offset );
+	setString( dv, 'chlist', offset );
+	setUint32( dv, info.numOutputChannels * 18 + 1, offset );
+
+	setString( dv, 'A', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setString( dv, 'B', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setString( dv, 'G', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setString( dv, 'R', offset );
+	setUint32( dv, info.dataType, offset );
+	offset.value += 4;
+	setUint32( dv, 1, offset );
+	setUint32( dv, 1, offset );
+
+	setUint8( dv, 0, offset );
+
+	// null-byte
+	setUint8( dv, 0, offset );
+
+	// = OFFSET TABLE =
+
+	let sum = offset.value + info.numBlocks * 8;
+
+	for ( let i = 0; i < chunks.data.length; ++ i ) {
+
+		setUint64( dv, sum, offset );
+
+		sum += chunks.data[ i ].size + 8;
+
+	}
+
+}
+
+function fillData( chunks, info ) {
+
+	const TableSize = info.numBlocks * 8,
+		HeaderSize = 259 + ( 18 * info.numOutputChannels ), // 259 + 18 * chlist
+		offset = { value: HeaderSize + TableSize },
+		outBuffer = new Uint8Array( HeaderSize + TableSize + chunks.totalSize + info.numBlocks * 8 ),
+		dv = new DataView( outBuffer.buffer );
+
+	fillHeader( outBuffer, chunks, info );
+
+	for ( let i = 0; i < chunks.data.length; ++ i ) {
+
+		const data = chunks.data[ i ].dataChunk;
+		const size = chunks.data[ i ].size;
+
+		setUint32( dv, i * info.blockLines, offset );
+		setUint32( dv, size, offset );
+
+		outBuffer.set( data, offset.value );
+		offset.value += size;
+
+	}
+
+	return outBuffer;
+
+}
+
+function decodeLinear( dec, r, g, b, a ) {
+
+	dec.r = r;
+	dec.g = g;
+	dec.b = b;
+	dec.a = a;
+
+}
+
+// function decodeSRGB( dec, r, g, b, a ) {
+
+// 	dec.r = r > 0.04045 ? Math.pow( r * 0.9478672986 + 0.0521327014, 2.4 ) : r * 0.0773993808;
+// 	dec.g = g > 0.04045 ? Math.pow( g * 0.9478672986 + 0.0521327014, 2.4 ) : g * 0.0773993808;
+// 	dec.b = b > 0.04045 ? Math.pow( b * 0.9478672986 + 0.0521327014, 2.4 ) : b * 0.0773993808;
+// 	dec.a = a;
+
+// }
+
+
+function setUint8( dv, value, offset ) {
+
+	dv.setUint8( offset.value, value );
+
+	offset.value += 1;
+
+}
+
+function setUint32( dv, value, offset ) {
+
+	dv.setUint32( offset.value, value, true );
+
+	offset.value += 4;
+
+}
+
+function setFloat16( dv, value, offset ) {
+
+	dv.setUint16( offset.value, DataUtils.toHalfFloat( value ), true );
+
+	offset.value += 2;
+
+}
+
+function setFloat32( dv, value, offset ) {
+
+	dv.setFloat32( offset.value, value, true );
+
+	offset.value += 4;
+
+}
+
+function setUint64( dv, value, offset ) {
+
+	dv.setBigUint64( offset.value, BigInt( value ), true );
+
+	offset.value += 8;
+
+}
+
+function setString( dv, string, offset ) {
+
+	const tmp = textEncoder.encode( string + '\0' );
+
+	for ( let i = 0; i < tmp.length; ++ i ) {
+
+		setUint8( dv, tmp[ i ], offset );
+
+	}
+
+}
+
+function decodeFloat16( binary ) {
+
+	const exponent = ( binary & 0x7C00 ) >> 10,
+		fraction = binary & 0x03FF;
+
+	return ( binary >> 15 ? - 1 : 1 ) * (
+		exponent ?
+			(
+				exponent === 0x1F ?
+					fraction ? NaN : Infinity :
+					Math.pow( 2, exponent - 15 ) * ( 1 + fraction / 0x400 )
+			) :
+			6.103515625e-5 * ( fraction / 0x400 )
+	);
+
+}
+
+function getFloat16( arr, i ) {
+
+	return decodeFloat16( arr[ i ] );
+
+}
+
+function getFloat32( arr, i ) {
+
+	return arr[ i ];
+
+}
+
+export { EXRExporter, NO_COMPRESSION, ZIP_COMPRESSION, ZIPS_COMPRESSION };

src/examples/jsm/exporters/KTX2Exporter.js

@@ -0,0 +1,292 @@
+import {
+	FloatType,
+	HalfFloatType,
+	UnsignedByteType,
+	RGBAFormat,
+	RGFormat,
+	RGIntegerFormat,
+	RedFormat,
+	RedIntegerFormat,
+	NoColorSpace,
+	LinearSRGBColorSpace,
+	SRGBColorSpace,
+	DataTexture,
+	REVISION,
+} from 'three';
+
+import {
+	write,
+	KTX2Container,
+	KHR_DF_CHANNEL_RGBSDA_ALPHA,
+	KHR_DF_CHANNEL_RGBSDA_BLUE,
+	KHR_DF_CHANNEL_RGBSDA_GREEN,
+	KHR_DF_CHANNEL_RGBSDA_RED,
+	KHR_DF_MODEL_RGBSDA,
+	KHR_DF_PRIMARIES_BT709,
+	KHR_DF_PRIMARIES_UNSPECIFIED,
+	KHR_DF_SAMPLE_DATATYPE_FLOAT,
+	KHR_DF_SAMPLE_DATATYPE_LINEAR,
+	KHR_DF_SAMPLE_DATATYPE_SIGNED,
+	KHR_DF_TRANSFER_LINEAR,
+	KHR_DF_TRANSFER_SRGB,
+	VK_FORMAT_R16_SFLOAT,
+	VK_FORMAT_R16G16_SFLOAT,
+	VK_FORMAT_R16G16B16A16_SFLOAT,
+	VK_FORMAT_R32_SFLOAT,
+	VK_FORMAT_R32G32_SFLOAT,
+	VK_FORMAT_R32G32B32A32_SFLOAT,
+	VK_FORMAT_R8_SRGB,
+	VK_FORMAT_R8_UNORM,
+	VK_FORMAT_R8G8_SRGB,
+	VK_FORMAT_R8G8_UNORM,
+	VK_FORMAT_R8G8B8A8_SRGB,
+	VK_FORMAT_R8G8B8A8_UNORM,
+} from '../libs/ktx-parse.module.js';
+
+const VK_FORMAT_MAP = {
+
+	[ RGBAFormat ]: {
+		[ FloatType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R32G32B32A32_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R32G32B32A32_SFLOAT,
+		},
+		[ HalfFloatType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R16G16B16A16_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R16G16B16A16_SFLOAT,
+		},
+		[ UnsignedByteType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R8G8B8A8_UNORM,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R8G8B8A8_UNORM,
+			[ SRGBColorSpace ]: VK_FORMAT_R8G8B8A8_SRGB,
+		},
+	},
+
+	[ RGFormat ]: {
+		[ FloatType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R32G32_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R32G32_SFLOAT,
+		},
+		[ HalfFloatType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R16G16_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R16G16_SFLOAT,
+		},
+		[ UnsignedByteType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R8G8_UNORM,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R8G8_UNORM,
+			[ SRGBColorSpace ]: VK_FORMAT_R8G8_SRGB,
+		},
+	},
+
+	[ RedFormat ]: {
+		[ FloatType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R32_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R32_SFLOAT,
+		},
+		[ HalfFloatType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R16_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R16_SFLOAT,
+		},
+		[ UnsignedByteType ]: {
+			[ NoColorSpace ]: VK_FORMAT_R8_UNORM,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R8_UNORM,
+			[ SRGBColorSpace ]: VK_FORMAT_R8_SRGB,
+		},
+	},
+
+};
+
+const KHR_DF_CHANNEL_MAP = {
+
+	0: KHR_DF_CHANNEL_RGBSDA_RED,
+	1: KHR_DF_CHANNEL_RGBSDA_GREEN,
+	2: KHR_DF_CHANNEL_RGBSDA_BLUE,
+	3: KHR_DF_CHANNEL_RGBSDA_ALPHA,
+
+};
+
+const ERROR_INPUT = 'THREE.KTX2Exporter: Supported inputs are DataTexture, Data3DTexture, or WebGLRenderer and WebGLRenderTarget.';
+const ERROR_FORMAT = 'THREE.KTX2Exporter: Supported formats are RGBAFormat, RGFormat, or RedFormat.';
+const ERROR_TYPE = 'THREE.KTX2Exporter: Supported types are FloatType, HalfFloatType, or UnsignedByteType."';
+const ERROR_COLOR_SPACE = 'THREE.KTX2Exporter: Supported color spaces are SRGBColorSpace (UnsignedByteType only), LinearSRGBColorSpace, or NoColorSpace.';
+
+export class KTX2Exporter {
+
+	parse( arg1, arg2 ) {
+
+		let texture;
+
+		if ( arg1.isDataTexture || arg1.isData3DTexture ) {
+
+			texture = arg1;
+
+		} else if ( arg1.isWebGLRenderer && arg2.isWebGLRenderTarget ) {
+
+			texture = toDataTexture( arg1, arg2 );
+
+		} else {
+
+			throw new Error( ERROR_INPUT );
+
+		}
+
+		if ( VK_FORMAT_MAP[ texture.format ] === undefined ) {
+
+			throw new Error( ERROR_FORMAT );
+
+		}
+
+		if ( VK_FORMAT_MAP[ texture.format ][ texture.type ] === undefined ) {
+
+			throw new Error( ERROR_TYPE );
+
+		}
+
+		if ( VK_FORMAT_MAP[ texture.format ][ texture.type ][ texture.colorSpace ] === undefined ) {
+
+			throw new Error( ERROR_COLOR_SPACE );
+
+		}
+
+		//
+
+		const array = texture.image.data;
+		const channelCount = getChannelCount( texture );
+		const container = new KTX2Container();
+
+		container.vkFormat = VK_FORMAT_MAP[ texture.format ][ texture.type ][ texture.colorSpace ];
+		container.typeSize = array.BYTES_PER_ELEMENT;
+		container.pixelWidth = texture.image.width;
+		container.pixelHeight = texture.image.height;
+
+		if ( texture.isData3DTexture ) {
+
+			container.pixelDepth = texture.image.depth;
+
+		}
+
+		//
+
+		const basicDesc = container.dataFormatDescriptor[ 0 ];
+
+		basicDesc.colorModel = KHR_DF_MODEL_RGBSDA;
+		basicDesc.colorPrimaries = texture.colorSpace === NoColorSpace
+			? KHR_DF_PRIMARIES_UNSPECIFIED
+			: KHR_DF_PRIMARIES_BT709;
+		basicDesc.transferFunction = texture.colorSpace === SRGBColorSpace
+			? KHR_DF_TRANSFER_SRGB
+			: KHR_DF_TRANSFER_LINEAR;
+
+		basicDesc.texelBlockDimension = [ 0, 0, 0, 0 ];
+
+		basicDesc.bytesPlane = [
+
+			container.typeSize * channelCount, 0, 0, 0, 0, 0, 0, 0,
+
+		];
+
+		for ( let i = 0; i < channelCount; ++ i ) {
+
+			let channelType = KHR_DF_CHANNEL_MAP[ i ];
+
+			if ( texture.colorSpace === LinearSRGBColorSpace || texture.colorSpace === NoColorSpace ) {
+
+				channelType |= KHR_DF_SAMPLE_DATATYPE_LINEAR;
+
+			}
+
+			if ( texture.type === FloatType || texture.type === HalfFloatType ) {
+
+				channelType |= KHR_DF_SAMPLE_DATATYPE_FLOAT;
+				channelType |= KHR_DF_SAMPLE_DATATYPE_SIGNED;
+
+			}
+
+			basicDesc.samples.push( {
+
+				channelType: channelType,
+				bitOffset: i * array.BYTES_PER_ELEMENT,
+				bitLength: array.BYTES_PER_ELEMENT * 8 - 1,
+				samplePosition: [ 0, 0, 0, 0 ],
+				sampleLower: texture.type === UnsignedByteType ? 0 : - 1,
+				sampleUpper: texture.type === UnsignedByteType ? 255 : 1,
+
+			} );
+
+		}
+
+		//
+
+		container.levels = [ {
+
+			levelData: new Uint8Array( array.buffer, array.byteOffset, array.byteLength ),
+			uncompressedByteLength: array.byteLength,
+
+		} ];
+
+		//
+
+		container.keyValue[ 'KTXwriter' ] = `three.js ${ REVISION }`;
+
+		//
+
+		return write( container, { keepWriter: true } );
+
+	}
+
+}
+
+function toDataTexture( renderer, rtt ) {
+
+	const channelCount = getChannelCount( rtt.texture );
+
+	let view;
+
+	if ( rtt.texture.type === FloatType ) {
+
+		view = new Float32Array( rtt.width * rtt.height * channelCount );
+
+	} else if ( rtt.texture.type === HalfFloatType ) {
+
+		view = new Uint16Array( rtt.width * rtt.height * channelCount );
+
+	} else if ( rtt.texture.type === UnsignedByteType ) {
+
+		view = new Uint8Array( rtt.width * rtt.height * channelCount );
+
+	} else {
+
+		throw new Error( ERROR_TYPE );
+
+	}
+
+	renderer.readRenderTargetPixels( rtt, 0, 0, rtt.width, rtt.height, view );
+
+	return new DataTexture( view, rtt.width, rtt.height, rtt.texture.format, rtt.texture.type );
+
+}
+
+function getChannelCount( texture ) {
+
+	switch ( texture.format ) {
+
+		case RGBAFormat:
+
+			return 4;
+
+		case RGFormat:
+		case RGIntegerFormat:
+
+			return 2;
+
+		case RedFormat:
+		case RedIntegerFormat:
+
+			return 1;
+
+		default:
+
+			throw new Error( ERROR_FORMAT );
+
+	}
+
+}

src/examples/jsm/exporters/MMDExporter.js

@@ -0,0 +1,217 @@
+import {
+	Matrix4,
+	Quaternion,
+	Vector3
+} from 'three';
+import { MMDParser } from '../libs/mmdparser.module.js';
+
+/**
+ * Dependencies
+ *  - mmd-parser https://github.com/takahirox/mmd-parser
+ */
+
+class MMDExporter {
+
+	/* TODO: implement
+	// mesh -> pmd
+	this.parsePmd = function ( object ) {
+
+	};
+	*/
+
+	/* TODO: implement
+	// mesh -> pmx
+	this.parsePmx = function ( object ) {
+
+	};
+	*/
+
+	/* TODO: implement
+	// animation + skeleton -> vmd
+	this.parseVmd = function ( object ) {
+
+	};
+	*/
+
+	/*
+	 * skeleton -> vpd
+	 * Returns Shift_JIS encoded Uint8Array. Otherwise return strings.
+	 */
+	parseVpd( skin, outputShiftJis, useOriginalBones ) {
+
+		if ( skin.isSkinnedMesh !== true ) {
+
+			console.warn( 'THREE.MMDExporter: parseVpd() requires SkinnedMesh instance.' );
+			return null;
+
+		}
+
+		function toStringsFromNumber( num ) {
+
+			if ( Math.abs( num ) < 1e-6 ) num = 0;
+
+			let a = num.toString();
+
+			if ( a.indexOf( '.' ) === - 1 ) {
+
+				a += '.';
+
+			}
+
+			a += '000000';
+
+			const index = a.indexOf( '.' );
+
+			const d = a.slice( 0, index );
+			const p = a.slice( index + 1, index + 7 );
+
+			return d + '.' + p;
+
+		}
+
+		function toStringsFromArray( array ) {
+
+			const a = [];
+
+			for ( let i = 0, il = array.length; i < il; i ++ ) {
+
+				a.push( toStringsFromNumber( array[ i ] ) );
+
+			}
+
+			return a.join( ',' );
+
+		}
+
+		skin.updateMatrixWorld( true );
+
+		const bones = skin.skeleton.bones;
+		const bones2 = getBindBones( skin );
+
+		const position = new Vector3();
+		const quaternion = new Quaternion();
+		const quaternion2 = new Quaternion();
+		const matrix = new Matrix4();
+
+		const array = [];
+		array.push( 'Vocaloid Pose Data file' );
+		array.push( '' );
+		array.push( ( skin.name !== '' ? skin.name.replace( /\s/g, '_' ) : 'skin' ) + '.osm;' );
+		array.push( bones.length + ';' );
+		array.push( '' );
+
+		for ( let i = 0, il = bones.length; i < il; i ++ ) {
+
+			const bone = bones[ i ];
+			const bone2 = bones2[ i ];
+
+			/*
+			 * use the bone matrix saved before solving IK.
+			 * see CCDIKSolver for the detail.
+			 */
+			if ( useOriginalBones === true &&
+				bone.userData.ik !== undefined &&
+				bone.userData.ik.originalMatrix !== undefined ) {
+
+				matrix.fromArray( bone.userData.ik.originalMatrix );
+
+			} else {
+
+				matrix.copy( bone.matrix );
+
+			}
+
+			position.setFromMatrixPosition( matrix );
+			quaternion.setFromRotationMatrix( matrix );
+
+			const pArray = position.sub( bone2.position ).toArray();
+			const qArray = quaternion2.copy( bone2.quaternion ).conjugate().multiply( quaternion ).toArray();
+
+			// right to left
+			pArray[ 2 ] = - pArray[ 2 ];
+			qArray[ 0 ] = - qArray[ 0 ];
+			qArray[ 1 ] = - qArray[ 1 ];
+
+			array.push( 'Bone' + i + '{' + bone.name );
+			array.push( '  ' + toStringsFromArray( pArray ) + ';' );
+			array.push( '  ' + toStringsFromArray( qArray ) + ';' );
+			array.push( '}' );
+			array.push( '' );
+
+		}
+
+		array.push( '' );
+
+		const lines = array.join( '\n' );
+
+		return ( outputShiftJis === true ) ? unicodeToShiftjis( lines ) : lines;
+
+	}
+
+}
+
+// Unicode to Shift_JIS table
+let u2sTable;
+
+function unicodeToShiftjis( str ) {
+
+	if ( u2sTable === undefined ) {
+
+		const encoder = new MMDParser.CharsetEncoder();
+		const table = encoder.s2uTable;
+		u2sTable = {};
+
+		const keys = Object.keys( table );
+
+		for ( let i = 0, il = keys.length; i < il; i ++ ) {
+
+			let key = keys[ i ];
+
+			const value = table[ key ];
+			key = parseInt( key );
+
+			u2sTable[ value ] = key;
+
+		}
+
+	}
+
+	const array = [];
+
+	for ( let i = 0, il = str.length; i < il; i ++ ) {
+
+		const code = str.charCodeAt( i );
+
+		const value = u2sTable[ code ];
+
+		if ( value === undefined ) {
+
+			throw new Error( 'cannot convert charcode 0x' + code.toString( 16 ) );
+
+		} else if ( value > 0xff ) {
+
+			array.push( ( value >> 8 ) & 0xff );
+			array.push( value & 0xff );
+
+		} else {
+
+			array.push( value & 0xff );
+
+		}
+
+	}
+
+	return new Uint8Array( array );
+
+}
+
+function getBindBones( skin ) {
+
+	// any more efficient ways?
+	const poseSkin = skin.clone();
+	poseSkin.pose();
+	return poseSkin.skeleton.bones;
+
+}
+
+export { MMDExporter };

src/examples/jsm/exporters/OBJExporter.js

@@ -0,0 +1,284 @@
+import {
+	Color,
+	Matrix3,
+	Vector2,
+	Vector3
+} from 'three';
+
+class OBJExporter {
+
+	parse( object ) {
+
+		let output = '';
+
+		let indexVertex = 0;
+		let indexVertexUvs = 0;
+		let indexNormals = 0;
+
+		const vertex = new Vector3();
+		const color = new Color();
+		const normal = new Vector3();
+		const uv = new Vector2();
+
+		const face = [];
+
+		function parseMesh( mesh ) {
+
+			let nbVertex = 0;
+			let nbNormals = 0;
+			let nbVertexUvs = 0;
+
+			const geometry = mesh.geometry;
+
+			const normalMatrixWorld = new Matrix3();
+
+			// shortcuts
+			const vertices = geometry.getAttribute( 'position' );
+			const normals = geometry.getAttribute( 'normal' );
+			const uvs = geometry.getAttribute( 'uv' );
+			const indices = geometry.getIndex();
+
+			// name of the mesh object
+			output += 'o ' + mesh.name + '\n';
+
+			// name of the mesh material
+			if ( mesh.material && mesh.material.name ) {
+
+				output += 'usemtl ' + mesh.material.name + '\n';
+
+			}
+
+			// vertices
+
+			if ( vertices !== undefined ) {
+
+				for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					// transform the vertex to world space
+					vertex.applyMatrix4( mesh.matrixWorld );
+
+					// transform the vertex to export format
+					output += 'v ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z + '\n';
+
+				}
+
+			}
+
+			// uvs
+
+			if ( uvs !== undefined ) {
+
+				for ( let i = 0, l = uvs.count; i < l; i ++, nbVertexUvs ++ ) {
+
+					uv.fromBufferAttribute( uvs, i );
+
+					// transform the uv to export format
+					output += 'vt ' + uv.x + ' ' + uv.y + '\n';
+
+				}
+
+			}
+
+			// normals
+
+			if ( normals !== undefined ) {
+
+				normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
+
+				for ( let i = 0, l = normals.count; i < l; i ++, nbNormals ++ ) {
+
+					normal.fromBufferAttribute( normals, i );
+
+					// transform the normal to world space
+					normal.applyMatrix3( normalMatrixWorld ).normalize();
+
+					// transform the normal to export format
+					output += 'vn ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
+
+				}
+
+			}
+
+			// faces
+
+			if ( indices !== null ) {
+
+				for ( let i = 0, l = indices.count; i < l; i += 3 ) {
+
+					for ( let m = 0; m < 3; m ++ ) {
+
+						const j = indices.getX( i + m ) + 1;
+
+						face[ m ] = ( indexVertex + j ) + ( normals || uvs ? '/' + ( uvs ? ( indexVertexUvs + j ) : '' ) + ( normals ? '/' + ( indexNormals + j ) : '' ) : '' );
+
+					}
+
+					// transform the face to export format
+					output += 'f ' + face.join( ' ' ) + '\n';
+
+				}
+
+			} else {
+
+				for ( let i = 0, l = vertices.count; i < l; i += 3 ) {
+
+					for ( let m = 0; m < 3; m ++ ) {
+
+						const j = i + m + 1;
+
+						face[ m ] = ( indexVertex + j ) + ( normals || uvs ? '/' + ( uvs ? ( indexVertexUvs + j ) : '' ) + ( normals ? '/' + ( indexNormals + j ) : '' ) : '' );
+
+					}
+
+					// transform the face to export format
+					output += 'f ' + face.join( ' ' ) + '\n';
+
+				}
+
+			}
+
+			// update index
+			indexVertex += nbVertex;
+			indexVertexUvs += nbVertexUvs;
+			indexNormals += nbNormals;
+
+		}
+
+		function parseLine( line ) {
+
+			let nbVertex = 0;
+
+			const geometry = line.geometry;
+			const type = line.type;
+
+			// shortcuts
+			const vertices = geometry.getAttribute( 'position' );
+
+			// name of the line object
+			output += 'o ' + line.name + '\n';
+
+			if ( vertices !== undefined ) {
+
+				for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					// transform the vertex to world space
+					vertex.applyMatrix4( line.matrixWorld );
+
+					// transform the vertex to export format
+					output += 'v ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z + '\n';
+
+				}
+
+			}
+
+			if ( type === 'Line' ) {
+
+				output += 'l ';
+
+				for ( let j = 1, l = vertices.count; j <= l; j ++ ) {
+
+					output += ( indexVertex + j ) + ' ';
+
+				}
+
+				output += '\n';
+
+			}
+
+			if ( type === 'LineSegments' ) {
+
+				for ( let j = 1, k = j + 1, l = vertices.count; j < l; j += 2, k = j + 1 ) {
+
+					output += 'l ' + ( indexVertex + j ) + ' ' + ( indexVertex + k ) + '\n';
+
+				}
+
+			}
+
+			// update index
+			indexVertex += nbVertex;
+
+		}
+
+		function parsePoints( points ) {
+
+			let nbVertex = 0;
+
+			const geometry = points.geometry;
+
+			const vertices = geometry.getAttribute( 'position' );
+			const colors = geometry.getAttribute( 'color' );
+
+			output += 'o ' + points.name + '\n';
+
+			if ( vertices !== undefined ) {
+
+				for ( let i = 0, l = vertices.count; i < l; i ++, nbVertex ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+					vertex.applyMatrix4( points.matrixWorld );
+
+					output += 'v ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z;
+
+					if ( colors !== undefined ) {
+
+						color.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+
+						output += ' ' + color.r + ' ' + color.g + ' ' + color.b;
+
+					}
+
+					output += '\n';
+
+				}
+
+				output += 'p ';
+
+				for ( let j = 1, l = vertices.count; j <= l; j ++ ) {
+
+					output += ( indexVertex + j ) + ' ';
+
+				}
+
+				output += '\n';
+
+			}
+
+			// update index
+			indexVertex += nbVertex;
+
+		}
+
+		object.traverse( function ( child ) {
+
+			if ( child.isMesh === true ) {
+
+				parseMesh( child );
+
+			}
+
+			if ( child.isLine === true ) {
+
+				parseLine( child );
+
+			}
+
+			if ( child.isPoints === true ) {
+
+				parsePoints( child );
+
+			}
+
+		} );
+
+		return output;
+
+	}
+
+}
+
+export { OBJExporter };

src/examples/jsm/exporters/PLYExporter.js

@@ -0,0 +1,528 @@
+import {
+	Matrix3,
+	Vector3,
+	Color
+} from 'three';
+
+/**
+ * https://github.com/gkjohnson/ply-exporter-js
+ *
+ * Usage:
+ *  const exporter = new PLYExporter();
+ *
+ *  // second argument is a list of options
+ *  exporter.parse(mesh, data => console.log(data), { binary: true, excludeAttributes: [ 'color' ], littleEndian: true });
+ *
+ * Format Definition:
+ * http://paulbourke.net/dataformats/ply/
+ */
+
+class PLYExporter {
+
+	parse( object, onDone, options = {} ) {
+
+		// Iterate over the valid meshes in the object
+		function traverseMeshes( cb ) {
+
+			object.traverse( function ( child ) {
+
+				if ( child.isMesh === true || child.isPoints ) {
+
+					const mesh = child;
+					const geometry = mesh.geometry;
+
+					if ( geometry.hasAttribute( 'position' ) === true ) {
+
+						cb( mesh, geometry );
+
+					}
+
+				}
+
+			} );
+
+		}
+
+		// Default options
+		const defaultOptions = {
+			binary: false,
+			excludeAttributes: [], // normal, uv, color, index
+			littleEndian: false
+		};
+
+		options = Object.assign( defaultOptions, options );
+
+		const excludeAttributes = options.excludeAttributes;
+		let includeIndices = true;
+		let includeNormals = false;
+		let includeColors = false;
+		let includeUVs = false;
+
+		// count the vertices, check which properties are used,
+		// and cache the BufferGeometry
+		let vertexCount = 0;
+		let faceCount = 0;
+
+		object.traverse( function ( child ) {
+
+			if ( child.isMesh === true ) {
+
+				const mesh = child;
+				const geometry = mesh.geometry;
+
+				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const uvs = geometry.getAttribute( 'uv' );
+				const colors = geometry.getAttribute( 'color' );
+				const indices = geometry.getIndex();
+
+				if ( vertices === undefined ) {
+
+					return;
+
+				}
+
+				vertexCount += vertices.count;
+				faceCount += indices ? indices.count / 3 : vertices.count / 3;
+
+				if ( normals !== undefined ) includeNormals = true;
+
+				if ( uvs !== undefined ) includeUVs = true;
+
+				if ( colors !== undefined ) includeColors = true;
+
+			} else if ( child.isPoints ) {
+
+				const mesh = child;
+				const geometry = mesh.geometry;
+
+				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const colors = geometry.getAttribute( 'color' );
+
+				vertexCount += vertices.count;
+
+				if ( normals !== undefined ) includeNormals = true;
+
+				if ( colors !== undefined ) includeColors = true;
+
+				includeIndices = false;
+
+			}
+
+		} );
+
+		const tempColor = new Color();
+		includeIndices = includeIndices && excludeAttributes.indexOf( 'index' ) === - 1;
+		includeNormals = includeNormals && excludeAttributes.indexOf( 'normal' ) === - 1;
+		includeColors = includeColors && excludeAttributes.indexOf( 'color' ) === - 1;
+		includeUVs = includeUVs && excludeAttributes.indexOf( 'uv' ) === - 1;
+
+
+		if ( includeIndices && faceCount !== Math.floor( faceCount ) ) {
+
+			// point cloud meshes will not have an index array and may not have a
+			// number of vertices that is divisble by 3 (and therefore representable
+			// as triangles)
+			console.error(
+
+				'PLYExporter: Failed to generate a valid PLY file with triangle indices because the ' +
+				'number of indices is not divisible by 3.'
+
+			);
+
+			return null;
+
+		}
+
+		const indexByteCount = 4;
+
+		let header =
+			'ply\n' +
+			`format ${ options.binary ? ( options.littleEndian ? 'binary_little_endian' : 'binary_big_endian' ) : 'ascii' } 1.0\n` +
+			`element vertex ${vertexCount}\n` +
+
+			// position
+			'property float x\n' +
+			'property float y\n' +
+			'property float z\n';
+
+		if ( includeNormals === true ) {
+
+			// normal
+			header +=
+				'property float nx\n' +
+				'property float ny\n' +
+				'property float nz\n';
+
+		}
+
+		if ( includeUVs === true ) {
+
+			// uvs
+			header +=
+				'property float s\n' +
+				'property float t\n';
+
+		}
+
+		if ( includeColors === true ) {
+
+			// colors
+			header +=
+				'property uchar red\n' +
+				'property uchar green\n' +
+				'property uchar blue\n';
+
+		}
+
+		if ( includeIndices === true ) {
+
+			// faces
+			header +=
+				`element face ${faceCount}\n` +
+				'property list uchar int vertex_index\n';
+
+		}
+
+		header += 'end_header\n';
+
+
+		// Generate attribute data
+		const vertex = new Vector3();
+		const normalMatrixWorld = new Matrix3();
+		let result = null;
+
+		if ( options.binary === true ) {
+
+			// Binary File Generation
+			const headerBin = new TextEncoder().encode( header );
+
+			// 3 position values at 4 bytes
+			// 3 normal values at 4 bytes
+			// 3 color channels with 1 byte
+			// 2 uv values at 4 bytes
+			const vertexListLength = vertexCount * ( 4 * 3 + ( includeNormals ? 4 * 3 : 0 ) + ( includeColors ? 3 : 0 ) + ( includeUVs ? 4 * 2 : 0 ) );
+
+			// 1 byte shape desciptor
+			// 3 vertex indices at ${indexByteCount} bytes
+			const faceListLength = includeIndices ? faceCount * ( indexByteCount * 3 + 1 ) : 0;
+			const output = new DataView( new ArrayBuffer( headerBin.length + vertexListLength + faceListLength ) );
+			new Uint8Array( output.buffer ).set( headerBin, 0 );
+
+
+			let vOffset = headerBin.length;
+			let fOffset = headerBin.length + vertexListLength;
+			let writtenVertices = 0;
+			traverseMeshes( function ( mesh, geometry ) {
+
+				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const uvs = geometry.getAttribute( 'uv' );
+				const colors = geometry.getAttribute( 'color' );
+				const indices = geometry.getIndex();
+
+				normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
+
+				for ( let i = 0, l = vertices.count; i < l; i ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					vertex.applyMatrix4( mesh.matrixWorld );
+
+
+					// Position information
+					output.setFloat32( vOffset, vertex.x, options.littleEndian );
+					vOffset += 4;
+
+					output.setFloat32( vOffset, vertex.y, options.littleEndian );
+					vOffset += 4;
+
+					output.setFloat32( vOffset, vertex.z, options.littleEndian );
+					vOffset += 4;
+
+					// Normal information
+					if ( includeNormals === true ) {
+
+						if ( normals != null ) {
+
+							vertex.fromBufferAttribute( normals, i );
+
+							vertex.applyMatrix3( normalMatrixWorld ).normalize();
+
+							output.setFloat32( vOffset, vertex.x, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, vertex.y, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, vertex.z, options.littleEndian );
+							vOffset += 4;
+
+						} else {
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+						}
+
+					}
+
+					// UV information
+					if ( includeUVs === true ) {
+
+						if ( uvs != null ) {
+
+							output.setFloat32( vOffset, uvs.getX( i ), options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, uvs.getY( i ), options.littleEndian );
+							vOffset += 4;
+
+						} else {
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+							output.setFloat32( vOffset, 0, options.littleEndian );
+							vOffset += 4;
+
+						}
+
+					}
+
+					// Color information
+					if ( includeColors === true ) {
+
+						if ( colors != null ) {
+
+							tempColor
+								.fromBufferAttribute( colors, i )
+								.convertLinearToSRGB();
+
+							output.setUint8( vOffset, Math.floor( tempColor.r * 255 ) );
+							vOffset += 1;
+
+							output.setUint8( vOffset, Math.floor( tempColor.g * 255 ) );
+							vOffset += 1;
+
+							output.setUint8( vOffset, Math.floor( tempColor.b * 255 ) );
+							vOffset += 1;
+
+						} else {
+
+							output.setUint8( vOffset, 255 );
+							vOffset += 1;
+
+							output.setUint8( vOffset, 255 );
+							vOffset += 1;
+
+							output.setUint8( vOffset, 255 );
+							vOffset += 1;
+
+						}
+
+					}
+
+				}
+
+				if ( includeIndices === true ) {
+
+					// Create the face list
+
+					if ( indices !== null ) {
+
+						for ( let i = 0, l = indices.count; i < l; i += 3 ) {
+
+							output.setUint8( fOffset, 3 );
+							fOffset += 1;
+
+							output.setUint32( fOffset, indices.getX( i + 0 ) + writtenVertices, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, indices.getX( i + 1 ) + writtenVertices, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, indices.getX( i + 2 ) + writtenVertices, options.littleEndian );
+							fOffset += indexByteCount;
+
+						}
+
+					} else {
+
+						for ( let i = 0, l = vertices.count; i < l; i += 3 ) {
+
+							output.setUint8( fOffset, 3 );
+							fOffset += 1;
+
+							output.setUint32( fOffset, writtenVertices + i, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, writtenVertices + i + 1, options.littleEndian );
+							fOffset += indexByteCount;
+
+							output.setUint32( fOffset, writtenVertices + i + 2, options.littleEndian );
+							fOffset += indexByteCount;
+
+						}
+
+					}
+
+				}
+
+
+				// Save the amount of verts we've already written so we can offset
+				// the face index on the next mesh
+				writtenVertices += vertices.count;
+
+			} );
+
+			result = output.buffer;
+
+		} else {
+
+			// Ascii File Generation
+			// count the number of vertices
+			let writtenVertices = 0;
+			let vertexList = '';
+			let faceList = '';
+
+			traverseMeshes( function ( mesh, geometry ) {
+
+				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const uvs = geometry.getAttribute( 'uv' );
+				const colors = geometry.getAttribute( 'color' );
+				const indices = geometry.getIndex();
+
+				normalMatrixWorld.getNormalMatrix( mesh.matrixWorld );
+
+				// form each line
+				for ( let i = 0, l = vertices.count; i < l; i ++ ) {
+
+					vertex.fromBufferAttribute( vertices, i );
+
+					vertex.applyMatrix4( mesh.matrixWorld );
+
+
+					// Position information
+					let line =
+						vertex.x + ' ' +
+						vertex.y + ' ' +
+						vertex.z;
+
+					// Normal information
+					if ( includeNormals === true ) {
+
+						if ( normals != null ) {
+
+							vertex.fromBufferAttribute( normals, i );
+
+							vertex.applyMatrix3( normalMatrixWorld ).normalize();
+
+							line += ' ' +
+								vertex.x + ' ' +
+								vertex.y + ' ' +
+								vertex.z;
+
+						} else {
+
+							line += ' 0 0 0';
+
+						}
+
+					}
+
+					// UV information
+					if ( includeUVs === true ) {
+
+						if ( uvs != null ) {
+
+							line += ' ' +
+								uvs.getX( i ) + ' ' +
+								uvs.getY( i );
+
+						} else {
+
+							line += ' 0 0';
+
+						}
+
+					}
+
+					// Color information
+					if ( includeColors === true ) {
+
+						if ( colors != null ) {
+
+							tempColor
+								.fromBufferAttribute( colors, i )
+								.convertLinearToSRGB();
+
+							line += ' ' +
+								Math.floor( tempColor.r * 255 ) + ' ' +
+								Math.floor( tempColor.g * 255 ) + ' ' +
+								Math.floor( tempColor.b * 255 );
+
+						} else {
+
+							line += ' 255 255 255';
+
+						}
+
+					}
+
+					vertexList += line + '\n';
+
+				}
+
+				// Create the face list
+				if ( includeIndices === true ) {
+
+					if ( indices !== null ) {
+
+						for ( let i = 0, l = indices.count; i < l; i += 3 ) {
+
+							faceList += `3 ${ indices.getX( i + 0 ) + writtenVertices }`;
+							faceList += ` ${ indices.getX( i + 1 ) + writtenVertices }`;
+							faceList += ` ${ indices.getX( i + 2 ) + writtenVertices }\n`;
+
+						}
+
+					} else {
+
+						for ( let i = 0, l = vertices.count; i < l; i += 3 ) {
+
+							faceList += `3 ${ writtenVertices + i } ${ writtenVertices + i + 1 } ${ writtenVertices + i + 2 }\n`;
+
+						}
+
+					}
+
+					faceCount += indices ? indices.count / 3 : vertices.count / 3;
+
+				}
+
+				writtenVertices += vertices.count;
+
+			} );
+
+			result = `${ header }${vertexList}${ includeIndices ? `${faceList}\n` : '\n' }`;
+
+		}
+
+		if ( typeof onDone === 'function' ) requestAnimationFrame( () => onDone( result ) );
+
+		return result;
+
+	}
+
+}
+
+export { PLYExporter };

src/examples/jsm/exporters/STLExporter.js

@@ -0,0 +1,199 @@
+import { Vector3 } from 'three';
+
+/**
+ * Usage:
+ *  const exporter = new STLExporter();
+ *
+ *  // second argument is a list of options
+ *  const data = exporter.parse( mesh, { binary: true } );
+ *
+ */
+
+class STLExporter {
+
+	parse( scene, options = {} ) {
+
+		options = Object.assign( {
+			binary: false
+		}, options );
+
+		const binary = options.binary;
+
+		//
+
+		const objects = [];
+		let triangles = 0;
+
+		scene.traverse( function ( object ) {
+
+			if ( object.isMesh ) {
+
+				const geometry = object.geometry;
+
+				const index = geometry.index;
+				const positionAttribute = geometry.getAttribute( 'position' );
+
+				triangles += ( index !== null ) ? ( index.count / 3 ) : ( positionAttribute.count / 3 );
+
+				objects.push( {
+					object3d: object,
+					geometry: geometry
+				} );
+
+			}
+
+		} );
+
+		let output;
+		let offset = 80; // skip header
+
+		if ( binary === true ) {
+
+			const bufferLength = triangles * 2 + triangles * 3 * 4 * 4 + 80 + 4;
+			const arrayBuffer = new ArrayBuffer( bufferLength );
+			output = new DataView( arrayBuffer );
+			output.setUint32( offset, triangles, true ); offset += 4;
+
+		} else {
+
+			output = '';
+			output += 'solid exported\n';
+
+		}
+
+		const vA = new Vector3();
+		const vB = new Vector3();
+		const vC = new Vector3();
+		const cb = new Vector3();
+		const ab = new Vector3();
+		const normal = new Vector3();
+
+		for ( let i = 0, il = objects.length; i < il; i ++ ) {
+
+			const object = objects[ i ].object3d;
+			const geometry = objects[ i ].geometry;
+
+			const index = geometry.index;
+			const positionAttribute = geometry.getAttribute( 'position' );
+
+			if ( index !== null ) {
+
+				// indexed geometry
+
+				for ( let j = 0; j < index.count; j += 3 ) {
+
+					const a = index.getX( j + 0 );
+					const b = index.getX( j + 1 );
+					const c = index.getX( j + 2 );
+
+					writeFace( a, b, c, positionAttribute, object );
+
+				}
+
+			} else {
+
+				// non-indexed geometry
+
+				for ( let j = 0; j < positionAttribute.count; j += 3 ) {
+
+					const a = j + 0;
+					const b = j + 1;
+					const c = j + 2;
+
+					writeFace( a, b, c, positionAttribute, object );
+
+				}
+
+			}
+
+		}
+
+		if ( binary === false ) {
+
+			output += 'endsolid exported\n';
+
+		}
+
+		return output;
+
+		function writeFace( a, b, c, positionAttribute, object ) {
+
+			vA.fromBufferAttribute( positionAttribute, a );
+			vB.fromBufferAttribute( positionAttribute, b );
+			vC.fromBufferAttribute( positionAttribute, c );
+
+			if ( object.isSkinnedMesh === true ) {
+
+				object.applyBoneTransform( a, vA );
+				object.applyBoneTransform( b, vB );
+				object.applyBoneTransform( c, vC );
+
+			}
+
+			vA.applyMatrix4( object.matrixWorld );
+			vB.applyMatrix4( object.matrixWorld );
+			vC.applyMatrix4( object.matrixWorld );
+
+			writeNormal( vA, vB, vC );
+
+			writeVertex( vA );
+			writeVertex( vB );
+			writeVertex( vC );
+
+			if ( binary === true ) {
+
+				output.setUint16( offset, 0, true ); offset += 2;
+
+			} else {
+
+				output += '\t\tendloop\n';
+				output += '\tendfacet\n';
+
+			}
+
+		}
+
+		function writeNormal( vA, vB, vC ) {
+
+			cb.subVectors( vC, vB );
+			ab.subVectors( vA, vB );
+			cb.cross( ab ).normalize();
+
+			normal.copy( cb ).normalize();
+
+			if ( binary === true ) {
+
+				output.setFloat32( offset, normal.x, true ); offset += 4;
+				output.setFloat32( offset, normal.y, true ); offset += 4;
+				output.setFloat32( offset, normal.z, true ); offset += 4;
+
+			} else {
+
+				output += '\tfacet normal ' + normal.x + ' ' + normal.y + ' ' + normal.z + '\n';
+				output += '\t\touter loop\n';
+
+			}
+
+		}
+
+		function writeVertex( vertex ) {
+
+			if ( binary === true ) {
+
+				output.setFloat32( offset, vertex.x, true ); offset += 4;
+				output.setFloat32( offset, vertex.y, true ); offset += 4;
+				output.setFloat32( offset, vertex.z, true ); offset += 4;
+
+			} else {
+
+				output += '\t\t\tvertex ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z + '\n';
+
+			}
+
+		}
+
+	}
+
+}
+
+export { STLExporter };

src/examples/jsm/exporters/USDZExporter.js

@@ -0,0 +1,711 @@
+import * as THREE from 'three';
+import * as fflate from '../libs/fflate.module.js';
+
+class USDZExporter {
+
+	async parse( scene, options = {} ) {
+
+		options = Object.assign( {
+			ar: {
+				anchoring: { type: 'plane' },
+				planeAnchoring: { alignment: 'horizontal' }
+			},
+			quickLookCompatible: false,
+		}, options );
+
+		const files = {};
+		const modelFileName = 'model.usda';
+
+		// model file should be first in USDZ archive so we init it here
+		files[ modelFileName ] = null;
+
+		let output = buildHeader();
+
+		output += buildSceneStart( options );
+
+		const materials = {};
+		const textures = {};
+
+		scene.traverseVisible( ( object ) => {
+
+			if ( object.isMesh ) {
+
+				const geometry = object.geometry;
+				const material = object.material;
+
+				if ( material.isMeshStandardMaterial ) {
+
+					const geometryFileName = 'geometries/Geometry_' + geometry.id + '.usda';
+
+					if ( ! ( geometryFileName in files ) ) {
+
+						const meshObject = buildMeshObject( geometry );
+						files[ geometryFileName ] = buildUSDFileAsString( meshObject );
+
+					}
+
+					if ( ! ( material.uuid in materials ) ) {
+
+						materials[ material.uuid ] = material;
+
+					}
+
+					output += buildXform( object, geometry, material );
+
+				} else {
+
+					console.warn( 'THREE.USDZExporter: Unsupported material type (USDZ only supports MeshStandardMaterial)', object );
+
+				}
+
+			} else if ( object.isCamera ) {
+
+				output += buildCamera( object );
+
+			}
+
+		} );
+
+
+		output += buildSceneEnd();
+
+		output += buildMaterials( materials, textures, options.quickLookCompatible );
+
+		files[ modelFileName ] = fflate.strToU8( output );
+		output = null;
+
+		for ( const id in textures ) {
+
+			const texture = textures[ id ];
+
+			const canvas = imageToCanvas( texture.image, texture.flipY );
+			const blob = await new Promise( resolve => canvas.toBlob( resolve, 'image/png', 1 ) );
+
+			files[ `textures/Texture_${ id }.png` ] = new Uint8Array( await blob.arrayBuffer() );
+
+		}
+
+		// 64 byte alignment
+		// https://github.com/101arrowz/fflate/issues/39#issuecomment-777263109
+
+		let offset = 0;
+
+		for ( const filename in files ) {
+
+			const file = files[ filename ];
+			const headerSize = 34 + filename.length;
+
+			offset += headerSize;
+
+			const offsetMod64 = offset & 63;
+
+			if ( offsetMod64 !== 4 ) {
+
+				const padLength = 64 - offsetMod64;
+				const padding = new Uint8Array( padLength );
+
+				files[ filename ] = [ file, { extra: { 12345: padding } } ];
+
+			}
+
+			offset = file.length;
+
+		}
+
+		return fflate.zipSync( files, { level: 0 } );
+
+	}
+
+}
+
+function imageToCanvas( image, flipY ) {
+
+	if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
+		( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
+		( typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas ) ||
+		( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {
+
+		const scale = 1024 / Math.max( image.width, image.height );
+
+		const canvas = document.createElement( 'canvas' );
+		canvas.width = image.width * Math.min( 1, scale );
+		canvas.height = image.height * Math.min( 1, scale );
+
+		const context = canvas.getContext( '2d' );
+
+		// TODO: We should be able to do this in the UsdTransform2d?
+
+		if ( flipY === true ) {
+
+			context.translate( 0, canvas.height );
+			context.scale( 1, - 1 );
+
+		}
+
+		context.drawImage( image, 0, 0, canvas.width, canvas.height );
+
+		return canvas;
+
+	} else {
+
+		throw new Error( 'THREE.USDZExporter: No valid image data found. Unable to process texture.' );
+
+	}
+
+}
+
+//
+
+const PRECISION = 7;
+
+function buildHeader() {
+
+	return `#usda 1.0
+(
+	customLayerData = {
+		string creator = "Three.js USDZExporter"
+	}
+	defaultPrim = "Root"
+	metersPerUnit = 1
+	upAxis = "Y"
+)
+
+`;
+
+}
+
+function buildSceneStart( options ) {
+
+	return `def Xform "Root"
+{
+	def Scope "Scenes" (
+		kind = "sceneLibrary"
+	)
+	{
+		def Xform "Scene" (
+			customData = {
+				bool preliminary_collidesWithEnvironment = 0
+				string sceneName = "Scene"
+			}
+			sceneName = "Scene"
+		)
+		{
+		token preliminary:anchoring:type = "${options.ar.anchoring.type}"
+		token preliminary:planeAnchoring:alignment = "${options.ar.planeAnchoring.alignment}"
+
+`;
+
+}
+
+function buildSceneEnd() {
+
+	return `
+		}
+	}
+}
+
+`;
+
+}
+
+function buildUSDFileAsString( dataToInsert ) {
+
+	let output = buildHeader();
+	output += dataToInsert;
+	return fflate.strToU8( output );
+
+}
+
+// Xform
+
+function buildXform( object, geometry, material ) {
+
+	const name = 'Object_' + object.id;
+	const transform = buildMatrix( object.matrixWorld );
+
+	if ( object.matrixWorld.determinant() < 0 ) {
+
+		console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', object );
+
+	}
+
+	return `def Xform "${ name }" (
+	prepend references = @./geometries/Geometry_${ geometry.id }.usda@</Geometry>
+	prepend apiSchemas = ["MaterialBindingAPI"]
+)
+{
+	matrix4d xformOp:transform = ${ transform }
+	uniform token[] xformOpOrder = ["xformOp:transform"]
+
+	rel material:binding = </Materials/Material_${ material.id }>
+}
+
+`;
+
+}
+
+function buildMatrix( matrix ) {
+
+	const array = matrix.elements;
+
+	return `( ${ buildMatrixRow( array, 0 ) }, ${ buildMatrixRow( array, 4 ) }, ${ buildMatrixRow( array, 8 ) }, ${ buildMatrixRow( array, 12 ) } )`;
+
+}
+
+function buildMatrixRow( array, offset ) {
+
+	return `(${ array[ offset + 0 ] }, ${ array[ offset + 1 ] }, ${ array[ offset + 2 ] }, ${ array[ offset + 3 ] })`;
+
+}
+
+// Mesh
+
+function buildMeshObject( geometry ) {
+
+	const mesh = buildMesh( geometry );
+	return `
+def "Geometry"
+{
+${mesh}
+}
+`;
+
+}
+
+function buildMesh( geometry ) {
+
+	const name = 'Geometry';
+	const attributes = geometry.attributes;
+	const count = attributes.position.count;
+
+	return `
+	def Mesh "${ name }"
+	{
+		int[] faceVertexCounts = [${ buildMeshVertexCount( geometry ) }]
+		int[] faceVertexIndices = [${ buildMeshVertexIndices( geometry ) }]
+		normal3f[] normals = [${ buildVector3Array( attributes.normal, count )}] (
+			interpolation = "vertex"
+		)
+		point3f[] points = [${ buildVector3Array( attributes.position, count )}]
+${ buildPrimvars( attributes, count ) }
+		uniform token subdivisionScheme = "none"
+	}
+`;
+
+}
+
+function buildMeshVertexCount( geometry ) {
+
+	const count = geometry.index !== null ? geometry.index.count : geometry.attributes.position.count;
+
+	return Array( count / 3 ).fill( 3 ).join( ', ' );
+
+}
+
+function buildMeshVertexIndices( geometry ) {
+
+	const index = geometry.index;
+	const array = [];
+
+	if ( index !== null ) {
+
+		for ( let i = 0; i < index.count; i ++ ) {
+
+			array.push( index.getX( i ) );
+
+		}
+
+	} else {
+
+		const length = geometry.attributes.position.count;
+
+		for ( let i = 0; i < length; i ++ ) {
+
+			array.push( i );
+
+		}
+
+	}
+
+	return array.join( ', ' );
+
+}
+
+function buildVector3Array( attribute, count ) {
+
+	if ( attribute === undefined ) {
+
+		console.warn( 'USDZExporter: Normals missing.' );
+		return Array( count ).fill( '(0, 0, 0)' ).join( ', ' );
+
+	}
+
+	const array = [];
+
+	for ( let i = 0; i < attribute.count; i ++ ) {
+
+		const x = attribute.getX( i );
+		const y = attribute.getY( i );
+		const z = attribute.getZ( i );
+
+		array.push( `(${ x.toPrecision( PRECISION ) }, ${ y.toPrecision( PRECISION ) }, ${ z.toPrecision( PRECISION ) })` );
+
+	}
+
+	return array.join( ', ' );
+
+}
+
+function buildVector2Array( attribute, count ) {
+
+	if ( attribute === undefined ) {
+
+		console.warn( 'USDZExporter: UVs missing.' );
+		return Array( count ).fill( '(0, 0)' ).join( ', ' );
+
+	}
+
+	const array = [];
+
+	for ( let i = 0; i < attribute.count; i ++ ) {
+
+		const x = attribute.getX( i );
+		const y = attribute.getY( i );
+
+		array.push( `(${ x.toPrecision( PRECISION ) }, ${ 1 - y.toPrecision( PRECISION ) })` );
+
+	}
+
+	return array.join( ', ' );
+
+}
+
+function buildPrimvars( attributes, count ) {
+
+	let string = '';
+
+	for ( let i = 0; i < 4; i ++ ) {
+
+		const id = ( i > 0 ? i : '' );
+		const attribute = attributes[ 'uv' + id ];
+
+		if ( attribute !== undefined ) {
+
+			string += `
+		texCoord2f[] primvars:st${ id } = [${ buildVector2Array( attribute, count )}] (
+			interpolation = "vertex"
+		)`;
+
+		}
+
+	}
+
+	return string;
+
+}
+
+// Materials
+
+function buildMaterials( materials, textures, quickLookCompatible = false ) {
+
+	const array = [];
+
+	for ( const uuid in materials ) {
+
+		const material = materials[ uuid ];
+
+		array.push( buildMaterial( material, textures, quickLookCompatible ) );
+
+	}
+
+	return `def "Materials"
+{
+${ array.join( '' ) }
+}
+
+`;
+
+}
+
+function buildMaterial( material, textures, quickLookCompatible = false ) {
+
+	// https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
+
+	const pad = '			';
+	const inputs = [];
+	const samplers = [];
+
+	function buildTexture( texture, mapType, color ) {
+
+		const id = texture.source.id + '_' + texture.flipY;
+
+		textures[ id ] = texture;
+
+		const uv = texture.channel > 0 ? 'st' + texture.channel : 'st';
+
+		const WRAPPINGS = {
+			1000: 'repeat', // RepeatWrapping
+			1001: 'clamp', // ClampToEdgeWrapping
+			1002: 'mirror' // MirroredRepeatWrapping
+		};
+
+		const repeat = texture.repeat.clone();
+		const offset = texture.offset.clone();
+		const rotation = texture.rotation;
+
+		// rotation is around the wrong point. after rotation we need to shift offset again so that we're rotating around the right spot
+		const xRotationOffset = Math.sin( rotation );
+		const yRotationOffset = Math.cos( rotation );
+
+		// texture coordinates start in the opposite corner, need to correct
+		offset.y = 1 - offset.y - repeat.y;
+
+		// turns out QuickLook is buggy and interprets texture repeat inverted/applies operations in a different order.
+		// Apple Feedback: 	FB10036297 and FB11442287
+		if ( quickLookCompatible ) {
+
+			// This is NOT correct yet in QuickLook, but comes close for a range of models.
+			// It becomes more incorrect the bigger the offset is
+
+			offset.x = offset.x / repeat.x;
+			offset.y = offset.y / repeat.y;
+
+			offset.x += xRotationOffset / repeat.x;
+			offset.y += yRotationOffset - 1;
+
+		} else {
+
+			// results match glTF results exactly. verified correct in usdview.
+			offset.x += xRotationOffset * repeat.x;
+			offset.y += ( 1 - yRotationOffset ) * repeat.y;
+
+		}
+
+		return `
+		def Shader "PrimvarReader_${ mapType }"
+		{
+			uniform token info:id = "UsdPrimvarReader_float2"
+			float2 inputs:fallback = (0.0, 0.0)
+			token inputs:varname = "${ uv }"
+			float2 outputs:result
+		}
+
+		def Shader "Transform2d_${ mapType }"
+		{
+			uniform token info:id = "UsdTransform2d"
+			token inputs:in.connect = </Materials/Material_${ material.id }/PrimvarReader_${ mapType }.outputs:result>
+			float inputs:rotation = ${ ( rotation * ( 180 / Math.PI ) ).toFixed( PRECISION ) }
+			float2 inputs:scale = ${ buildVector2( repeat ) }
+			float2 inputs:translation = ${ buildVector2( offset ) }
+			float2 outputs:result
+		}
+
+		def Shader "Texture_${ texture.id }_${ mapType }"
+		{
+			uniform token info:id = "UsdUVTexture"
+			asset inputs:file = @textures/Texture_${ id }.png@
+			float2 inputs:st.connect = </Materials/Material_${ material.id }/Transform2d_${ mapType }.outputs:result>
+			${ color !== undefined ? 'float4 inputs:scale = ' + buildColor4( color ) : '' }
+			token inputs:sourceColorSpace = "${ texture.colorSpace === THREE.NoColorSpace ? 'raw' : 'sRGB' }"
+			token inputs:wrapS = "${ WRAPPINGS[ texture.wrapS ] }"
+			token inputs:wrapT = "${ WRAPPINGS[ texture.wrapT ] }"
+			float outputs:r
+			float outputs:g
+			float outputs:b
+			float3 outputs:rgb
+			${ material.transparent || material.alphaTest > 0.0 ? 'float outputs:a' : '' }
+		}`;
+
+	}
+
+
+	if ( material.side === THREE.DoubleSide ) {
+
+		console.warn( 'THREE.USDZExporter: USDZ does not support double sided materials', material );
+
+	}
+
+	if ( material.map !== null ) {
+
+		inputs.push( `${ pad }color3f inputs:diffuseColor.connect = </Materials/Material_${ material.id }/Texture_${ material.map.id }_diffuse.outputs:rgb>` );
+
+		if ( material.transparent ) {
+
+			inputs.push( `${ pad }float inputs:opacity.connect = </Materials/Material_${ material.id }/Texture_${ material.map.id }_diffuse.outputs:a>` );
+
+		} else if ( material.alphaTest > 0.0 ) {
+
+			inputs.push( `${ pad }float inputs:opacity.connect = </Materials/Material_${ material.id }/Texture_${ material.map.id }_diffuse.outputs:a>` );
+			inputs.push( `${ pad }float inputs:opacityThreshold = ${material.alphaTest}` );
+
+		}
+
+		samplers.push( buildTexture( material.map, 'diffuse', material.color ) );
+
+	} else {
+
+		inputs.push( `${ pad }color3f inputs:diffuseColor = ${ buildColor( material.color ) }` );
+
+	}
+
+	if ( material.emissiveMap !== null ) {
+
+		inputs.push( `${ pad }color3f inputs:emissiveColor.connect = </Materials/Material_${ material.id }/Texture_${ material.emissiveMap.id }_emissive.outputs:rgb>` );
+
+		samplers.push( buildTexture( material.emissiveMap, 'emissive' ) );
+
+	} else if ( material.emissive.getHex() > 0 ) {
+
+		inputs.push( `${ pad }color3f inputs:emissiveColor = ${ buildColor( material.emissive ) }` );
+
+	}
+
+	if ( material.normalMap !== null ) {
+
+		inputs.push( `${ pad }normal3f inputs:normal.connect = </Materials/Material_${ material.id }/Texture_${ material.normalMap.id }_normal.outputs:rgb>` );
+
+		samplers.push( buildTexture( material.normalMap, 'normal' ) );
+
+	}
+
+	if ( material.aoMap !== null ) {
+
+		inputs.push( `${ pad }float inputs:occlusion.connect = </Materials/Material_${ material.id }/Texture_${ material.aoMap.id }_occlusion.outputs:r>` );
+
+		samplers.push( buildTexture( material.aoMap, 'occlusion' ) );
+
+	}
+
+	if ( material.roughnessMap !== null && material.roughness === 1 ) {
+
+		inputs.push( `${ pad }float inputs:roughness.connect = </Materials/Material_${ material.id }/Texture_${ material.roughnessMap.id }_roughness.outputs:g>` );
+
+		samplers.push( buildTexture( material.roughnessMap, 'roughness' ) );
+
+	} else {
+
+		inputs.push( `${ pad }float inputs:roughness = ${ material.roughness }` );
+
+	}
+
+	if ( material.metalnessMap !== null && material.metalness === 1 ) {
+
+		inputs.push( `${ pad }float inputs:metallic.connect = </Materials/Material_${ material.id }/Texture_${ material.metalnessMap.id }_metallic.outputs:b>` );
+
+		samplers.push( buildTexture( material.metalnessMap, 'metallic' ) );
+
+	} else {
+
+		inputs.push( `${ pad }float inputs:metallic = ${ material.metalness }` );
+
+	}
+
+	if ( material.alphaMap !== null ) {
+
+		inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.alphaMap.id}_opacity.outputs:r>` );
+		inputs.push( `${pad}float inputs:opacityThreshold = 0.0001` );
+
+		samplers.push( buildTexture( material.alphaMap, 'opacity' ) );
+
+	} else {
+
+		inputs.push( `${pad}float inputs:opacity = ${material.opacity}` );
+
+	}
+
+	if ( material.isMeshPhysicalMaterial ) {
+
+		inputs.push( `${ pad }float inputs:clearcoat = ${ material.clearcoat }` );
+		inputs.push( `${ pad }float inputs:clearcoatRoughness = ${ material.clearcoatRoughness }` );
+		inputs.push( `${ pad }float inputs:ior = ${ material.ior }` );
+
+	}
+
+	return `
+	def Material "Material_${ material.id }"
+	{
+		def Shader "PreviewSurface"
+		{
+			uniform token info:id = "UsdPreviewSurface"
+${ inputs.join( '\n' ) }
+			int inputs:useSpecularWorkflow = 0
+			token outputs:surface
+		}
+
+		token outputs:surface.connect = </Materials/Material_${ material.id }/PreviewSurface.outputs:surface>
+
+${ samplers.join( '\n' ) }
+
+	}
+`;
+
+}
+
+function buildColor( color ) {
+
+	return `(${ color.r }, ${ color.g }, ${ color.b })`;
+
+}
+
+function buildColor4( color ) {
+
+	return `(${ color.r }, ${ color.g }, ${ color.b }, 1.0)`;
+
+}
+
+function buildVector2( vector ) {
+
+	return `(${ vector.x }, ${ vector.y })`;
+
+}
+
+
+function buildCamera( camera ) {
+
+	const name = camera.name ? camera.name : 'Camera_' + camera.id;
+
+	const transform = buildMatrix( camera.matrixWorld );
+
+	if ( camera.matrixWorld.determinant() < 0 ) {
+
+		console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', camera );
+
+	}
+
+	if ( camera.isOrthographicCamera ) {
+
+		return `def Camera "${name}"
+		{
+			matrix4d xformOp:transform = ${ transform }
+			uniform token[] xformOpOrder = ["xformOp:transform"]
+
+			float2 clippingRange = (${ camera.near.toPrecision( PRECISION ) }, ${ camera.far.toPrecision( PRECISION ) })
+			float horizontalAperture = ${ ( ( Math.abs( camera.left ) + Math.abs( camera.right ) ) * 10 ).toPrecision( PRECISION ) }
+			float verticalAperture = ${ ( ( Math.abs( camera.top ) + Math.abs( camera.bottom ) ) * 10 ).toPrecision( PRECISION ) }
+			token projection = "orthographic"
+		}
+	
+	`;
+
+	} else {
+
+		return `def Camera "${name}"
+		{
+			matrix4d xformOp:transform = ${ transform }
+			uniform token[] xformOpOrder = ["xformOp:transform"]
+
+			float2 clippingRange = (${ camera.near.toPrecision( PRECISION ) }, ${ camera.far.toPrecision( PRECISION ) })
+			float focalLength = ${ camera.getFocalLength().toPrecision( PRECISION ) }
+			float focusDistance = ${ camera.focus.toPrecision( PRECISION ) }
+			float horizontalAperture = ${ camera.getFilmWidth().toPrecision( PRECISION ) }
+			token projection = "perspective"
+			float verticalAperture = ${ camera.getFilmHeight().toPrecision( PRECISION ) }
+		}
+	
+	`;
+
+	}
+
+}
+
+export { USDZExporter };