# Version 117 stops fat-lines from rendering

**URL:** <https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824>\
**Category:** Questions\
**Tags:** materials, fat-lines, geometry\
**Created:** [June 2, 2020, 3:29pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824 "2020-06-02T15:29:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![paul\_grenning](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paul_grenning/32/10880_2.png) [@paul\_grenning](https://discourse.threejs.org/u/paul_grenning)\
**Post date:** [June 2, 2020, 3:29pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824/1 "2020-06-02T15:29:33Z")

</div>

If I force load threejs version 115 or 116, this code works and my lines are rendered properly. In version 117 nothing is displayed.

Line Material Code:

```auto
let lineMaterial = new THREE.LineMaterial({
    	linewidth: 3,
    	color: 0xEC610E,
    	opacity: 1,
    	depthTest: false,
});
lineMaterial.resolution.set(window.innerWidth, window.innerHeight);

// code to generate positionBuffer

let lineGeometry = new THREE.LineSegmentsGeometry().setPositions( positionBuffer );
let lineMesh = new THREE.LineSegments2( lineGeometry, lineMaterial );

// add the mesh to the scene

```

Is there a bug with the latest release or is there some way for me to fix this on my end?

Thanks.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 2, 2020, 3:44pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824/2 "2020-06-02T15:44:21Z")

</div>

