Examples: Improved transpiler UX.

Author: mrdoob

examples/webgpu_tsl_transpiler.html

@@ -10,20 +10,56 @@
 		<style>
 			#source {
 				position: absolute;
-				top: 0;
+				top: 50px;
 				left: 0;
 				width: 50%;
-				height: 100%;
+				height: calc(100% - 50px);
 			}
 			#result {
 				position: absolute;
-				top: 0;
+				top: 50px;
 				right: 0;
 				width: 50%;
-				height: 100%;
+				height: calc(100% - 50px);
+			}
+			#source-dropdown {
+				position: absolute;
+				top: 10px;
+				left: 10px;
+				z-index: 100;
+			}
+			#result-dropdown {
+				position: absolute;
+				top: 10px;
+				left: calc(50% + 10px);
+				z-index: 100;
+			}
+			select {
+				background: #333;
+				color: white;
+				border: 1px solid #555;
+				padding: 5px 10px;
+			}
+			label {
+				color: white;
+				font-family: Arial, sans-serif;
+				font-size: 14px;
 			}
 		</style>
 
+		<div id="source-dropdown">
+			<label for="decoder-select">Encoder:</label>
+			<select id="decoder-select">
+				<option value="GLSL">GLSL</option>
+			</select>
+		</div>
+		<div id="result-dropdown">
+			<label for="encoder-select">Decoder:</label>
+			<select id="encoder-select">
+				<option value="TSL">TSL</option>
+				<option value="WGSL">WGSL</option>
+			</select>
+		</div>
 		<div id="source"></div>
 		<div id="result"></div>
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
@@ -46,8 +82,6 @@
 			import WGSLEncoder from 'three/addons/transpiler/WGSLEncoder.js';
 			import TSLEncoder from 'three/addons/transpiler/TSLEncoder.js';
 
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
 			init();
 
 			function init() {
@@ -124,6 +158,7 @@
 						language: 'c',
 						theme: 'vs-dark',
 						automaticLayout: true,
+						wordWrap: 'on',
 						minimap: { enabled: false }
 					} );
 
@@ -132,6 +167,7 @@
 						language: 'javascript',
 						theme: 'vs-dark',
 						automaticLayout: true,
+						wordWrap: 'on',
 						readOnly: true,
 						minimap: { enabled: false }
 					} );
@@ -192,20 +228,24 @@
 
 					} );
 
-					// gui
-
-					const gui = new GUI();
+					// dropdowns
 
-					gui.add( options, 'decoder', [ 'GLSL' ] );
-					gui.add( options, 'encoder', [ 'TSL', 'WGSL' ] ).onChange( ( encoder => {
+					const decoderSelect = document.getElementById( 'decoder-select' );
+					const encoderSelect = document.getElementById( 'encoder-select' );
 
-						const language = encoderLanguages[ encoder ];
+					decoderSelect.addEventListener( 'change', () => {
+						options.decoder = decoderSelect.value;
+						build();
+					} );
 
+					encoderSelect.addEventListener( 'change', () => {
+						options.encoder = encoderSelect.value;
+						
+						const language = encoderLanguages[ encoderSelect.value ];
 						window.monaco.editor.setModelLanguage( result.getModel(), language );
 
 						build();
-
-					} ) );
+					} );
 
 				} );