Use string templates(``) in example shaders

examples/js/effects/AnaglyphEffect.js

@@ -54,63 +54,59 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {
 
 		},
 
-		vertexShader: [
+		vertexShader: /* glsl */`
+varying vec2 vUv;
 
-			"varying vec2 vUv;",
+void main() {
 
-			"void main() {",
+	vUv = vec2( uv.x, uv.y );
+	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-			"	vUv = vec2( uv.x, uv.y );",
-			"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+}
+`,
 
-			"}"
+		fragmentShader: /* glsl */`
+uniform sampler2D mapLeft;
+uniform sampler2D mapRight;
+varying vec2 vUv;
 
-		].join( "\n" ),
+uniform mat3 colorMatrixLeft;
+uniform mat3 colorMatrixRight;
 
-		fragmentShader: [
+// These functions implement sRGB linearization and gamma correction
 
-			"uniform sampler2D mapLeft;",
-			"uniform sampler2D mapRight;",
-			"varying vec2 vUv;",
+float lin( float c ) {
+	return c <= 0.04045 ? c * 0.0773993808 :
+			pow( c * 0.9478672986 + 0.0521327014, 2.4 );
+}
 
-			"uniform mat3 colorMatrixLeft;",
-			"uniform mat3 colorMatrixRight;",
+vec4 lin( vec4 c ) {
+	return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );
+}
 
-			// These functions implement sRGB linearization and gamma correction
+float dev( float c ) {
+	return c <= 0.0031308 ? c * 12.92
+			: pow( c, 0.41666 ) * 1.055 - 0.055;
+}
 
-			"float lin( float c ) {",
-			"	return c <= 0.04045 ? c * 0.0773993808 :",
-			"			pow( c * 0.9478672986 + 0.0521327014, 2.4 );",
-			"}",
 
-			"vec4 lin( vec4 c ) {",
-			"	return vec4( lin( c.r ), lin( c.g ), lin( c.b ), c.a );",
-			"}",
+void main() {
 
-			"float dev( float c ) {",
-			"	return c <= 0.0031308 ? c * 12.92",
-			"			: pow( c, 0.41666 ) * 1.055 - 0.055;",
-			"}",
+	vec2 uv = vUv;
 
+	vec4 colorL = lin( texture2D( mapLeft, uv ) );
+	vec4 colorR = lin( texture2D( mapRight, uv ) );
 
-			"void main() {",
+	vec3 color = clamp(
+			colorMatrixLeft * colorL.rgb +
+			colorMatrixRight * colorR.rgb, 0., 1. );
 
-			"	vec2 uv = vUv;",
+	gl_FragColor = vec4(
+			dev( color.r ), dev( color.g ), dev( color.b ),
+			max( colorL.a, colorR.a ) );
 
-			"	vec4 colorL = lin( texture2D( mapLeft, uv ) );",
-			"	vec4 colorR = lin( texture2D( mapRight, uv ) );",
-
-			"	vec3 color = clamp(",
-			"			colorMatrixLeft * colorL.rgb +",
-			"			colorMatrixRight * colorR.rgb, 0., 1. );",
-
-			"	gl_FragColor = vec4(",
-			"			dev( color.r ), dev( color.g ), dev( color.b ),",
-			"			max( colorL.a, colorR.a ) );",
-
-			"}"
-
-		].join( "\n" )
+}
+`
 
 	} );
 

examples/js/effects/OutlineEffect.js

@@ -93,79 +93,76 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 		outlineAlpha: { value: defaultAlpha }
 	};
 
