Examples: Make files and tags to JSON files.

examples/files.js → examples/files.json

@@ -1,4 +1,4 @@
-const files = {
+ {
 	"webgl": [
 		"webgl_animation_cloth",
 		"webgl_animation_keyframes",
@@ -245,7 +245,7 @@ const files = {
 		"webgl_performance_nodes",
 		"webgl_postprocessing_nodes",
 		"webgl_postprocessing_nodes_pass",
-		"webgl_sprites_nodes",
+		"webgl_sprites_nodes"
 	],
 	"webgl / postprocessing": [
 		"webgl_postprocessing",
@@ -323,7 +323,7 @@ const files = {
 	"webgpu": [
 		"webgpu_sandbox",
 		"webgpu_rtt",
-		"webgpu_compute",
+		"webgpu_compute"
 	],
 	"webaudio": [
 		"webaudio_orientation",
@@ -402,108 +402,4 @@ const files = {
 		"webgl_pmrem_test",
 		"misc_uv_tests"
 	]
-};
-
-const tags = {
-	"webgl_animation_cloth": [ "physics", "integration" ],
-	"webgl_clipping": [ "solid" ],
-	"webgl_clipping_advanced": [ "solid" ],
-	"webgl_clipping_intersection": [ "solid" ],
-	"webgl_clipping_stencil": [ "solid" ],
-	"webgl_decals": [ "normals" ],
-	"webgl_depth_texture": [ "renderTarget" ],
-	"webgl_framebuffer_texture": [ "renderTarget" ],
-	"webgl_geometry_colors_lookuptable": [ "vertex" ],
-	"webgl_geometry_hierarchy": [ "group" ],
-	"webgl_geometry_hierarchy2": [ "scene graph" ],
-	"webgl_geometry_minecraft_ao": [ "ambient occlusion" ],
-	"webgl_geometry_nurbs": [ "curve", "surface" ],
-	"webgl_geometry_spline_editor": [ "curve" ],
-	"webgl_geometry_text": [ "font" ],
-	"webgl_geometry_text_shapes": [ "font" ],
-	"webgl_geometry_text_stroke": [ "font" ],
-	"webgl_helpers": [ "normals", "tangents", "bounding box" ],
-	"webgl_instancing_performance": [ "batching", "merging" ],
-	"webgl_interactive_buffergeometry": [ "raycast", "outline" ],
-	"webgl_interactive_cubes": [ "raycast", "highlinght" ],
-	"webgl_interactive_cubes_gpu": [ "raycast", "highlight" ],
-	"webgl_interactive_cubes_ortho": [ "raycast", "highlight" ],
-	"webgl_interactive_lines": [ "raycast" ],
-	"webgl_interactive_points": [ "raycast" ],
-	"webgl_interactive_raycasting_points": [ "raycast" ],
-	"webgl_interactive_voxelpainter": [ "raycast" ],
-	"webgl_layers": [ "groups" ],
-	"webgl_lights_hemisphere": [ "directional" ],
-	"webgl_lights_pointlights": [ "multiple" ],
-	"webgl_loader_ttf": [ "text", "font" ],
-	"webgl_loader_pdb": [ "molecules" ],
-	"webgl_lod": [ "level", "details" ],
-	"webgl_materials_blending": [ "alpha" ],
-	"webgl_materials_blending_custom": [ "alpha" ],
-	"webgl_materials_channels": [ "normal", "depth", "rgba packing" ],
-	"webgl_materials_cubemap_mipmaps": [ "envmap" ],
-	"webgl_materials_envmaps_parallax": [ "onBeforeCompile" ],
-	"webgl_materials_lightmap": [ "shadows" ],
-	"webgl_materials_physical_clearcoat": [ "anisotropy" ],
-	"webgl_materials_physical_transmission": [ "alpha" ],
-	"webgl_materials_shaders_fresnel": [ "refraction" ],
-	"webgl_materials_standard": [ "pbr" ],
-	"webgl_materials_texture_canvas": [ "paint" ],
-	"webgl_materials_texture_filters": [ "mipmap", "min", "mag" ],
-	"webgl_materials_texture_manualmipmap": [ "mipmap", "min", "mag" ],
-	"webgl_materials_subsurface_scattering": [ "derivatives", "translucency" ],
-	"webgl_materials_wireframe": [ "derivatives" ],
-	"webgl_math_obb": [ "intersection", "bounding" ],
-	"webgl_math_orientation_transform": [ "rotation" ],
-	"webgl_mirror": [ "reflection" ],
-	"webgl_morphtargets_horse": [ "animation" ],
-	"webgl_multiple_elements": [ "differential equations", "physics" ],
-	"webgl_multiple_elements_text": [ "font" ],
-	"webgl_nearestneighbour": [ "kdtree" ],
-	"webgl_panorama_cube": [ "envmap" ],
-	"webgl_panorama_equirectangular": [ "envmap" ],
-	"webgl_points_billboards": [ "particles" ],
-	"webgl_points_dynamic": [ "particles" ],
-	"webgl_points_sprites": [ "particles", "snow" ],
-	"webgl_points_waves": [ "particles" ],
-	"webgl_read_float_buffer": [ "texture" ],
-	"webgl_refraction": [ "water" ],
-	"webgl_rtt": [ "renderTarget", "texture" ],
-	"webgl_shaders_ocean": [ "water" ],
-	"webgl_shaders_ocean2": [ "water" ],
-	"webgl_shaders_sky": [ "sun" ],
-	"webgl_shaders_tonemapping": [ "hrd" ],
-	"webgl_shaders_vector": [ "font" ],
-	"webgl_shading_physical": [ "pbr" ],
-	"webgl_shadow_contact": [ "onBeforeCompile", "soft" ],
-	"webgl_shadowmap_viewer": [ "directional", "spot" ],
-	"webgl_skinning_simple": [ "animation" ],
-	"webgl_tonemapping": [ "gltf" ],
-	"webgl_loader_nodes": [ "caustics", "displace", "xray" ],
-	"webgl_postprocessing_afterimage": [ "trails" ],
-	"webgl_postprocessing_dof": [ "bokeh" ],
-	"webgl_postprocessing_dof2": [ "bokeh" ],
-	"webgl_postprocessing_fxaa": [ "msaa", "multisampled" ],
-	"webgl_postprocessing_godrays": [ "light scattering" ],
-	"webgl_postprocessing_ssaa": [ "msaa", "multisampled" ],
-	"webgl_postprocessing_ssaa_unbiased": [ "msaa", "multisampled" ],
-	"webgl_postprocessing_sao": [ "ambient occlusion" ],
-	"webgl_postprocessing_smaa": [ "msaa", "multisampled" ],
-	"webgl_postprocessing_sobel": [ "filter", "edge detection" ],
-	"webgl_postprocessing_ssao": [ "ambient occlusion" ],
-	"webgl_postprocessing_unreal_bloom": [ "glow" ],
-	"webgl_postprocessing_unreal_bloom_selective": [ "glow" ],
-	"webgl_materials_modified": [ "onBeforeCompile" ],
-	"webgl_shadowmap_csm": [ "cascade" ],
-	"webgl_shadowmap_pcss": [ "soft" ],
-	"webgl_simple_gi": [ "global illumination" ],
-	"webgl_tiled_forward": [ "derivatives" ],
-	"webgl2_multisampled_renderbuffers": [ "msaa" ],
-	"physics_ammo_cloth": [ "integration" ],
-	"misc_controls_deviceorientation": [ "accelerometer", "sensors" ],
-	"misc_controls_drag": [ "translate" ],
-	"misc_controls_map": [ "drag" ],
-	"misc_controls_orbit": [ "rotation" ],
-	"misc_controls_trackball": [ "rotation" ],
-	"misc_controls_transform": [ "scale", "rotate", "translate" ]
-};
+}

examples/index.html

@@ -42,8 +42,6 @@
 
 		<a id="button" target="_blank"><img src="../files/ic_code_black_24dp.svg"></a>
 
-		<script src="files.js"></script>
-
 		<script>
 
 		const panel = document.getElementById( 'panel' );
@@ -63,9 +61,16 @@
 
 		let selected = null;
 
-		init();
+		Promise.all( [
+			fetch( 'files.json' ).then( response => response.json() ),
+			fetch( 'tags.json' ).then( response => response.json() )
+		] ).then( ( json ) => {
+
+			init( json[ 0 ], json[ 1 ] );
 
-		function init() {
+		} );
+
+		function init( files, tags ) {
 
 			content.appendChild( container );
 
@@ -117,7 +122,7 @@
 
 			}
 
-			updateFilter();
+			updateFilter( files, tags );
 
 			// Events
 
@@ -140,14 +145,14 @@
 			exitSearchButton.onclick = function ( ) {
 
 				filterInput.value = '';
-				updateFilter();
+				updateFilter( files, tags );
 				panel.classList.remove( 'searchFocused' );
 
 			};
 
 			filterInput.addEventListener( 'input', function () {
 
-				updateFilter();
+				updateFilter( files, tags );
 
 			} );
 
@@ -212,13 +217,6 @@
 
 		}
 
-		function loadFile( file ) {
-
-			selectFile( file );
-			viewer.src = file + '.html';
-
-		}
-
 		function selectFile( file ) {
 
 			if ( selected !== null ) links[ selected ].classList.remove( 'selected' );
@@ -239,7 +237,7 @@
 
 		}
 
-		function updateFilter() {
+		function updateFilter( files, tags ) {
 
 			let v = filterInput.value.trim();
 			v = v.replace( /\s+/gi, ' ' ); // replace multiple whitespaces with a single one
@@ -262,17 +260,17 @@
 
 				for ( let i = 0; i < section.length; i ++ ) {
 
-					filterExample( section[ i ], exp );
+					filterExample( section[ i ], exp, tags );
 
 				}
 
 			}
 
-			layoutList();
+			layoutList( files );
 
 		}
 
-		function filterExample( file, exp ) {
+		function filterExample( file, exp, tags ) {
 
 			const link = links[ file ];
 			const name = getName( file );
@@ -309,7 +307,7 @@
 
 		}
 
-		function layoutList() {
+		function layoutList( files ) {
 
 			for ( const key in files ) {
 

examples/tags.json

@@ -0,0 +1,103 @@
+{
+	"webgl_animation_cloth": [ "physics", "integration" ],
+	"webgl_clipping": [ "solid" ],
+	"webgl_clipping_advanced": [ "solid" ],
+	"webgl_clipping_intersection": [ "solid" ],
+	"webgl_clipping_stencil": [ "solid" ],
+	"webgl_decals": [ "normals" ],
+	"webgl_depth_texture": [ "renderTarget" ],
+	"webgl_framebuffer_texture": [ "renderTarget" ],
+	"webgl_geometry_colors_lookuptable": [ "vertex" ],
+	"webgl_geometry_hierarchy": [ "group" ],
+	"webgl_geometry_hierarchy2": [ "scene graph" ],
+	"webgl_geometry_minecraft_ao": [ "ambient occlusion" ],
+	"webgl_geometry_nurbs": [ "curve", "surface" ],
+	"webgl_geometry_spline_editor": [ "curve" ],
+	"webgl_geometry_text": [ "font" ],
+	"webgl_geometry_text_shapes": [ "font" ],
+	"webgl_geometry_text_stroke": [ "font" ],
+	"webgl_helpers": [ "normals", "tangents", "bounding box" ],
+	"webgl_instancing_performance": [ "batching", "merging" ],
+	"webgl_interactive_buffergeometry": [ "raycast", "outline" ],
+	"webgl_interactive_cubes": [ "raycast", "highlinght" ],
+	"webgl_interactive_cubes_gpu": [ "raycast", "highlight" ],
+	"webgl_interactive_cubes_ortho": [ "raycast", "highlight" ],
+	"webgl_interactive_lines": [ "raycast" ],
+	"webgl_interactive_points": [ "raycast" ],
+	"webgl_interactive_raycasting_points": [ "raycast" ],
+	"webgl_interactive_voxelpainter": [ "raycast" ],
+	"webgl_layers": [ "groups" ],
+	"webgl_lights_hemisphere": [ "directional" ],
+	"webgl_lights_pointlights": [ "multiple" ],
+	"webgl_loader_ttf": [ "text", "font" ],
+	"webgl_loader_pdb": [ "molecules" ],
+	"webgl_lod": [ "level", "details" ],
+	"webgl_materials_blending": [ "alpha" ],
+	"webgl_materials_blending_custom": [ "alpha" ],
+	"webgl_materials_channels": [ "normal", "depth", "rgba packing" ],
+	"webgl_materials_cubemap_mipmaps": [ "envmap" ],
+	"webgl_materials_envmaps_parallax": [ "onBeforeCompile" ],
+	"webgl_materials_lightmap": [ "shadows" ],
+	"webgl_materials_physical_clearcoat": [ "anisotropy" ],
+	"webgl_materials_physical_transmission": [ "alpha" ],
+	"webgl_materials_shaders_fresnel": [ "refraction" ],
+	"webgl_materials_standard": [ "pbr" ],
+	"webgl_materials_texture_canvas": [ "paint" ],
+	"webgl_materials_texture_filters": [ "mipmap", "min", "mag" ],
+	"webgl_materials_texture_manualmipmap": [ "mipmap", "min", "mag" ],
+	"webgl_materials_subsurface_scattering": [ "derivatives", "translucency" ],
+	"webgl_materials_wireframe": [ "derivatives" ],
+	"webgl_math_obb": [ "intersection", "bounding" ],
+	"webgl_math_orientation_transform": [ "rotation" ],
+	"webgl_mirror": [ "reflection" ],
+	"webgl_morphtargets_horse": [ "animation" ],
+	"webgl_multiple_elements": [ "differential equations", "physics" ],
+	"webgl_multiple_elements_text": [ "font" ],
+	"webgl_nearestneighbour": [ "kdtree" ],
+	"webgl_panorama_cube": [ "envmap" ],
+	"webgl_panorama_equirectangular": [ "envmap" ],
+	"webgl_points_billboards": [ "particles" ],
+	"webgl_points_dynamic": [ "particles" ],
+	"webgl_points_sprites": [ "particles", "snow" ],
+	"webgl_points_waves": [ "particles" ],
+	"webgl_read_float_buffer": [ "texture" ],
+	"webgl_refraction": [ "water" ],
+	"webgl_rtt": [ "renderTarget", "texture" ],
+	"webgl_shaders_ocean": [ "water" ],
+	"webgl_shaders_ocean2": [ "water" ],
+	"webgl_shaders_sky": [ "sun" ],
+	"webgl_shaders_tonemapping": [ "hrd" ],
+	"webgl_shaders_vector": [ "font" ],
+	"webgl_shading_physical": [ "pbr" ],
+	"webgl_shadow_contact": [ "onBeforeCompile", "soft" ],
+	"webgl_shadowmap_viewer": [ "directional", "spot" ],
+	"webgl_skinning_simple": [ "animation" ],
+	"webgl_tonemapping": [ "gltf" ],
+	"webgl_loader_nodes": [ "caustics", "displace", "xray" ],
+	"webgl_postprocessing_afterimage": [ "trails" ],
+	"webgl_postprocessing_dof": [ "bokeh" ],
+	"webgl_postprocessing_dof2": [ "bokeh" ],
+	"webgl_postprocessing_fxaa": [ "msaa", "multisampled" ],
+	"webgl_postprocessing_godrays": [ "light scattering" ],
+	"webgl_postprocessing_ssaa": [ "msaa", "multisampled" ],
+	"webgl_postprocessing_ssaa_unbiased": [ "msaa", "multisampled" ],
+	"webgl_postprocessing_sao": [ "ambient occlusion" ],
+	"webgl_postprocessing_smaa": [ "msaa", "multisampled" ],
+	"webgl_postprocessing_sobel": [ "filter", "edge detection" ],
+	"webgl_postprocessing_ssao": [ "ambient occlusion" ],
+	"webgl_postprocessing_unreal_bloom": [ "glow" ],
+	"webgl_postprocessing_unreal_bloom_selective": [ "glow" ],
+	"webgl_materials_modified": [ "onBeforeCompile" ],
+	"webgl_shadowmap_csm": [ "cascade" ],
+	"webgl_shadowmap_pcss": [ "soft" ],
+	"webgl_simple_gi": [ "global illumination" ],
+	"webgl_tiled_forward": [ "derivatives" ],
+	"webgl2_multisampled_renderbuffers": [ "msaa" ],
+	"physics_ammo_cloth": [ "integration" ],
+	"misc_controls_deviceorientation": [ "accelerometer", "sensors" ],
+	"misc_controls_drag": [ "translate" ],
+	"misc_controls_map": [ "drag" ],
+	"misc_controls_orbit": [ "rotation" ],
+	"misc_controls_trackball": [ "rotation" ],
+	"misc_controls_transform": [ "scale", "rotate", "translate" ]
+}

test/e2e/check-coverage.js

@@ -13,9 +13,9 @@ const S = fs.readdirSync( './examples/screenshots' )
 
 // files.js
 const F = [];
-// To expose files variable to out of eval scope, we need var statement, not const.
-eval( fs.readFileSync( './examples/files.js' )
-	.toString().replace( 'const files', 'var files' ) );
+
+const files = JSON.parse( fs.readFileSync( './examples/files.json' ) );
+
 for ( const key in files ) {
 
 	const section = files[ key ];
@@ -27,10 +27,10 @@ for ( const key in files ) {
 
 }
 
-let subES = E.filter( x => ! S.includes( x ) );
-let subSE = S.filter( x => ! E.includes( x ) );
-let subEF = E.filter( x => ! F.includes( x ) );
-let subFE = F.filter( x => ! E.includes( x ) );
+const subES = E.filter( x => ! S.includes( x ) );
+const subSE = S.filter( x => ! E.includes( x ) );
+const subEF = E.filter( x => ! F.includes( x ) );
+const subFE = F.filter( x => ! E.includes( x ) );
 
 console.green = ( msg ) => console.log( `\x1b[32m${ msg }\x1b[37m` );
 console.red = ( msg ) => console.log( `\x1b[31m${ msg }\x1b[37m` );