Improve lighting and postprocessing tests

Author: alexandermbrown

tests/lights/ExampleLightingLayer.js

@@ -21,10 +21,10 @@ class ExampleLightingLayer extends Polar.Layer {
 
 		// Create the sprite's texture.
 		const checkerboardTexture = new Polar.Texture2D();
-		checkerboardTexture.loadFromPath('/textures/checkerboard.png');
+		checkerboardTexture.loadFromPath('/textures/scene.png');
 
 		const boxEntity = this.manager.createEntity();
-		boxEntity.addComponent(new Polar.TransformCP(0, 0, 0, 1, 1));
+		boxEntity.addComponent(new Polar.TransformCP(0, 0, 0, 16 / 3, 3));
 		boxEntity.addComponent(new Polar.Texture2DCP(checkerboardTexture));
 		this.manager.registerComponents(boxEntity);
 

tests/postprocessing/ExamplePostprocessingLayer.js

@@ -19,9 +19,9 @@ class ExamplePostprocessingLayer extends Polar.Layer {
 		this.manager.addSystem(new Polar.ParticleSystem());
 
 		const e = this.manager.createEntity();
-		e.addComponent(new Polar.TransformCP());
+		e.addComponent(new Polar.TransformCP(0, 0, 0, 16/3, 3));
 		const alphatest = new Polar.Texture2D();
-		alphatest.loadFromPath('/textures/alphatest.png');
+		alphatest.loadFromPath('/textures/scene.png');
 		e.addComponent(new Polar.Texture2DCP(alphatest));
 		this.manager.registerComponents(e);
 
@@ -95,6 +95,22 @@ class ExamplePostprocessingLayer extends Polar.Layer {
 		setupPostprocessingCheckbox('chromatic-aberration-checkbox', 'ChromaticAberration');
 		setupPostprocessingCheckbox('grain-checkbox', 'Grain');
 
+		this.doTrip = false;
+		document.getElementById('trip-checkbox').addEventListener('change', event => {
+			if (event.target.checked) {
+				document.getElementById('blur-h-checkbox').checked = true;
+				document.getElementById('blur-v-checkbox').checked = true;
+				document.getElementById('chromatic-aberration-checkbox').checked = true;
+				Polar.Renderer.enablePostprocessingStage('HorizontalBlur');
+				Polar.Renderer.enablePostprocessingStage('VerticalBlur');
+				Polar.Renderer.enablePostprocessingStage('ChromaticAberration');
+				this.doTrip = true;
+			}
+			else {
+				this.doTrip = false;
+			}
+		});
+
 		Polar.Renderer.disablePostprocessingStage('Invert');
 		Polar.Renderer.disablePostprocessingStage('Grayscale');
 		Polar.Renderer.disablePostprocessingStage('Vignette');
@@ -108,6 +124,11 @@ class ExamplePostprocessingLayer extends Polar.Layer {
 		this.manager.onUpdate(deltaTime);
 
 		Polar.Renderer.setPostprocessingStageUniform('Grain', 'u_Variant', Math.random());
+		if (this.doTrip) {
+			Polar.Renderer.setPostprocessingStageUniform('ChromaticAberration', 'u_Intensity', 0.02 * Math.sin(performance.now() / 350));
+			Polar.Renderer.setPostprocessingStageUniform('HorizontalBlur', 'u_Spread', 5 * Math.sin(performance.now() / 400));
+			Polar.Renderer.setPostprocessingStageUniform('VerticalBlur', 'u_Spread', 5 * Math.sin(performance.now() / 450));
+		}
 	}
 
 	onEvent(event) {

tests/postprocessing/index.html

@@ -39,6 +39,10 @@ <h1>Post-processing</h1>
                     <input type="checkbox" id="grain-checkbox"/>
                     <span class="checkmark"></span>
                 </label>
+                <label class="checkbox-container">Trip Mode
+                    <input type="checkbox" id="trip-checkbox"/>
+                    <span class="checkmark"></span>
+                </label>
             </div>
         </div>