-	var vertexShader = [
-		"#include <common>",
-		"#include <uv_pars_vertex>",
-		"#include <displacementmap_pars_vertex>",
-		"#include <fog_pars_vertex>",
-		"#include <morphtarget_pars_vertex>",
-		"#include <skinning_pars_vertex>",
-		"#include <logdepthbuf_pars_vertex>",
-		"#include <clipping_planes_pars_vertex>",
+	var vertexShader = /* glsl */`
+#include <common>
+#include <uv_pars_vertex>
+#include <displacementmap_pars_vertex>
+#include <fog_pars_vertex>
+#include <morphtarget_pars_vertex>
+#include <skinning_pars_vertex>
+#include <logdepthbuf_pars_vertex>
+#include <clipping_planes_pars_vertex>
 
-		"uniform float outlineThickness;",
+uniform float outlineThickness;
 
-		"vec4 calculateOutline( vec4 pos, vec3 normal, vec4 skinned ) {",
-		"	float thickness = outlineThickness;",
-		"	const float ratio = 1.0;", // TODO: support outline thickness ratio for each vertex
-		"	vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + normal, 1.0 );",
-		// NOTE: subtract pos2 from pos because BackSide objectNormal is negative
-		"	vec4 norm = normalize( pos - pos2 );",
-		"	return pos + norm * thickness * pos.w * ratio;",
-		"}",
+vec4 calculateOutline( vec4 pos, vec3 normal, vec4 skinned ) {
+	float thickness = outlineThickness;
+	const float ratio = 1.0; // TODO: support outline thickness ratio for each vertex
+	vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + normal, 1.0 );
+	// NOTE: subtract pos2 from pos because BackSide objectNormal is negative
+	vec4 norm = normalize( pos - pos2 );
+	return pos + norm * thickness * pos.w * ratio;
+}
 
-		"void main() {",
+void main() {
 
-		"	#include <uv_vertex>",
+	#include <uv_vertex>
 
-		"	#include <beginnormal_vertex>",
-		"	#include <morphnormal_vertex>",
-		"	#include <skinbase_vertex>",
-		"	#include <skinnormal_vertex>",
+	#include <beginnormal_vertex>
+	#include <morphnormal_vertex>
+	#include <skinbase_vertex>
+	#include <skinnormal_vertex>
 
-		"	#include <begin_vertex>",
-		"	#include <morphtarget_vertex>",
-		"	#include <skinning_vertex>",
-		"	#include <displacementmap_vertex>",
-		"	#include <project_vertex>",
+	#include <begin_vertex>
+	#include <morphtarget_vertex>
+	#include <skinning_vertex>
+	#include <displacementmap_vertex>
+	#include <project_vertex>
 
-		"	vec3 outlineNormal = - objectNormal;", // the outline material is always rendered with THREE.BackSide
+	vec3 outlineNormal = - objectNormal; // the outline material is always rendered with THREE.BackSide
 
-		"	gl_Position = calculateOutline( gl_Position, outlineNormal, vec4( transformed, 1.0 ) );",
+	gl_Position = calculateOutline( gl_Position, outlineNormal, vec4( transformed, 1.0 ) );
 
-		"	#include <logdepthbuf_vertex>",
-		"	#include <clipping_planes_vertex>",
-		"	#include <fog_vertex>",
+	#include <logdepthbuf_vertex>
+	#include <clipping_planes_vertex>
+	#include <fog_vertex>
 
-		"}",
+}
+`;
 
-	].join( "\n" );
+	var fragmentShader = /* glsl */`
+#include <common>
+#include <fog_pars_fragment>
+#include <logdepthbuf_pars_fragment>
+#include <clipping_planes_pars_fragment>
 
-	var fragmentShader = [
+uniform vec3 outlineColor;
+uniform float outlineAlpha;
 
-		"#include <common>",
-		"#include <fog_pars_fragment>",
-		"#include <logdepthbuf_pars_fragment>",
-		"#include <clipping_planes_pars_fragment>",
+void main() {
 
-		"uniform vec3 outlineColor;",
-		"uniform float outlineAlpha;",
+	#include <clipping_planes_fragment>
+	#include <logdepthbuf_fragment>
 
-		"void main() {",
+	gl_FragColor = vec4( outlineColor, outlineAlpha );
 
-		"	#include <clipping_planes_fragment>",
-		"	#include <logdepthbuf_fragment>",
+	#include <tonemapping_fragment>
+	#include <encodings_fragment>
+	#include <fog_fragment>
+	#include <premultiplied_alpha_fragment>
 
-		"	gl_FragColor = vec4( outlineColor, outlineAlpha );",
-
-		"	#include <tonemapping_fragment>",
-		"	#include <encodings_fragment>",
-		"	#include <fog_fragment>",
-		"	#include <premultiplied_alpha_fragment>",
-
-		"}"
-
-	].join( "\n" );
+}
+`;
 
 	function createMaterial() {
 

examples/js/effects/ParallaxBarrierEffect.js

@@ -26,42 +26,38 @@ THREE.ParallaxBarrierEffect = function ( renderer ) {
 
 		},
 
-		vertexShader: [
+		vertexShader: /* glsl */`
+varying vec2 vUv;
 
-			"varying vec2 vUv;",
+void main() {
 
-			"void main() {",
+	vUv = vec2( uv.x, uv.y );
+	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-			"	vUv = vec2( uv.x, uv.y );",
-			"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+}
+`,
 
-			"}"
+		fragmentShader: /* glsl */`
+uniform sampler2D mapLeft;
+uniform sampler2D mapRight;
+varying vec2 vUv;
 
-		].join( "\n" ),
+void main() {
 
-		fragmentShader: [
+	vec2 uv = vUv;
 
-			"uniform sampler2D mapLeft;",
-			"uniform sampler2D mapRight;",
-			"varying vec2 vUv;",
+	if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {
 
-			"void main() {",
+		gl_FragColor = texture2D( mapLeft, uv );
 
-			"	vec2 uv = vUv;",
+	} else {
 
-			"	if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {",
+		gl_FragColor = texture2D( mapRight, uv );
 
-			"		gl_FragColor = texture2D( mapLeft, uv );",
+	}
 
-			"	} else {",
-
-			"		gl_FragColor = texture2D( mapRight, uv );",
-
-			"	}",
-
-			"}"
-
-		].join( "\n" )
+}
+`
 
 	} );
 

