gallery/HueSaturation.html

﻿<!DOCTYPE html>

<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<script type="importmap">
	  {
		"imports": {
		  "three":         "../libs/build/three.module.js",
		  "three/addons/": "../libs/examples/jsm/",
		  "oops":          "../src/oops.js"
		}
	  }
	</script>
</head>


<body>
	<script type="module">

		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
		import { HueSaturationShader } from 'three/addons/shaders/HueSaturationShader.js';
		
		import { renderer, randomBalls, animationLoop } from './examples.js';
		import { Effects } from 'oops';


		var effects = new Effects( renderer )
			.addEffect( HueSaturationShader )
			.addParameter( 'hue' )
			.addParameter( 'saturation' );
			
			
		var gui = new GUI( { title: '<big><em>Hue Saturation</em></big>' } );
			gui.add( effects, 'hue', -1, 1 ).step( 0.01 ).name( 'Hue' );
			gui.add( effects, 'saturation', -1, 1 ).step( 0.01 ).name( 'Saturation' ).$input.classList.add('bottom');


		randomBalls( );
		animationLoop( effects );

	</script>

</body>
</html>