Synthclipse

109 lines (91 with data), 4.0 kB

/**
 * This script demonstrates how simple is, in Synthclipse, combining multiple Fragx
 * shaders into one creation.
 *
 * Used shaders:
 * - Venice by reinder: https://www.shadertoy.com/view/MdXGW2
 * - Fish swimming by iq: https://www.shadertoy.com/view/ldj3Dm
 * - Vivaldi Tree by iapafoto: https://www.shadertoy.com/view/XsS3Dm
 * - Cell by iq: https://www.shadertoy.com/view/Xdl3R4
 * - Flame by XT95: https://www.shadertoy.com/view/MdX3zr
 * - Woods by iq: https://www.shadertoy.com/view/XsfGD4
 * - Generators Redux by Kali: https://www.shadertoy.com/view/lsXGWl
 * - Pool by iq: https://www.shadertoy.com/view/4sXGDs
 * - Volcanic by iq: https://www.shadertoy.com/view/XsX3RB
 *
 * HINT: Turn off "V-Sync (limited FPS)" on Rendering View to get smoother animation.
 *
 * ----------------------------------------------------------------------------------------------------
 * WARNING: Do not treat objects returned from Synth API as ordinary JavaScript
 *          objects. They are not dynamic objects - you cannot add to them variable/properties, e.g.:
 *
 *          	var teapot = GeometryFactory.createTeapot(4);
 *          	teapot.someNewVariable = 5; // THIS WON'T WORK, but unfortunately you won't
 *                                          // get any error message doing so.
 * ----------------------------------------------------------------------------------------------------
 *
 * Documentation (for Java but it is also valid for JavaScript):
 *
 * - Synthclipse: http://synthclipse.sourceforge.net/scripting/api/index.html?org/synthclipse/scripting/core/JSSynthclipse.html
 * - FragxRenderer: http://synthclipse.sourceforge.net/scripting/api/index.html?org/synthclipse/scripting/core/JSFragxRenderer.html
 */
"use strict";

/*
 * This variable starts with capital letter to match the name of uniform "Level"
 * from "fragx/demo-shader-tiles.fragx" shader. When some variables have the same names
 * (and groups), they are automatically synchronized with each other.
 * When you change a value of one of them, they will all have set this value.
 */
var Level = 3; //! islider[1, 3, 3];

var lastLevel = Level;

var viewportWidth = 0;
var viewportHeight = 0;

var renderable = {};
var baseRenderer = null;
var tiles = [];

function initShaders() {
	baseRenderer = Synthclipse.loadFragx("fragx/demo-shader-tiles.fragx");

	tiles[0] = Synthclipse.loadFragx("fragx/Venice.stoy");
	tiles[1] = Synthclipse.loadFragx("fragx/Fish-swimming.stoy");
	tiles[2] = Synthclipse.loadFragx("fragx/Vivaldi-Tree.stoy");
	tiles[3] = Synthclipse.loadFragx("fragx/Cell.stoy");
	tiles[4] = Synthclipse.loadFragx("fragx/Flame.stoy");
	tiles[5] = Synthclipse.loadFragx("fragx/Woods.stoy");
	tiles[6] = Synthclipse.loadFragx("fragx/Generators-Redux.stoy");
	tiles[7] = Synthclipse.loadFragx("fragx/Pool.stoy");
	tiles[8] = Synthclipse.loadFragx("fragx/Volcanic.stoy");

	for (var i = 0; i < 9; i++) {
		tiles[i].renderToTexture = true;
	}
}

renderable.display = function() {
	if (lastLevel != Level) {
		renderable.resize(viewportWidth, viewportHeight);
		lastLevel = Level;
	}

	for (var i = 0; i < 9; i++) {
		var tile = tiles[i];
		tile.render(Synthclipse.time + 7.0);

		var uc = baseRenderer.getUniformControl("Texture" + (i + 1));
		uc.setTexture(tile.textureID);
	}

	baseRenderer.render();
};

renderable.init = function() {
	initShaders();

	// If we want to have controls in the Uniform Controls View
	// we must create them explicitly:
	Synthclipse.createScriptControls();
    Synthclipse.createControls(baseRenderer);
};

renderable.resize = function(width, height) {
	viewportWidth = width;
	viewportHeight = height;

	var tileWidth = width / Level;
	var tileHeight = height / Level;

	for (var i = 0; i < 9; i++) {
		tiles[i].resize(tileWidth, tileHeight);
	}

	baseRenderer.resize(width, height);
};

Synthclipse.setRenderable(renderable);