examples/js/loaders/GLTFLoader.js

@@ -617,47 +617,47 @@ THREE.GLTFLoader = ( function () {
 		this.isGLTFSpecularGlossinessMaterial = true;
 
 		//various chunks that need replacing
-		var specularMapParsFragmentChunk = [
-			'#ifdef USE_SPECULARMAP',
-			'	uniform sampler2D specularMap;',
-			'#endif'
-		].join( '\n' );
-
-		var glossinessMapParsFragmentChunk = [
-			'#ifdef USE_GLOSSINESSMAP',
-			'	uniform sampler2D glossinessMap;',
-			'#endif'
-		].join( '\n' );
-
-		var specularMapFragmentChunk = [
-			'vec3 specularFactor = specular;',
-			'#ifdef USE_SPECULARMAP',
-			'	vec4 texelSpecular = texture2D( specularMap, vUv );',
-			'	texelSpecular = sRGBToLinear( texelSpecular );',
-			'	// reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture',
-			'	specularFactor *= texelSpecular.rgb;',
-			'#endif'
-		].join( '\n' );
-
-		var glossinessMapFragmentChunk = [
-			'float glossinessFactor = glossiness;',
-			'#ifdef USE_GLOSSINESSMAP',
-			'	vec4 texelGlossiness = texture2D( glossinessMap, vUv );',
-			'	// reads channel A, compatible with a glTF Specular-Glossiness (RGBA) texture',
-			'	glossinessFactor *= texelGlossiness.a;',
-			'#endif'
-		].join( '\n' );
-
-		var lightPhysicalFragmentChunk = [
-			'PhysicalMaterial material;',
-			'material.diffuseColor = diffuseColor.rgb;',
-			'vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );',
-			'float geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z );',
-			'material.specularRoughness = max( 1.0 - glossinessFactor, 0.0525 );// 0.0525 corresponds to the base mip of a 256 cubemap.',
-			'material.specularRoughness += geometryRoughness;',
-			'material.specularRoughness = min( material.specularRoughness, 1.0 );',
-			'material.specularColor = specularFactor.rgb;',
-		].join( '\n' );
+		var specularMapParsFragmentChunk = /* glsl */`
+			#ifdef USE_SPECULARMAP
+				uniform sampler2D specularMap;
+			#endif
+		`;
+
+		var glossinessMapParsFragmentChunk = /* glsl */`
+			#ifdef USE_GLOSSINESSMAP
+				uniform sampler2D glossinessMap;
+			#endif
+		`;
+
+		var specularMapFragmentChunk = /* glsl */`
+			vec3 specularFactor = specular;
+			#ifdef USE_SPECULARMAP
+				vec4 texelSpecular = texture2D( specularMap, vUv );
+				texelSpecular = sRGBToLinear( texelSpecular );
+				// reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture
+				specularFactor *= texelSpecular.rgb;
+			#endif
+		`;
+
+		var glossinessMapFragmentChunk = /* glsl */`
+			float glossinessFactor = glossiness;
+			#ifdef USE_GLOSSINESSMAP
+				vec4 texelGlossiness = texture2D( glossinessMap, vUv );
+				// reads channel A, compatible with a glTF Specular-Glossiness (RGBA) texture
+				glossinessFactor *= texelGlossiness.a;
+			#endif
+		`;
+
+		var lightPhysicalFragmentChunk = /* glsl */`
+			PhysicalMaterial material;
+			material.diffuseColor = diffuseColor.rgb;
+			vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );
+			float geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z );
+			material.specularRoughness = max( 1.0 - glossinessFactor, 0.0525 );// 0.0525 corresponds to the base mip of a 256 cubemap.
+			material.specularRoughness += geometryRoughness;
+			material.specularRoughness = min( material.specularRoughness, 1.0 );
+			material.specularColor = specularFactor.rgb;
+		`;
 
 		var uniforms = {
 			specular: { value: new THREE.Color().setHex( 0xffffff ) },