blob: 7a411effce9614100438aa9ea1c5ab298ec0de7b [file] [log] [blame]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>One Sphere WebGPU</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
<style>
html,
body {
width: 100%;
padding: 0;
margin: 0;
background-color: #2a2342;
color: #ffffff;
font-family: "acumin-pro";
}
#renderCanvas {
width: 1024px;
height: 768px;
display: block;
font-size: 0;
margin: auto;
border:none !important;
outline:none !important;
}
.container {
display: grid;
grid-template-columns: auto 170px 754px 100px auto;
grid-template-rows: 60px 768px;
}
.headerLogo {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
background-color: #201936;
}
.headerLogo > a > img {
width: auto;
height: 60px;
margin-left: 10px;
}
.headerText {
grid-column-start: 3;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
font-size: 35px;
line-height: 60px;
text-align: center;
background-color: #201936;
font-family: "acumin-pro-extra-condensed";
}
.headerFPS {
grid-column-start: 4;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 1;
font-size: 15px;
line-height: 60px;
text-align: center;
background-color: #BB464B;
}
.content {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 2;
}
a {
color: #FFFFFF;
text-decoration: unset;
}
a:hover {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:focus {
color: #FFFFFF;
}
</style>
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="babylonWebGpu.max.js"></script>
<script src="babylonjs.loaders.min.js"></script>
</head>
<body>
<div class="container">
<div class="headerLogo">
<a href="https://doc.babylonjs.com/extensions/WebGPU">
<img src="logo.svg"></img>
</a>
</div>
<div class="headerText">
<a href="https://doc.babylonjs.com/extensions/WebGPU">
WebGPU Experiment
</a>
</div>
<div class="headerFPS" id="fps">0</div>
<div class="content">
<canvas id="renderCanvas" width="1024" height="768"></canvas>
</div>
<div>
<script src="oneSphereWebGPUGLSLShaders.js"></script>
<script src="oneSphereWebGPUWSLShaders.js"></script>
<script>
const ShaderKind = {
vertex: "Vertex",
fragment: "Fragment",
compute: "Compute"
};
class CompileResult {
constructor(result) {
this.result = result;
}
GetErrorMessage() {
return null;
}
GetBinary() {
return this.result;
}
}
class CompileOptions {
constructor() {
}
}
class Compiler {
constructor() {
}
CompileGlslToSpv(source, kind, something, entryPointName, options) {
let wslSource;
switch (source) {
case vertexShaderGLSL1:
wslSource = vertexShaderWSL1;
break;
case fragmentShaderGLSL1:
wslSource = fragmentShaderWSL1;
break;
case vertexShaderGLSL2:
wslSource = vertexShaderWSL2;
break;
case fragmentShaderGLSL2:
wslSource = fragmentShaderWSL2;
break;
default:
throw new Error("Unexpected shader!");
}
return new CompileResult(wslSource);
}
}
let Shaderc = {Compiler, CompileOptions, shader_kind: ShaderKind};
(async function() {
if (!navigator.gpu || GPUBufferUsage.COPY_SRC === undefined) {
alert("WebGPU is not enabled. Are you using Safari Technology Preview 92 or above?");
return;
}
const canvas = document.getElementById("renderCanvas");
const divFps = document.getElementById("fps");
const engine = new BABYLON.WebGPUEngine(canvas, {antialiasing: false});
await engine.initAsync({shaderc: Shaderc});
const scene = new BABYLON.Scene(engine);
scene.environmentTexture = new BABYLON.CubeTexture("https://assets.babylonjs.com/environments/environmentSpecular.env", scene);
var material = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
material.roughness = 0;
material.metallic = 0;
var ico = BABYLON.Mesh.CreateIcoSphere("ico", {
flat: true,
subdivisions: 3
}, scene);
ico.material = material;
scene.createDefaultCamera(true, true, true);
scene.createDefaultSkybox(scene.environmentTexture, true, undefined, 0.3);
engine.runRenderLoop(() => {
scene.render();
divFps.innerHTML = engine.getFps().toFixed() + " fps";
});
})();
</script>
</body>
</html>