fragment-tools 0.1.13 → 0.1.15

package/src/client/app/modules/Params.svelte

@@ -1,112 +1,137 @@
 <script context="module">
-import { writable } from "svelte/store";
+	import { writable } from 'svelte/store';
 
-export const params = writable([]);
-
-let ID = 0;
+	export const params = writable([]);
 
+	let ID = 0;
 </script>
 
 <script>
-import { onMount, onDestroy } from "svelte";
-import { props } from "../stores";
-import { sketches } from "../stores/sketches.js";
-import { monitors } from "../stores/rendering";
-import Module from "../ui/Module.svelte";
-import Field from "../ui/Field.svelte";
-import OutputParams from "../ui/ParamsOutput.svelte";
-import ModuleHeaderAction from "../ui/ModuleHeaderAction.svelte";
-
-export let mID;
-export let hasHeader = true;
-export let output = true;
-
-let id = ID++;
-let selected = id;
-let sketch, sketchKey, sketchProps = {};
-let monitor, showOutputParams;
-
-onMount(() => {
-    $params = [
-        ...$params,
-        {
-            id,
-        }
-    ];
-});
-
-onDestroy(() => {
-    $params = $params.filter((p) => p.id !== id);
-});
-
-$: options = [
-    ...$monitors.map((monitor, index) => {
-        return { value: index, label: `monitor ${index + 1}`}
-    }),
-    ...$params.length > 1 ? [{ value: "output", label: "output"}] : [],
-];
-
-monitors.subscribe((value) => {
-    monitor = $monitors[Math.min(selected, $monitors.length - 1)];
-    sketchKey = monitor ? monitor.selected : undefined;
-});
-
-$: {
-    sketch = $sketches[sketchKey];
-    sketchProps = $props[sketchKey];
-}
-
-$: showOutputParams = (monitor && monitor.selected === "output") ||
-        ($params.length === 1) ||
-        (selected === "output");
-
+	import { onMount, onDestroy } from 'svelte';
+	import { sketches } from '../stores/sketches.js';
+	import { monitors, rendering } from '../stores/rendering';
+	import Module from '../ui/Module.svelte';
+	import Field from '../ui/Field.svelte';
+	import OutputParams from '../ui/ParamsOutput.svelte';
+	import ModuleHeaderAction from '../ui/ModuleHeaderAction.svelte';
+	import { updateProp, props } from '../stores/props';
+
+	export let mID;
+	export let hasHeader = true;
+	export let output = true;
+
+	let id = ID++;
+	let selected = id;
+	let sketch,
+		sketchKey,
+		sketchProps = {};
+	let monitor, showOutputParams;
+
+	onMount(() => {
+		$params = [
+			...$params,
+			{
+				id,
+			},
+		];
+	});
+
+	onDestroy(() => {
+		$params = $params.filter((p) => p.id !== id);
+	});
+
+	$: options = [
+		...$monitors.map((monitor, index) => {
+			return { value: index, label: `monitor ${index + 1}` };
+		}),
+		...($params.length > 1 ? [{ value: 'output', label: 'output' }] : []),
+	];
+
+	monitors.subscribe((value) => {
+		monitor = $monitors[Math.min(selected, $monitors.length - 1)];
+		sketchKey = monitor ? monitor.selected : undefined;
+	});
+
+	$: {
+		sketch = $sketches[sketchKey];
+		sketchProps = $props[sketchKey];
+	}
+
+	$: showOutputParams =
+		(monitor && monitor.selected === 'output') ||
+		$params.length === 1 ||
+		selected === 'output';
 </script>
 