I’m not aware of any breaking changes in context of fat lines. The [official examples](https://threejs.org/examples/?q=fat#webgl_lines_fat) seem to work fine.

Any chances to demonstrate the issue with a live example?

---

<div class="post-metadata">

**Author:** ![paul\_grenning](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paul_grenning/32/10880_2.png) [@paul\_grenning](https://discourse.threejs.org/u/paul_grenning)\
**Post date:** [June 2, 2020, 3:51pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824/3 "2020-06-02T15:51:27Z")

</div>

It is an internal product only so I don’t have a live example for you.

I wonder if I can make a jsfiddle or something. Or I should try to use the official example.

Do all of the official examples run off of the latest threejs version?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 2, 2020, 4:06pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824/4 "2020-06-02T16:06:19Z")

</div>

Yes, [https://threejs.org/examples/](https://threejs.org/examples/) always uses the latest version.

Maybe you can modify [webgl\_lines\_fat](https://threejs.org/examples/webgl_lines_fat) in order to produce the render error? In this case, it would be sufficient if you just copy/paste the modified version in this topic. I can then check out the code on my system.

---

<div class="post-metadata">

**Author:** ![paul\_grenning](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paul_grenning/32/10880_2.png) [@paul\_grenning](https://discourse.threejs.org/u/paul_grenning)\
**Post date:** [June 2, 2020, 6:14pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824/5 "2020-06-02T18:14:05Z")

</div>

I am having trouble getting a local version of the fat lines example running. I usually build my web app with browserify and modules. Is there a quick way to get the example running locally?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 2, 2020, 6:57pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824/6 "2020-06-02T18:57:06Z")

</div>

Download the repository, navigate into the project directory and then execute `npm i && npm start`.

---

<div class="post-metadata">

**Author:** ![paul\_grenning](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paul_grenning/32/10880_2.png) [@paul\_grenning](https://discourse.threejs.org/u/paul_grenning)\
**Post date:** [June 2, 2020, 9:48pm UTC](https://discourse.threejs.org/t/version-117-stops-fat-lines-from-rendering/15824/7 "2020-06-02T21:48:33Z")

</div>

Substituting my code for whats in the example, webgl\_lines\_fat.html, works. It must be a local issue that I am not seeing somewhere with my code. Thanks. Although I am still stumped on why version 115 and 116 work while switching to 117 doesn’t work.

Here is the modified version just in case.

> 

 three.js webgl - lines - fat 

```
<body>

	<div id="container"></div>

	<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - fat lines</div>

	<script type="module">

		import * as THREE from '../build/three.module.js';

		import Stats from './jsm/libs/stats.module.js';

		import { GUI } from './jsm/libs/dat.gui.module.js';
		import { OrbitControls } from './jsm/controls/OrbitControls.js';
		import { Line2 } from './jsm/lines/Line2.js';
		import { LineMaterial } from './jsm/lines/LineMaterial.js';
		import { LineGeometry } from './jsm/lines/LineGeometry.js';
		import { GeometryUtils } from './jsm/utils/GeometryUtils.js';

		// NEW
		import { LineSegments2 } from './jsm/lines/LineSegments2.js';
		import { LineSegmentsGeometry } from './jsm/lines/LineSegmentsGeometry.js';

		var line, renderer, scene, camera, camera2, controls;
		var line1;
		var matLine, matLineBasic, matLineDashed;
		var stats;
		var gui;

		// viewport
		var insetWidth;
		var insetHeight;

		init();
		animate();

		function init() {

			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setClearColor( 0x000000, 0.0 );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
			camera.position.set( - 40, 0, 60 );

			camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
			camera2.position.copy( camera.position );

			controls = new OrbitControls( camera, renderer.domElement );
			controls.minDistance = 10;
			controls.maxDistance = 500;

			// Position and THREE.Color Data

			var positions = [];
			var colors = [];

			var points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );

			var spline = new THREE.CatmullRomCurve3( points );
			var divisions = Math.round( 12 * points.length );
			var point = new THREE.Vector3();
			var color = new THREE.Color();

			for ( var i = 0, l = divisions; i < l; i ++ ) {

				var t = i / l;

				spline.getPoint( t, point );
				positions.push( point.x, point.y, point.z );

				color.setHSL( t, 1.0, 0.5 );
				colors.push( color.r, color.g, color.b );

			}

			// Line2 ( LineGeometry, LineMaterial )

			var geometry = new LineGeometry();
			geometry.setPositions( positions );
			geometry.setColors( colors );

			matLine = new LineMaterial( {

				color: 0xffffff,
				linewidth: 5, // in pixels
				vertexColors: true,
				//resolution: // to be set by renderer, eventually
				dashed: false

			} );

			line = new Line2( geometry, matLine );
			line.computeLineDistances();
			line.scale.set( 1, 1, 1 );

			{ // NEW
				let lineMaterial = new LineMaterial({
						linewidth: 3,
						color: 0xEC610E,
						transparent: true,
						opacity: 1,
						depthTest: false,
					});
					lineMaterial.resolution.set(window.innerWidth, window.innerHeight);
				var lineGeometry = new LineSegmentsGeometry().setPositions( positions );
				let lineMesh = new LineSegments2( lineGeometry, lineMaterial );
				scene.add( lineMesh );
			}

			// THREE.Line ( THREE.BufferGeometry, THREE.LineBasicMaterial ) - rendered with gl.LINE_STRIP

			var geo = new THREE.BufferGeometry();
			geo.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
			geo.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

			matLineBasic = new THREE.LineBasicMaterial( { vertexColors: true } );
			matLineDashed = new THREE.LineDashedMaterial( { vertexColors: true, scale: 2, dashSize: 1, gapSize: 1 } );

			line1 = new THREE.Line( geo, matLineBasic );
			line1.computeLineDistances();
			line1.visible = false;
			scene.add( line1 );

			//

			window.addEventListener( 'resize', onWindowResize, false );
			onWindowResize();

			stats = new Stats();
			document.body.appendChild( stats.dom );

			initGui();

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

			insetWidth = window.innerHeight / 4; // square
			insetHeight = window.innerHeight / 4;

			camera2.aspect = insetWidth / insetHeight;
			camera2.updateProjectionMatrix();

		}

		function animate() {

			requestAnimationFrame( animate );

			stats.update();

			// main scene

			renderer.setClearColor( 0x000000, 0 );

			renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );

			// renderer will set this eventually
			matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport

			renderer.render( scene, camera );

			// inset scene

			renderer.setClearColor( 0x222222, 1 );

			renderer.clearDepth(); // important!

			renderer.setScissorTest( true );

			renderer.setScissor( 20, 20, insetWidth, insetHeight );

			renderer.setViewport( 20, 20, insetWidth, insetHeight );

			camera2.position.copy( camera.position );
			camera2.quaternion.copy( camera.quaternion );

			// renderer will set this eventually
			matLine.resolution.set( insetWidth, insetHeight ); // resolution of the inset viewport

			renderer.render( scene, camera2 );

			renderer.setScissorTest( false );

		}

		//

		function initGui() {

			gui = new GUI();

			var param = {
				'line type': 0,
				'width (px)': 5,
				'dashed': false,
				'dash scale': 1,
				'dash / gap': 1
			};

			gui.add( param, 'line type', { 'LineGeometry': 0, 'gl.LINE': 1 } ).onChange( function ( val ) {

				switch ( val ) {

					case '0':
						line.visible = true;

						line1.visible = false;

						break;

					case '1':
						line.visible = false;

						line1.visible = true;

						break;

				}

			} );

			gui.add( param, 'width (px)', 1, 10 ).onChange( function ( val ) {

				matLine.linewidth = val;

			} );

			gui.add( param, 'dashed' ).onChange( function ( val ) {

				matLine.dashed = val;

				// dashed is implemented as a defines -- not as a uniform. this could be changed.
				// ... or THREE.LineDashedMaterial could be implemented as a separate material
				// temporary hack - renderer should do this eventually
				if ( val ) matLine.defines.USE_DASH = ""; else delete matLine.defines.USE_DASH;
				matLine.needsUpdate = true;

				line1.material = val ? matLineDashed : matLineBasic;

			} );

			gui.add( param, 'dash scale', 0.5, 2, 0.1 ).onChange( function ( val ) {

				matLine.dashScale = val;
				matLineDashed.scale = val;

			} );

			gui.add( param, 'dash / gap', { '2 : 1': 0, '1 : 1': 1, '1 : 2': 2 } ).onChange( function ( val ) {

				switch ( val ) {

					case '0':
						matLine.dashSize = 2;
						matLine.gapSize = 1;

						matLineDashed.dashSize = 2;
						matLineDashed.gapSize = 1;

						break;

					case '1':
						matLine.dashSize = 1;
						matLine.gapSize = 1;

						matLineDashed.dashSize = 1;
						matLineDashed.gapSize = 1;

						break;

					case '2':
						matLine.dashSize = 1;
						matLine.gapSize = 2;

						matLineDashed.dashSize = 1;
						matLineDashed.gapSize = 2;

						break;

				}

			} );

		}

	</script>

</body>

```