webgpu_lines_fat.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgpu - lines - fat</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="container"></div>
  11. <div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - fat lines</div>
  12. <script type="importmap">
  13. {
  14. "imports": {
  15. "three": "../build/three.module.js",
  16. "three/addons/": "./jsm/",
  17. "three/nodes": "./jsm/nodes/Nodes.js"
  18. }
  19. }
  20. </script>
  21. <script type="module">
  22. import * as THREE from 'three';
  23. import WebGPU from 'three/addons/capabilities/WebGPU.js';
  24. import WebGL from 'three/addons/capabilities/WebGL.js';
  25. import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
  26. import Stats from 'three/addons/libs/stats.module.js';
  27. import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
  28. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  29. import { Line2NodeMaterial, LineDashedNodeMaterial, LineBasicNodeMaterial, color } from 'three/nodes';
  30. import { Line2 } from 'three/addons/lines/Line2.js';
  31. import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
  32. import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';
  33. let line, renderer, scene, camera, camera2, controls, backgroundNode;
  34. let line1;
  35. let matLine, matLineBasic, matLineDashed;
  36. let stats;
  37. let gui;
  38. // viewport
  39. let insetWidth;
  40. let insetHeight;
  41. init();
  42. animate();
  43. function init() {
  44. if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
  45. document.body.appendChild( WebGPU.getErrorMessage() );
  46. throw new Error( 'No WebGPU or WebGL2 support' );
  47. }
  48. renderer = new WebGPURenderer( { antialias: true } );
  49. renderer.setPixelRatio( window.devicePixelRatio );
  50. renderer.setClearColor( 0x000000, 0.0 );
  51. renderer.setSize( window.innerWidth, window.innerHeight );
  52. document.body.appendChild( renderer.domElement );
  53. scene = new THREE.Scene();
  54. camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
  55. camera.position.set( - 40, 0, 60 );
  56. camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
  57. camera2.position.copy( camera.position );
  58. controls = new OrbitControls( camera, renderer.domElement );
  59. controls.enableDamping = true;
  60. controls.minDistance = 10;
  61. controls.maxDistance = 500;
  62. backgroundNode = color( 0x222222 );
  63. // Position and THREE.Color Data
  64. const positions = [];
  65. const colors = [];
  66. const points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
  67. const spline = new THREE.CatmullRomCurve3( points );
  68. const divisions = Math.round( 12 * points.length );
  69. const point = new THREE.Vector3();
  70. const lineColor = new THREE.Color();
  71. for ( let i = 0, l = divisions; i < l; i ++ ) {
  72. const t = i / l;
  73. spline.getPoint( t, point );
  74. positions.push( point.x, point.y, point.z );
  75. lineColor.setHSL( t, 1.0, 0.5, THREE.SRGBColorSpace );
  76. colors.push( lineColor.r, lineColor.g, lineColor.b );
  77. }
  78. // Line2 ( LineGeometry, LineMaterial )
  79. const geometry = new LineGeometry();
  80. geometry.setPositions( positions );
  81. geometry.setColors( colors );
  82. geometry.instanceCount = positions.length / 3 - 1;
  83. matLine = new Line2NodeMaterial( {
  84. color: 0xffffff,
  85. linewidth: 5, // in world units with size attenuation, pixels otherwise
  86. vertexColors: true,
  87. dashed: false,
  88. alphaToCoverage: true,
  89. } );
  90. line = new Line2( geometry, matLine );
  91. line.computeLineDistances();
  92. line.scale.set( 1, 1, 1 );
  93. scene.add( line );
  94. const geo = new THREE.BufferGeometry();
  95. geo.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
  96. geo.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
  97. matLineBasic = new LineBasicNodeMaterial( { vertexColors: true } );
  98. matLineDashed = new LineDashedNodeMaterial( { vertexColors: true, scale: 2, dashSize: 1, gapSize: 1 } );
  99. line1 = new THREE.Line( geo, matLineBasic );
  100. line1.computeLineDistances();
  101. line1.visible = false;
  102. scene.add( line1 );
  103. //
  104. window.addEventListener( 'resize', onWindowResize );
  105. onWindowResize();
  106. stats = new Stats();
  107. document.body.appendChild( stats.dom );
  108. initGui();
  109. }
  110. function onWindowResize() {
  111. camera.aspect = window.innerWidth / window.innerHeight;
  112. camera.updateProjectionMatrix();
  113. renderer.setSize( window.innerWidth, window.innerHeight );
  114. insetWidth = window.innerHeight / 4; // square
  115. insetHeight = window.innerHeight / 4;
  116. camera2.aspect = insetWidth / insetHeight;
  117. camera2.updateProjectionMatrix();
  118. }
  119. function animate() {
  120. requestAnimationFrame( animate );
  121. stats.update();
  122. // main scene
  123. renderer.setClearColor( 0x000000, 0 );
  124. renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
  125. controls.update();
  126. renderer.autoClear = true;
  127. scene.backgroundNode = null;
  128. renderer.render( scene, camera );
  129. // inset scene
  130. renderer.clearDepth(); // important!
  131. renderer.setScissorTest( true );
  132. renderer.setScissor( 20, 20, insetWidth, insetHeight );
  133. renderer.setViewport( 20, 20, insetWidth, insetHeight );
  134. camera2.position.copy( camera.position );
  135. camera2.quaternion.copy( camera.quaternion );
  136. renderer.autoClear = false;
  137. scene.backgroundNode = backgroundNode;
  138. renderer.render( scene, camera2 );
  139. renderer.setScissorTest( false );
  140. }
  141. //
  142. function initGui() {
  143. gui = new GUI();
  144. const param = {
  145. 'line type': 0,
  146. 'world units': false,
  147. 'width': 5,
  148. 'alphaToCoverage': true,
  149. 'dashed': false,
  150. 'dash offset': 0,
  151. 'dash scale': 1,
  152. 'dash / gap': 1
  153. };
  154. gui.add( param, 'line type', { 'LineGeometry': 0, '"line-strip"': 1 } ).onChange( function ( val ) {
  155. switch ( val ) {
  156. case 0:
  157. line.visible = true;
  158. line1.visible = false;
  159. break;
  160. case 1:
  161. line.visible = false;
  162. line1.visible = true;
  163. break;
  164. }
  165. } );
  166. gui.add( param, 'world units' ).onChange( function ( val ) {
  167. matLine.worldUnits = val;
  168. matLine.needsUpdate = true;
  169. } );
  170. gui.add( param, 'width', 1, 10 ).onChange( function ( val ) {
  171. matLine.linewidth = val;
  172. } );
  173. gui.add( param, 'alphaToCoverage' ).onChange( function ( val ) {
  174. matLine.alphaToCoverage = val;
  175. } );
  176. gui.add( param, 'dashed' ).onChange( function ( val ) {
  177. matLine.dashed = val;
  178. line1.material = val ? matLineDashed : matLineBasic;
  179. } );
  180. gui.add( param, 'dash scale', 0.5, 2, 0.1 ).onChange( function ( val ) {
  181. matLine.scale = val;
  182. matLineDashed.scale = val;
  183. } );
  184. gui.add( param, 'dash offset', 0, 5, 0.1 ).onChange( function ( val ) {
  185. matLine.dashOffset = val;
  186. matLineDashed.dashOffset = val;
  187. } );
  188. gui.add( param, 'dash / gap', { '2 : 1': 0, '1 : 1': 1, '1 : 2': 2 } ).onChange( function ( val ) {
  189. switch ( val ) {
  190. case 0:
  191. matLine.dashSize = 2;
  192. matLine.gapSize = 1;
  193. matLineDashed.dashSize = 2;
  194. matLineDashed.gapSize = 1;
  195. break;
  196. case 1:
  197. matLine.dashSize = 1;
  198. matLine.gapSize = 1;
  199. matLineDashed.dashSize = 1;
  200. matLineDashed.gapSize = 1;
  201. break;
  202. case 2:
  203. matLine.dashSize = 1;
  204. matLine.gapSize = 2;
  205. matLineDashed.dashSize = 1;
  206. matLineDashed.gapSize = 2;
  207. break;
  208. }
  209. } );
  210. }
  211. </script>
  212. </body>
  213. </html>