-<Module {mID} {hasHeader} name={`Parameters`} slug="params" >
-    <div slot="header-right">
-        {#if options.length > 1 }
-        <ModuleHeaderAction
-            value={selected}
-            permanent
-            border
-            on:change={(event) => selected = event.detail}
-            options={options}
-        />
-        {/if }
-    </div>
-    {#if showOutputParams && output }
-        <OutputParams />
-    {/if}
-
-    {#if sketch }
-        {#if typeof props === "object"}
-            {#if output}
-                <Field key="framerate" value={isFinite(sketch.fps) ? sketch.fps : 60} params={{disabled: true}}/>
-            {/if}
-            {#if sketch.duration && sketch.duration > 0 && output }
-                <Field key="duration" value={sketch.duration} params={{disabled: true, suffix: "s"}}/>
-            {/if }
-            {#each Object.keys(sketchProps) as key, i}
-                {#if !sketchProps[key].hidden}
-                <Field
-                    context={sketchKey}
-                    key={key}
-                    value={sketchProps[key].value}
-                    type={sketchProps[key].type}
-                    bind:params={sketchProps[key].params}
-                    on:click={() => {
-                        $props[sketchKey][key].value._refresh = true;
-                    }}
-                    on:change={(event) => {
-                        $props[sketchKey][key].value = event.detail;
-
-                        if (typeof $props[sketchKey][key].onChange === 'function') {
-                            $props[sketchKey][key].onChange($props[sketchKey][key]);
-                        }
-                    }}
-                />
-                {/if}
-            {/each}
-        {/if}
-    {/if}
+<Module {mID} {hasHeader} name={`Parameters`} slug="params">
+	<div slot="header-right">
+		{#if options.length > 1}
+			<ModuleHeaderAction
+				value={selected}
+				permanent
+				border
+				on:change={(event) => (selected = event.detail)}
+				{options}
+			/>
+		{/if}
+	</div>
+	{#if showOutputParams && output}
+		<OutputParams />
+	{/if}
+
+	{#if sketch}
+		{#if typeof props === 'object'}
+			{#if output}
+				<Field
+					key="framerate"
+					value={isFinite(sketch.fps) ? sketch.fps : 60}
+					disabled
+				/>
+			{/if}
+			{#if sketch.duration && sketch.duration > 0 && output}
+				<Field
+					key="duration"
+					value={sketch.duration}
+					params={{ suffix: 's' }}
+					disabled
+				/>
+			{/if}
+			{#each Object.keys(sketchProps) as key, index (key)}
+				{@const sketchProp = sketchProps[key]}
+				{@const {
+					hidden,
+					displayName,
+					value,
+					type,
+					disabled,
+					__initialValue: initialValue,
+				} = sketchProp}
+				{@const isDisabled =
+					typeof disabled === 'function' ? disabled() : disabled}
+				{#if typeof hidden === 'function' ? !hidden() : !hidden}
+					<Field
+						context={sketchKey}
+						{key}
+						{displayName}
+						{value}
+						{initialValue}
+						{type}
+						{index}
+						disabled={isDisabled}
+						bind:params={sketchProps[key].params}
+						on:click={() => {
+							$props[sketchKey][key].value._refresh = true;
+						}}
+						on:change={(event) => {
+							updateProp(sketchKey, key, event.detail, {
+								width: $rendering.width,
+								height: $rendering.height,
+								pixelRatio: $rendering.pixelRatio,
+							});
+						}}
+					/>
+				{/if}
+			{/each}
+		{/if}
+	{/if}
 </Module>

package/src/client/app/renderers/2DRenderer.js

@@ -1,5 +1,5 @@
 export let onMountPreview = ({ canvas }) => {
-    return {
-        context: canvas.getContext("2d"),
-    }
+	return {
+		context: canvas.getContext('2d'),
+	};
 };

package/src/client/app/renderers/FragmentRenderer.js

@@ -1,7 +1,7 @@
-import { fragment } from "../lib/gl";
-import { client } from "@fragment/client";
-import { getShaderPath } from "../utils/glsl.utils";
-import { clearError } from "../stores/errors";
+import { fragment } from '../lib/gl';
+import { client } from '@fragment/client';
+import { getShaderPath } from '../utils/glsl.utils';
+import { clearError } from '../stores/errors';
 
 let frags = [];
 
@@ -19,44 +19,51 @@ export let onMountPreview = ({ canvas, id }) => {
 };
 
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	let { frag } = frags.find(f => f.id === id);
+	let { frag } = frags.find((f) => f.id === id);
 
 	frag.resize({ width, height, pixelRatio });
 };
 
 export let onDestroyPreview = ({ canvas, id }) => {
-	let fragIndex = frags.findIndex(f => f.id === id);
+	let fragIndex = frags.findIndex((f) => f.id === id);
 	let { frag } = frags[fragIndex];
-	
+
 	clearError(frag.gl.__uuid);
 
 	frag.destroy();
 	frags.splice(fragIndex, 1);
 };
 
-client.on('shader-update', (data) => {
+client.on('shader-update', (shaderUpdates) => {
 	frags.forEach(({ frag }) => clearError(frag.gl.__uuid));
 
-	const { filepath, source } = data;
+	shaderUpdates.forEach((shaderUpdate) => {
+		const { filepath, source } = shaderUpdate;
 
-	const programs = frags.map(({ frag }) => frag.program);
+		const programs = frags.map(({ frag }) => frag.program);
 
-	programs.forEach((program) => {
-		const { fragment, vertex } = program;
+		programs.forEach((program) => {
+			const { fragment, vertex } = program;
 
-		const shaders = {
-			vertexShader: vertex,
-			fragmentShader: fragment
-		};
+			const shaders = {
+				vertexShader: vertex,
+				fragmentShader: fragment,
+			};
 
-		Object.keys(shaders).forEach((key) => {
-			const shaderPath = getShaderPath(shaders[key]);
+			Object.keys(shaders).forEach((key) => {
+				const shaderPath = getShaderPath(shaders[key]);
 
-			if (shaderPath === filepath) {
-				console.log(`[fragment] shader update ${shaderPath.replace(__CWD__, "")}`);
-				program[key] = source;
-				program.needsUpdate = true;
-			}
+				if (shaderPath === filepath) {
+					console.log(
+						`[fragment-plugin-hsr] hsr update ${shaderPath.replace(
+							__CWD__,
+							'',
+						)}`,
+					);
+					program[key] = source;
+					program.needsUpdate = true;
+				}
+			});
 		});
 	});
 });

package/src/client/app/renderers/P5GLRenderer.js

@@ -0,0 +1,144 @@
+import p5 from 'p5';
+import { client } from '@fragment/client';
+import { getShaderPath } from '../utils/glsl.utils';
+import { clearError } from '../stores/errors';
+
+let previews = [];
+
+export let onMountPreview = ({ id, width, height }) => {
+	const p = new p5((sketch) => {
+		sketch.setup = () => {
+			sketch.createCanvas(width, height, 'webgl');
+		};
+	});
+
+	const preview = {
+		id,
+		p,
+	};
+
+	previews.push(preview);
+
+	return {
+		canvas: p.canvas,
+		p,
+	};
+};
+
+export let onBeforeUpdatePreview = ({ id }) => {
+	const preview = previews.find((p) => p.id === id);
+
+	if (preview) {
+		preview.rendered = false;
+	}
+};
+
+export let onAfterUpdatePreview = ({ id }) => {
+	const preview = previews.find((p) => p.id === id);
+
+	if (preview) {
+		preview.rendered = true;
+	}
+
+	if (
+		previews.every((preview) => preview.rendered) &&
+		_shaderUpdates.length > 0
+	) {
+		clearShaderUpdates();
+	}
+};
+
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	const preview = previews.find((p) => p.id === id);
+
+	if (preview) {
+		preview.p.resizeCanvas(width * pixelRatio, height * pixelRatio, false);
+	}
+};
+
+export let onDestroyPreview = ({ id }) => {
+	const previewIndex = previews.find((p) => p.id === id);
+	const preview = previews[previewIndex];
+
+	if (preview) {
+		preview.p.remove();
+	}
+
+	previews.splice(previewIndex, 1);
+};
+
+/* HOT SHADER RELOADING */
+const { shader } = p5.prototype;
+const { useProgram } = p5.Shader.prototype;
+
+p5.Shader.prototype.useProgram = function () {
+	// avoid p5 throwing error covering shader syntax error overlay
+	if (this._glProgram !== 0) {
+		useProgram.call(this);
+	}
+};
+
+p5.prototype.shader = function (s) {
+	let needsUpdate = false;
+	['_vertSrc', '_fragSrc'].forEach((key) => {
+		const shader = s[key];
+		const shaderPath = getShaderPath(shader);
+		const shaderUpdate = _shaderUpdates.find(
+			(shaderUpdate) => shaderUpdate.filepath === shaderPath,
+		);
+
+		if (shaderUpdate) {
+			console.log(
+				`[fragment-plugin-hsr] hsr update ${shaderPath.replace(
+					__CWD__,
+					'',
+				)}`,
+			);
+			needsUpdate = true;
+
+			s[key] = shaderUpdate.source;
+		}
+	});
+
+	if (needsUpdate) {
+		s.bindShader();
+		s.unbindShader();
+
+		// set it to undefined so it goes into useProgram when binded
+		// see useProgram
+		this._renderer._curShader = undefined;
+
+		// set _glProgram so it compiles the shader again
+		s._glProgram = 0;
+		// set to false so it caches attributes and uniforms
+		s._loadedAttributes = false;
+		s._loadedUniforms = false;
+		// empty samplers array because of samplers.push()
+		s.samplers = [];
+
+		// call s.init() and gl.useProgram
+		s.bindShader();
+	}
+
+	return shader.call(this, s);
+};
+
+let _shaderUpdates = [];
+
+function clearShaderUpdates() {
+	_shaderUpdates = [];
+}
+
+if (import.meta.hot) {
+	import.meta.hot.on('sketch-update', (data) => {
+		clearShaderUpdates();
+	});
+}
+
+client.on('shader-update', (shaderUpdates) => {
+	previews.forEach(({ p }) => {
+		clearError(p._renderer.GL.__uuid);
+	});
+
+	_shaderUpdates = shaderUpdates;
+});

package/src/client/app/renderers/P5Renderer.js

@@ -1,4 +1,4 @@
-import p5 from "p5";
+import p5 from 'p5';
 
 let previews = [];
 
@@ -6,7 +6,7 @@ export let onMountPreview = ({ id, width, height }) => {
 	const p = new p5((sketch) => {
 		sketch.setup = () => {
 			sketch.createCanvas(width, height);
-		}
+		};
 	});
 
 	const preview = {
@@ -15,15 +15,15 @@ export let onMountPreview = ({ id, width, height }) => {
 	};
 
 	previews.push(preview);
-	
-    return {
+
+	return {
 		canvas: p.canvas,
 		p,
-    };
+	};
 };
 
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {
-	const preview = previews.find(p => p.id === id);
+	const preview = previews.find((p) => p.id === id);
 
 	if (preview) {
 		preview.p.resizeCanvas(width * pixelRatio, height * pixelRatio, false);
@@ -31,9 +31,12 @@ export let onResizePreview = ({ id, width, height, pixelRatio }) => {
 };
 
 export let onDestroyPreview = ({ id }) => {
-	const preview = previews.find(p => p.id === id);
+	const previewIndex = previews.find((p) => p.id === id);
+	const preview = previews[previewIndex];
 
 	if (preview) {
 		preview.p.remove();
 	}
+
+	previews.splice(previewIndex, 1);
 };