samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
							<html lang="en">
	<head>
		<title>three.js - webgpu - tsl transpiler</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<style>
			#source {
				position: absolute;
				top: 50px;
				left: 0;
				width: 50%;
				height: calc(100% - 50px);
			}
			#result {
				position: absolute;
				top: 50px;
				right: 0;
				width: 50%;
				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/monaco-editor@0.52.2/min/vs/loader.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import Transpiler from 'three/addons/transpiler/Transpiler.js';
			import GLSLDecoder from 'three/addons/transpiler/GLSLDecoder.js';
			import WGSLEncoder from 'three/addons/transpiler/WGSLEncoder.js';
			import TSLEncoder from 'three/addons/transpiler/TSLEncoder.js';

			init();

			function init() {

				// editor

				window.require.config( { paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs' } } );

				require( [ 'vs/editor/editor.main' ], () => {

					const options = {
						decoder: 'GLSL',
						encoder: 'TSL'
					};

					const encoderLanguages = {
						'TSL': 'javascript',
						'WGSL': 'wgsl'
					};

					let timeout = null;

					const editorDOM = document.getElementById( 'source' );
					const resultDOM = document.getElementById( 'result' );

					const glslCode = `/*
 * Perlin noise
 * https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
 */

const float PI = 3.141592653589793;

float rand(vec2 c){
	return fract(sin(dot(c.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

float noise(vec2 p, float freq ){
	float unit = 1./freq;
	vec2 ij = floor(p/unit);
	vec2 xy = mod(p,unit)/unit;
	//xy = 3.*xy*xy-2.*xy*xy*xy;
	xy = .5*(1.-cos(PI*xy));
	float a = rand((ij+vec2(0.,0.)));
	float b = rand((ij+vec2(1.,0.)));
	float c = rand((ij+vec2(0.,1.)));
	float d = rand((ij+vec2(1.,1.)));
	float x1 = mix(a, b, xy.x);
	float x2 = mix(c, d, xy.x);
	return mix(x1, x2, xy.y);
}

float pNoise(vec2 p, int res){
	float persistence = .5;
	float n = 0.;
	float normK = 0.;
	float f = 4.;
	float amp = 1.;
	int iCount = 0;
	for (int i = 0; i<50; i++){
		n+=amp*noise(p, f);
		f*=2.;
		normK+=amp;
		amp*=persistence;
		if (iCount == res) break;
		iCount++;
	}
	float nf = n/normK;
	return nf*nf*nf*nf;
}
`;

					const editor = window.monaco.editor.create( editorDOM, {
						value: glslCode,
						language: 'c',
						theme: 'vs-dark',
						automaticLayout: true,
						wordWrap: 'on',
						minimap: { enabled: false }
					} );

					const result = window.monaco.editor.create( resultDOM, {
						value: '',
						language: 'javascript',
						theme: 'vs-dark',
						automaticLayout: true,
						wordWrap: 'on',
						readOnly: true,
						minimap: { enabled: false }
					} );

					const showCode = ( code ) => {

						result.setValue( code );
						result.revealLine( 1 );

					};

					const build = () => {

						try {

							let encoder;

							if ( options.encoder === 'TSL' ) {

								encoder = new TSLEncoder();

							} else if ( options.encoder === 'WGSL' ) {

								encoder = new WGSLEncoder();

							} else {

								throw new Error( 'Unknown encoder: ' + options.encoder );

							}

							//

							const glsl = editor.getValue();

							const decoder = new GLSLDecoder();

							const transpiler = new Transpiler( decoder, encoder );
							const tsl = transpiler.parse( glsl );

							showCode( tsl );

						} catch ( e ) {

							result.setValue( 'Error: ' + e.message );

						}

					};

					build();

					editor.getModel().onDidChangeContent( () => {

						if ( timeout ) clearTimeout( timeout );

						timeout = setTimeout( build, 1000 );

					} );

					// dropdowns

					const decoderSelect = document.getElementById( 'decoder-select' );
					const encoderSelect = document.getElementById( 'encoder-select' );

					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();
					} );

				} );

			}

		</script>
	</body>
</html>