Add pbrone stuff

audiotrope · Aug 3, 2024 · 68fdcb2 · 68fdcb2
1 parent 9fc4bf4
commit 68fdcb2
Show file tree

Hide file tree

Showing 41 changed files with 58,789 additions and 0 deletions.
diff --git a/preview/css/main.css b/preview/css/main.css
@@ -0,0 +1,133 @@
+/* Base CSS */
+
+:root{
+	--error: #FF0000;
+	--success: #00FF00;
+	--warning: #FFFF00;
+	--info: #FFFFFF;
+}
+
+body{
+	box-sizing: border-box;
+	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+body, main{
+	margin: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: black;
+}
+
+/* GUI elements */
+
+.nav-main-elements{
+	display: grid;
+	grid-template-columns: min-content auto;
+	width: 100%;
+	overflow: hidden;
+}
+
+nav {
+	height: 0;
+	display: block;
+	position: absolute;
+	top:0px;
+	left:20px;
+	z-index: 1;
+	background-color: #00000050;
+	color:#ffffff;
+	overflow: hidden;
+	border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+nav input,
+nav select{
+	margin: 10px;
+}
+
+nav select{
+	border-radius: 3px;
+}
+
+nav label{
+	margin: 10px;
+	white-space: nowrap;
+}
+
+#gui_enable{
+	display:none;
+}
+
+#gui_enable_label{
+	width: 100%;
+    display: block;
+    text-align: center;
+    margin: 0px;
+	padding-bottom: 10px;
+	padding-top:10px;
+	font-size: 0.75em;
+}
+
+#gui_enable_label:hover{
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+/* Loading notes */
+
+.message-area{
+	position:absolute;
+	bottom: 0px;
+	left: 20px;
+	color: white;
+	pointer-events:none;
+	user-select:none;
+	font-family: monospace;
+	background-color: #00000050;
+	border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+	padding: 10px;
+}
+
+.message-area:empty{
+	display: none;
+}
+
+/* Watermark */
+
+.watermark{
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
+}
+
+.watermark img{
+	mix-blend-mode: exclusion;
+	opacity: 50%;
+}
+
+.watermark-off{
+	display: none;
+}
+
+.watermark-small{
+	display: block;
+}
+
+.watermark-small img{
+	width: 40px;
+}
+
+.watermark-large{
+	display:block;
+}
+
+.watermark-large img{
+	width: 80px;
+}
diff --git a/preview/favicon.ico b/preview/favicon.ico
diff --git a/preview/hdri-exposure.html b/preview/hdri-exposure.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="./css/main.css">
+		<title>PBR.ONE HDRI Exposure Preview</title>
+	</head>
+	<body>
+		<script type="module" src="./js/views/hdri-exposure.js"></script>
+		<main id="renderer_target">
+			<nav>
+				<div class="nav-main-elements">
+					<label pbr1-onlyshowifmultivalued="environment_name" for="environment_name" title="environment_name">Environment</label>
+					<select 
+						onchange="window.PBR1_CHANGE({'environment_index':this.value});"
+						pbr1-onlyshowifmultivalued="environment_name"
+						pbr1-optionsource="environment_name"
+						pbr1-selectedsource="environment_index"
+						id="environment_name"
+						name="environment_name"
+					>
+					</select>
+
+					<label ondblclick="window.PBR1_CHANGE({'environment_exposure':null},true);" for="environment_exposure" title="environment_exposure">Exposure</label>
+					<input 
+						type="range"
+						min="-16"
+						max="16"
+						value="0"
+						id="environment_exposure"
+						step="0.25"
+						ondblclick="window.PBR1_CHANGE({'environment_exposure':null},true);"
+						oninput="window.PBR1_CHANGE({'environment_exposure':this.value});",
+						onload="window.PBR1_CHANGE({'environment_exposure':this.value});"
+					>
+					<label for="environment_tonemapping" title="environment_tonemapping">Tone Mapping</label>
+					<select 
+						id="environment_tonemapping"
+						onchange="window.PBR1_CHANGE({'environment_tonemapping':this.value});"
+						onload="window.PBR1_CHANGE({'environment_tonemapping':this.value});"
+					>
+						<option title="filmic" value="filmic">ACES filmic</option>
+						<option title="linear" value="linear">Linear</option>
+
+					</select>
+				</div>
+				<label id="gui_enable_label" for="gui_enable" title="gui_enable">hide</label>
+				<input 
+					checked="checked"
+					type="checkbox"
+					id="gui_enable"
+					onchange="window.PBR1_CHANGE({'gui_enable':this.checked ? '1' : '0'});"
+				>
+			</nav>
+			<a class="watermark watermark-off" target="_blank" href="https://pbr.one"><img src="./media/logo.png"></a>
+			<span class="message-area" id="messageArea"></span>
+		</main>
+	</body>
+</html>
diff --git a/preview/hdri-shading.html b/preview/hdri-shading.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="./css/main.css">
+		<title>PBR.ONE HDRI Shading Preview</title>
+	</head>
+	<body>
+		<script type="module" src="./js/views/hdri-shading.js"></script>
+		<main id="renderer_target">
+			<nav>
+				<div class="nav-main-elements">
+					<label pbr1-onlyshowifmultivalued="environment_name" for="environment_name" title="environment_name">Environment</label>
+					<select 
+						onchange="window.PBR1_CHANGE({'environment_index':this.value});"
+						pbr1-onlyshowifmultivalued="environment_name"
+						pbr1-optionsource="environment_name"
+						pbr1-selectedsource="environment_index"
+						id="environment_name"
+						name="environment_name"
+					>
+					</select>
+
+					<label id="environment_exposure_label" for="environment_exposure" title="environment_exposure">Exposure</label>
+					<input 
+						type="range"
+						min="-16"
+						max="16"
+						value="0"
+						id="environment_exposure"
+						step="0.25"
+						oninput="window.PBR1_CHANGE({'environment_exposure':this.value});"
+						ondblclick="window.PBR1_CHANGE({'environment_exposure':null},true);"
+					>
+					<label for="spheres_enable" title="spheres_enable">Show Spheres</label>
+					<input 
+						checked="checked"
+						type="checkbox"
+						id="spheres_enable"
+						onchange="window.PBR1_CHANGE({'spheres_enable':this.checked ? 1 : 0});"
+					>
+				</div>
+				<label id="gui_enable_label" for="gui_enable" title="gui_enable">hide</label>
+				<input 
+					checked="checked"
+					type="checkbox"
+					id="gui_enable"
+					onchange="window.PBR1_CHANGE({'gui_enable':this.checked ? '1' : '0'});"
+				>
+			</nav>
+			<a class="watermark watermark-off" target="_blank" href="https://pbr.one"><img src="./media/logo.png"></a>
+			<span class="message-area" id="messageArea"></span>
+		</main>
+	</body>
+</html>
diff --git a/preview/index.html b/preview/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>PBR.ONE</title>
+	<style>
+		body{
+			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+			margin: 25px;
+			font-size: 1.25em;
+		}
+		ul{
+			line-height: 2.5;
+		}
+	</style>
+</head>
+<body>
+	<h1>PBR.ONE</h1>
+	<p>
+		Previews:
+		<ul>
+			<li><a href="./hdri-exposure.html">hdri-exposure.html</a></li>
+			<li><a href="./hdri-shading.html">hdri-shading.html</a></li>
+			<li><a href="./material-shading.html">material-shading.html</a></li>
+			<li><a href="./texture-tiling.html">texture-tiling.html</a></li>
+		</ul>
+	</p>
+	<p>
+		Other helpful links:
+		<ul>
+			<li><a href="https://pbr.one">Visit the PBR.ONE website</a></li>
+			<li><a href="https://docs.pbr.one">Read the documentation</a></li>
+		</ul>
+	</p>
+</body>
+</html>
diff --git a/preview/js/common/base.js b/preview/js/common/base.js
@@ -0,0 +1,65 @@
+import * as CONSTANTS from './constants.js';
+import * as SCENE_CONFIGURATION from './scene-configuration.js';
+import * as MISC from "./misc.js";
+import * as GUI from "./gui.js";
+import * as MESSAGE from "./message.js";
+
+window.addEventListener("error", (event) => {
+	new MESSAGE.newError("An error occured:",event.message);
+},true);
+
+/**
+ * The main function that starts the preview.
+ */
+export function start(initializationFunction,preprocessingFunction,updateFunction,animationFunction){
+
+	// Run the supplied initializationFunction
+	initializationFunction();
+
+	// Handle GUI changes
+	document.addEventListener("PBR1_CHANGE",(e) => { 
+		GUI.handleGUIChangeEvent(e,updateFunction);
+	});
+
+	// Handle changes in the hash
+	window.addEventListener('hashchange', (e) =>{
+		var parsedHashString = MISC.parseHashString();
+		var oldAndNew = SCENE_CONFIGURATION.updateConfiguration(parsedHashString,CONSTANTS.updateMode.extendCurrent);
+
+		// Perform preprocessing
+		if(preprocessingFunction){
+			oldAndNew.new = preprocessingFunction(oldAndNew.new);
+		}
+
+		updateFunction(oldAndNew.old,oldAndNew.new);
+
+		GUI.updateGuiFromCurrentSceneConfiguration();
+	});
+
+
+	// Perform the initial loading by simulating a change in the hashstring.
+	var initConfiguration = MISC.parseHashString();
+	var oldAndNew = SCENE_CONFIGURATION.updateConfiguration(initConfiguration,CONSTANTS.updateMode.startFromFoundation);
+
+	// Perform preprocessing
+	if(preprocessingFunction){
+		oldAndNew.new = preprocessingFunction(oldAndNew.new);
+	}
+
+	// Set defaults for GUI and watermark if none are contained in the initial configuration
+	if(!SCENE_CONFIGURATION.getConfiguration().watermark_enable){
+		SCENE_CONFIGURATION.updateConfiguration({'watermark_enable':0},CONSTANTS.updateMode.extendCurrent);
+	}
+	if(!SCENE_CONFIGURATION.getConfiguration().gui_enable){
+		SCENE_CONFIGURATION.updateConfiguration({'gui_enable':1},CONSTANTS.updateMode.extendCurrent);
+	}
+	console.debug("Updating scene (old,new): ",oldAndNew.old,oldAndNew.new);
+	updateFunction(oldAndNew.old,oldAndNew.new);
+	GUI.updateGuiFromCurrentSceneConfiguration();
+
+	// Run the animation function for THREE.js, if supplied.
+	// Not all views use this.
+	if(animationFunction){
+		animationFunction();
+	}
+}