webgl_postprocessing_nodes.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - postprocessing with nodes</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info">
  11. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Post-Processing
  12. </div>
  13. <script type="module">
  14. import * as THREE from '../build/three.module.js';
  15. import { GUI } from './jsm/libs/dat.gui.module.js';
  16. import * as Nodes from './jsm/nodes/Nodes.js';
  17. var camera, scene, renderer;
  18. var object, light, nodepost;
  19. var gui;
  20. var clock = new THREE.Clock();
  21. var frame = new Nodes.NodeFrame();
  22. var param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'color-adjustment' };
  23. var textureLoader = new THREE.TextureLoader();
  24. var lensflare2 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
  25. lensflare2.wrapS = lensflare2.wrapT = THREE.RepeatWrapping;
  26. var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
  27. decalNormal.wrapS = decalNormal.wrapT = THREE.RepeatWrapping;
  28. init();
  29. animate();
  30. function clearGui() {
  31. if ( gui ) gui.destroy();
  32. gui = new GUI();
  33. gui.add( param, 'example', {
  34. 'basic / color-adjustment': 'color-adjustment',
  35. 'basic / blends': 'blends',
  36. 'basic / fade': 'fade',
  37. 'basic / invert': 'invert',
  38. 'basic / blur': 'blur',
  39. 'adv / motion-blur': 'motion-blur',
  40. 'adv / saturation': 'saturation',
  41. 'adv / refraction': 'refraction',
  42. 'adv / mosaic': 'mosaic'
  43. } ).onFinishChange( function () {
  44. updateMaterial();
  45. } );
  46. gui.open();
  47. }
  48. function addGui( name, value, callback, isColor, min, max ) {
  49. var node;
  50. param[ name ] = value;
  51. if ( isColor ) {
  52. node = gui.addColor( param, name ).onChange( function () {
  53. callback( param[ name ] );
  54. } );
  55. } else if ( typeof value == 'object' ) {
  56. param[ name ] = value[ Object.keys( value )[ 0 ] ];
  57. node = gui.add( param, name, value ).onChange( function () {
  58. callback( param[ name ] );
  59. } );
  60. } else {
  61. node = gui.add( param, name, min, max ).onChange( function () {
  62. callback( param[ name ] );
  63. } );
  64. }
  65. return node;
  66. }
  67. function updateMaterial() {
  68. var name = param.example;
  69. clearGui();
  70. switch ( name ) {
  71. case 'color-adjustment':
  72. // POST
  73. var screen = new Nodes.ScreenNode();
  74. var hue = new Nodes.FloatNode();
  75. var sataturation = new Nodes.FloatNode( 1 );
  76. var vibrance = new Nodes.FloatNode();
  77. var brightness = new Nodes.FloatNode( 0 );
  78. var contrast = new Nodes.FloatNode( 1 );
  79. var hueNode = new Nodes.ColorAdjustmentNode( screen, hue, Nodes.ColorAdjustmentNode.HUE );
  80. var satNode = new Nodes.ColorAdjustmentNode( hueNode, sataturation, Nodes.ColorAdjustmentNode.SATURATION );
  81. var vibranceNode = new Nodes.ColorAdjustmentNode( satNode, vibrance, Nodes.ColorAdjustmentNode.VIBRANCE );
  82. var brightnessNode = new Nodes.ColorAdjustmentNode( vibranceNode, brightness, Nodes.ColorAdjustmentNode.BRIGHTNESS );
  83. var contrastNode = new Nodes.ColorAdjustmentNode( brightnessNode, contrast, Nodes.ColorAdjustmentNode.CONTRAST );
  84. nodepost.output = contrastNode;
  85. // GUI
  86. addGui( 'hue', hue.value, function ( val ) {
  87. hue.value = val;
  88. }, false, 0, Math.PI * 2 );
  89. addGui( 'saturation', sataturation.value, function ( val ) {
  90. sataturation.value = val;
  91. }, false, 0, 2 );
  92. addGui( 'vibrance', vibrance.value, function ( val ) {
  93. vibrance.value = val;
  94. }, false, - 1, 1 );
  95. addGui( 'brightness', brightness.value, function ( val ) {
  96. brightness.value = val;
  97. }, false, 0, .5 );
  98. addGui( 'contrast', contrast.value, function ( val ) {
  99. contrast.value = val;
  100. }, false, 0, 2 );
  101. break;
  102. case 'fade':
  103. // POST
  104. var color = new Nodes.ColorNode( 0xFFFFFF );
  105. var percent = new Nodes.FloatNode( .5 );
  106. var fade = new Nodes.MathNode(
  107. new Nodes.ScreenNode(),
  108. color,
  109. percent,
  110. Nodes.MathNode.MIX
  111. );
  112. nodepost.output = fade;
  113. // GUI
  114. addGui( 'color', color.value.getHex(), function ( val ) {
  115. color.value.setHex( val );
  116. }, true );
  117. addGui( 'fade', percent.value, function ( val ) {
  118. percent.value = val;
  119. }, false, 0, 1 );
  120. break;
  121. case 'invert':
  122. // POST
  123. var alpha = new Nodes.FloatNode( 1 );
  124. var screen = new Nodes.ScreenNode();
  125. var inverted = new Nodes.MathNode( screen, Nodes.MathNode.INVERT );
  126. var fade = new Nodes.MathNode(
  127. screen,
  128. inverted,
  129. alpha,
  130. Nodes.MathNode.MIX
  131. );
  132. nodepost.output = fade;
  133. // GUI
  134. addGui( 'alpha', alpha.value, function ( val ) {
  135. alpha.value = val;
  136. }, false, 0, 1 );
  137. break;
  138. case 'blends':
  139. // POST
  140. var multiply = new Nodes.OperatorNode(
  141. new Nodes.ScreenNode(),
  142. new Nodes.TextureNode( lensflare2 ),
  143. Nodes.OperatorNode.ADD
  144. );
  145. nodepost.output = multiply;
  146. // GUI
  147. addGui( 'blend', {
  148. 'addition': Nodes.OperatorNode.ADD,
  149. 'subtract': Nodes.OperatorNode.SUB,
  150. 'multiply': Nodes.OperatorNode.MUL,
  151. 'division': Nodes.OperatorNode.DIV
  152. }, function ( val ) {
  153. multiply.op = val;
  154. nodepost.needsUpdate = true;
  155. } );
  156. break;
  157. case 'saturation':
  158. // PASS
  159. var screen = new Nodes.ScreenNode();
  160. var sat = new Nodes.FloatNode( 0 );
  161. var satrgb = new Nodes.FunctionNode( [
  162. "vec3 satrgb( vec3 rgb, float adjustment ) {",
  163. // include luminance function from LuminanceNode
  164. " vec3 intensity = vec3( luminance( rgb ) );",
  165. " return mix( intensity, rgb, adjustment );",
  166. "}"
  167. ].join( "\n" ), [ Nodes.LuminanceNode.Nodes.luminance ] );
  168. var saturation = new Nodes.FunctionCallNode( satrgb );
  169. saturation.inputs.rgb = screen;
  170. saturation.inputs.adjustment = sat;
  171. nodepost.output = saturation;
  172. // GUI
  173. addGui( 'saturation', sat.value, function ( val ) {
  174. sat.value = val;
  175. }, false, 0, 2 );
  176. break;
  177. case 'refraction':
  178. // POST
  179. var normal = new Nodes.TextureNode( decalNormal );
  180. var normalXY = new Nodes.SwitchNode( normal, 'xy' );
  181. var scale = new Nodes.FloatNode( .5 );
  182. var normalXYFlip = new Nodes.MathNode(
  183. normalXY,
  184. Nodes.MathNode.INVERT
  185. );
  186. var offsetNormal = new Nodes.OperatorNode(
  187. normalXYFlip,
  188. new Nodes.FloatNode( .5 ),
  189. Nodes.OperatorNode.ADD
  190. );
  191. var scaleTexture = new Nodes.OperatorNode(
  192. new Nodes.SwitchNode( normal, 'z' ),
  193. offsetNormal,
  194. Nodes.OperatorNode.MUL
  195. );
  196. var scaleNormal = new Nodes.MathNode(
  197. new Nodes.FloatNode( 1 ),
  198. scaleTexture,
  199. scale,
  200. Nodes.MathNode.MIX
  201. );
  202. var offsetCoord = new Nodes.OperatorNode(
  203. new Nodes.UVNode(),
  204. scaleNormal,
  205. Nodes.OperatorNode.MUL
  206. );
  207. var screen = new Nodes.ScreenNode( offsetCoord );
  208. nodepost.output = screen;
  209. // GUI
  210. addGui( 'scale', scale.value, function ( val ) {
  211. scale.value = val;
  212. }, false, 0, 1 );
  213. addGui( 'invert', false, function ( val ) {
  214. offsetNormal.a = val ? normalXYFlip : normalXY;
  215. nodepost.needsUpdate = true;
  216. } );
  217. break;
  218. case 'motion-blur':
  219. // POST
  220. var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
  221. var screen = new Nodes.ScreenNode();
  222. var previousFrame = new Nodes.RTTNode( size.width, size.height, screen );
  223. var motionBlur = new Nodes.MathNode(
  224. previousFrame,
  225. screen,
  226. new Nodes.FloatNode( .5 ),
  227. Nodes.MathNode.MIX
  228. );
  229. var currentFrame = new Nodes.RTTNode( size.width, size.height, motionBlur );
  230. currentFrame.saveTo = previousFrame;
  231. nodepost.output = currentFrame;
  232. break;
  233. case 'mosaic':
  234. // POST
  235. var scale = new Nodes.FloatNode( 128 );
  236. var fade = new Nodes.FloatNode( 1 );
  237. var uv = new Nodes.UVNode();
  238. var blocks = new Nodes.OperatorNode(
  239. uv,
  240. scale,
  241. Nodes.OperatorNode.MUL
  242. );
  243. var blocksSize = new Nodes.MathNode(
  244. blocks,
  245. Nodes.MathNode.FLOOR
  246. );
  247. var mosaicUV = new Nodes.OperatorNode(
  248. blocksSize,
  249. scale,
  250. Nodes.OperatorNode.DIV
  251. );
  252. var fadeScreen = new Nodes.MathNode(
  253. uv,
  254. mosaicUV,
  255. fade,
  256. Nodes.MathNode.MIX
  257. );
  258. nodepost.output = new Nodes.ScreenNode( fadeScreen );
  259. // GUI
  260. addGui( 'scale', scale.value, function ( val ) {
  261. scale.value = val;
  262. }, false, 16, 1024 );
  263. addGui( 'fade', fade.value, function ( val ) {
  264. fade.value = val;
  265. }, false, 0, 1 );
  266. addGui( 'mask', false, function ( val ) {
  267. fadeScreen.c = val ? new Nodes.TextureNode( lensflare2 ) : fade;
  268. nodepost.needsUpdate = true;
  269. } );
  270. break;
  271. case 'blur':
  272. // POST
  273. var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
  274. var blurScreen = new Nodes.BlurNode( new Nodes.ScreenNode() );
  275. blurScreen.size = new THREE.Vector2( size.width, size.height );
  276. nodepost.output = blurScreen;
  277. // GUI
  278. addGui( 'blurX', blurScreen.radius.x, function ( val ) {
  279. blurScreen.radius.x = val;
  280. }, false, 0, 15 );
  281. addGui( 'blurY', blurScreen.radius.y, function ( val ) {
  282. blurScreen.radius.y = val;
  283. }, false, 0, 15 );
  284. break;
  285. }
  286. nodepost.needsUpdate = true;
  287. // test serialization
  288. /*
  289. var library = {};
  290. library[ lensflare2.uuid ] = lensflare2;
  291. library[ decalNormal.uuid ] = decalNormal;
  292. var json = nodepost.toJSON();
  293. nodepost.output = new NodeMaterialLoader( null, library ).parse( json ).value;
  294. */
  295. }
  296. function init() {
  297. renderer = new THREE.WebGLRenderer();
  298. renderer.setPixelRatio( window.devicePixelRatio );
  299. renderer.setSize( window.innerWidth, window.innerHeight );
  300. document.body.appendChild( renderer.domElement );
  301. nodepost = new Nodes.NodePostProcessing( renderer );
  302. //
  303. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  304. camera.position.z = 400;
  305. scene = new THREE.Scene();
  306. scene.fog = new THREE.Fog( 0x0066FF, 1, 1000 );
  307. object = new THREE.Object3D();
  308. scene.add( object );
  309. var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
  310. for ( var i = 0; i < 100; i ++ ) {
  311. var material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), flatShading: true } );
  312. var mesh = new THREE.Mesh( geometry, material );
  313. mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
  314. mesh.position.multiplyScalar( Math.random() * 400 );
  315. mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
  316. mesh.scale.x = mesh.scale.y = mesh.scale.z = 10 + ( Math.random() * 40 );
  317. object.add( mesh );
  318. }
  319. scene.add( new THREE.AmbientLight( 0x999999 ) );
  320. light = new THREE.DirectionalLight( 0xffffff );
  321. light.position.set( 1, 1, 1 );
  322. scene.add( light );
  323. //
  324. updateMaterial();
  325. window.addEventListener( 'resize', onWindowResize, false );
  326. }
  327. function onWindowResize() {
  328. camera.aspect = window.innerWidth / window.innerHeight;
  329. camera.updateProjectionMatrix();
  330. nodepost.setSize( window.innerWidth, window.innerHeight );
  331. }
  332. function animate() {
  333. requestAnimationFrame( animate );
  334. var delta = clock.getDelta();
  335. object.rotation.x += 0.005;
  336. object.rotation.y += 0.01;
  337. frame.update( delta );
  338. nodepost.render( scene, camera, frame );
  339. }
  340. </script>
  341. </body>
  342. </html>