|
99 | 99 | </head> |
100 | 100 | <body> |
101 | 101 | <div id="info"> |
102 | | - <a href="http://threejs.org" target="_blank">threejs</a> - WebGL - Multiple Render Targets<br/> |
103 | | - Renders geometry into a G-Buffer.<br/> |
104 | | - Visualized here is the color and normal data from the G-Buffer.<br/> |
105 | | - Created by <a href="http://twitter.com/mattdesl" target="_blank">@mattdesl</a>. |
| 102 | + <a href="http://threejs.org" target="_blank">threejs</a> webgl - Multiple RenderTargets |
106 | 103 | </div> |
107 | 104 |
|
108 | 105 | <!-- Import maps polyfill --> |
|
123 | 120 |
|
124 | 121 | import WebGL from './jsm/capabilities/WebGL.js'; |
125 | 122 | import { OrbitControls } from './jsm/controls/OrbitControls.js'; |
| 123 | + import { GUI } from './jsm/libs/lil-gui.module.min.js'; |
126 | 124 |
|
127 | 125 | let camera, scene, renderer, controls; |
128 | 126 | let renderTarget; |
129 | 127 | let postScene, postCamera; |
130 | 128 |
|
| 129 | + const parameters = { |
| 130 | + samples: 4, |
| 131 | + wireframe: false |
| 132 | + }; |
| 133 | + |
| 134 | + const gui = new GUI(); |
| 135 | + gui.add( parameters, 'samples', 0, 4 ).step( 1 ); |
| 136 | + gui.add( parameters, 'wireframe' ); |
| 137 | + gui.onChange( render ); |
| 138 | + |
131 | 139 | init(); |
132 | 140 |
|
133 | 141 | function init() { |
|
168 | 176 | // Scene setup |
169 | 177 |
|
170 | 178 | scene = new THREE.Scene(); |
| 179 | + scene.background = new THREE.Color( 0x222222 ); |
171 | 180 |
|
172 | | - camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10 ); |
| 181 | + camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 ); |
173 | 182 | camera.position.z = 4; |
174 | 183 |
|
175 | | - const diffuse = new THREE.TextureLoader().load( |
176 | | - |
177 | | - 'textures/brick_diffuse.jpg', |
178 | | - |
179 | | - function () { |
180 | | - |
181 | | - // ready to render |
182 | | - render(); |
183 | | - |
184 | | - } |
185 | | - |
186 | | - ); |
| 184 | + const loader = new THREE.TextureLoader(); |
187 | 185 |
|
188 | | - diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping; |
| 186 | + const diffuse = loader.load( 'textures/hardwood2_diffuse.jpg', render ); |
| 187 | + diffuse.wrapS = THREE.RepeatWrapping; |
| 188 | + diffuse.wrapT = THREE.RepeatWrapping; |
189 | 189 |
|
190 | 190 | scene.add( new THREE.Mesh( |
191 | | - new THREE.TorusKnotGeometry( 1, 0.3, 128, 64 ), |
| 191 | + new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ), |
192 | 192 | new THREE.RawShaderMaterial( { |
193 | 193 | vertexShader: document.querySelector( '#gbuffer-vert' ).textContent.trim(), |
194 | 194 | fragmentShader: document.querySelector( '#gbuffer-frag' ).textContent.trim(), |
|
222 | 222 |
|
223 | 223 | controls = new OrbitControls( camera, renderer.domElement ); |
224 | 224 | controls.addEventListener( 'change', render ); |
225 | | - controls.enableZoom = false; |
226 | | - controls.screenSpacePanning = true; |
| 225 | + //controls.enableZoom = false; |
227 | 226 |
|
228 | 227 | window.addEventListener( 'resize', onWindowResize ); |
229 | 228 |
|
|
245 | 244 |
|
246 | 245 | function render() { |
247 | 246 |
|
| 247 | + renderTarget.samples = parameters.samples; |
| 248 | + |
| 249 | + scene.traverse( function ( child ) { |
| 250 | + |
| 251 | + if ( child.material !== undefined ) { |
| 252 | + |
| 253 | + child.material.wireframe = parameters.wireframe; |
| 254 | + |
| 255 | + } |
| 256 | + |
| 257 | + } ); |
| 258 | + |
248 | 259 | // render scene into target |
249 | 260 | renderer.setRenderTarget( renderTarget ); |
250 | 261 | renderer.render( scene, camera ); |
|
0 commit comments