├── .gitignore ├── LICENSE ├── README.md └── docs ├── index.html ├── shadows.mov └── shadows.mov.gif /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 wallabyway 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ForgeViewer - Shadows and Lighting 2 | 3 | UPDATE: material background: http://help.autodesk.com/view/ARENDERING/ENU/?guid=GUID-97CC0DD3-35A8-4D8F-80A0-B1C4AD54D2B0 4 | 5 | How to add shadows to Forge-Viewer 6 | 7 | 8 | 9 | 10 | ### Steps 11 | 12 | ##### 1. Set Viewer to latest dev: 13 | ``` 14 | https://autodeskviewer.com/viewers-dev/latest/viewer3D.js 15 | ``` 16 | 17 | ### UPDATE: 18 | Actually, use LMV v7.8 or lower. 19 | If you need to use latest LMV (v7.9+), then switch off of webGLv2.0 when you start LMV, like this: 20 | 21 | ``` 22 | viewer.start(undefined, undefined, undefined, undefined, { 23 | webglInitParams: { 24 | useWebGL2: false 25 | } 26 | }); 27 | ``` 28 | 29 | A production fix is coming. Ask about progress of LMV-6135. 30 | 31 | 32 | ##### 2. Set a nice environment: 33 | 34 | ``` 35 | viewer=NOP_VIEWER; 36 | viewer.setLightPreset(1); 37 | ``` 38 | 39 | ##### 3. Turn on Hard Shadows: 40 | 41 | ``` 42 | viewer.impl.toggleShadows(true); 43 | viewer.impl.setShadowLightDirection(new THREE.Vector3(-1,2,1)) 44 | ``` 45 | 46 | 47 | 48 | ##### 4. Turn on Ambient Shadows: 49 | 50 | ``` 51 | viewer.impl.renderer().setAOOptions( 10, 0.1 ); 52 | ``` 53 | 54 | > ie. setAOOptions(radius, darkness) 55 | 56 | 57 | ##### 5. Set to a subtle Perspective: 58 | ``` 59 | viewer.navigation.toPerspective(); 60 | viewer.setFOV(25); 61 | ``` 62 | 63 | ##### Bonus: mouse-move shadows 64 | 65 | ``` 66 | function moveShadow(x,y){ viewer.impl.setShadowLightDirection(new THREE.Vector3(x-300,y-400,600)) } 67 | 68 | addEventListener("mousemove",function(e){moveShadow(e.clientX,e.clientY)}) 69 | ``` 70 | 71 | - 72 | 73 | 74 | # Fusion360 content Examples 75 | 76 | 77 | #### [Jeldwen Doors / Windows](https://youtu.be/lNlG00ZVUyI?t=4523) - Adding AO and hard shadows... 78 | 79 | ![](https://user-images.githubusercontent.com/440241/52377772-dc588c00-2a33-11e9-9a35-5e2d8539a361.png) 80 | 81 | 82 | #### [Steelcase Chair Assembly](https://myhub.autodesk360.com/ue29c3308/g/shares/SH7f1edQT22b515c761e167f79f6b3132118?viewState=NoIgbgDAdAjCA0IDeAdEAXAngBwKZoC40ARXAZwEsBzAOzXjQEMyzd1C0AzAJl2%2B4DGANiEBaTgBYArAE5REgOyzRAIym4BogcIUwJahQGZGhtAF8QAXSA) - with sunset/studio Environment lighting 83 | 84 | Another one: [Table Assembly Animation](http://assemblyinstructionviewer.steelcase.com/Viewer/AssemblyDirectionViewer?AssemblyDirectionID=13588) 85 | 86 | Jeldwen website: http://assemblyinstructionviewer.steelcase.com/Viewer/AssemblyDirectionViewer?AssemblyDirectionID=3171 87 | 88 | 89 | 90 | 91 |
92 | 93 | 94 | ### Set AO scale, for Fusion files: 95 | 96 | ``` 97 | viewer.impl.renderer().setAOOptions(300, 0.7); 98 | ``` 99 | 100 | 101 | # BONUS Section 102 | 103 | ### Sharper SAO (Scalable Ambient Obscurancy) 104 | 105 | 1. pull the latest version of viewer3D.js (https://developer.api.autodesk.com/modelderivative/v2/viewers/6.5.2/viewer3D.js) 106 | 2. search/replace `define SCALE` and change scale value from `(2)` to `(1)` 107 | 108 | This will have a small rendering performance hit on "pixel fill rate" (so, zoom-in full screen and GPU slow down might happen when 'smooth navigation' flag is off). 109 | 110 | To use the modified viewer, just use "Chrome-ReDirector" from the chrome webstore. 111 | 112 | 113 | ### Sharper IBL Reflections (Image Based Light, ie. skybox) 114 | Forge Viewer environment maps (.DDS files) are only 128px x 128px resolution ... TINY! So reflections looks blurry and metal looks dusty. 115 | So, to improve reflections, we need to make them sharper. 116 | 117 | To do that, we need to create our own .DDS files, using this v. CMD tool: https://github.com/wallabyway/cubemapgen 118 | It quickly converts your custom .HDR or .EXR skybox file into a .DDS file for Forge Viewer. 119 | 120 | Here's sharper reflections with a custom "RiverBank.EXR" environment map at 256px x 256px. 121 | 122 | Looking better already !!! 123 | ![sharper-SAO+IBL](https://user-images.githubusercontent.com/440241/54461156-071bbb80-4729-11e9-86b6-30b249b7f631.jpg) 124 | 125 | Also, with sharper SAO. 126 | 127 | 128 | ### Changing line style: 129 | 130 | ``` 131 | viewer.impl.setPostProcessParameter("style", "edging"); 132 | viewer.impl.setPostProcessParameter("brightness",1.0); 133 | 134 | ``` 135 | ![](https://user-images.githubusercontent.com/440241/51944553-340e4c00-23d1-11e9-9c5e-7c4eb9e34674.png) 136 | 137 | 138 | 139 | 140 | ## Improving Materials 141 | 142 | This is the general workflow, in Fusion... 143 | 144 | ![](https://user-images.githubusercontent.com/440241/51944564-396b9680-23d1-11e9-9e5b-c94067b5b6f0.png) 145 | 146 | #### 1. Use Fusion 'Render mode' to pick better materials 147 | ![](https://user-images.githubusercontent.com/440241/51944571-3f617780-23d1-11e9-80dd-7e8dd0f1f54f.png) 148 | 149 | #### 2. How to add custom materials / Decals 150 | 151 | - Adding a custom texture, like cardboard : [YOUTUBE](https://www.youtube.com/watch?v=D9AS5rQhtPo) 152 | - adding decals: [YOUTUBE](https://www.youtube.com/watch?v=ASLb5BesBrg) 153 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wallabyway/adding-shadows/88389b35cd48aecd389cfb56bd6866526c2f5288/docs/index.html -------------------------------------------------------------------------------- /docs/shadows.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wallabyway/adding-shadows/88389b35cd48aecd389cfb56bd6866526c2f5288/docs/shadows.mov -------------------------------------------------------------------------------- /docs/shadows.mov.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wallabyway/adding-shadows/88389b35cd48aecd389cfb56bd6866526c2f5288/docs/shadows.mov.gif --------------------------------------------------------------------------------