mirror of
https://github.com/pissang/claygl.git
synced 2026-01-25 16:46:30 +00:00
139 lines
5.4 KiB
HTML
139 lines
5.4 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script type="text/javascript" src="lib/require.js"></script>
|
|
<script type="text/javascript" src="lib/stats.js"></script>
|
|
<script type="text/javascript" src="lib/dat.gui.js"></script>
|
|
</head>
|
|
<body style="margin:0px;">
|
|
<style>
|
|
#main {
|
|
background: #000;
|
|
}
|
|
</style>
|
|
<canvas id="main"></canvas>
|
|
<script type="text/javascript">
|
|
require(['../dist/claygl', 'js/SSRPass'], function(clay, SSRPass) {
|
|
|
|
var config = {
|
|
maxIteration: 32,
|
|
maxBinarySearchIteration: 5,
|
|
maxRayDistance: 10,
|
|
pixelStride: 16,
|
|
pixelStrideZCutoff: 50,
|
|
screenEdgeFadeStart: 0.9,
|
|
eyeFadeStart: 0.8,
|
|
eyeFadeEnd: 1,
|
|
|
|
glossiness: 1,
|
|
minGlossiness: 0.1,
|
|
|
|
zThicknessThreshold: 0.1
|
|
};
|
|
|
|
var renderer = new clay.Renderer({
|
|
canvas: document.getElementById('main'),
|
|
devicePixelRatio: 1.0
|
|
});
|
|
var camera = new clay.camera.Perspective({
|
|
aspect: renderer.getViewportAspect()
|
|
});
|
|
camera.position.set(0, 4, 4);
|
|
camera.lookAt(clay.Vector3.ZERO);
|
|
|
|
var gBuffer = new clay.deferred.GBuffer();
|
|
var ssrPass = new SSRPass({
|
|
gBuffer: gBuffer
|
|
});
|
|
|
|
var frameBuffer = new clay.FrameBuffer();
|
|
var colorTex = new clay.Texture2D();
|
|
var timeline = new clay.Timeline();
|
|
timeline.start();
|
|
|
|
var camera = new clay.camera.Perspective({
|
|
aspect: renderer.getViewportAspect(),
|
|
far: 100
|
|
});
|
|
|
|
camera.position.set(2, 2, 2);
|
|
camera.lookAt(clay.Vector3.ZERO);
|
|
|
|
var control = new clay.plugin.OrbitControl({
|
|
target: camera,
|
|
domElement: renderer.canvas,
|
|
sensitivity: 0.4,
|
|
maxPolarAngle: Math.PI / 1.8,
|
|
minPolarAngle: 0.1
|
|
});
|
|
|
|
var loader = new clay.loader.GLTF();
|
|
loader.load('assets/models/basic_scene/scene.gltf');
|
|
|
|
loader.success(function (res) {
|
|
var scene = res.scene;
|
|
scene.rotation.rotateX(-Math.PI / 2);
|
|
|
|
var light = scene.getNode('Spot');
|
|
light.range = 30;
|
|
light.umbraAngle = 10;
|
|
light.penumbraAngle = 25;
|
|
light.lookAt(scene.position);
|
|
|
|
// scene.traverse(function (node) {
|
|
// if (node.material) {
|
|
// node.material.set('glossiness', 0.8);
|
|
// }
|
|
// });
|
|
scene.getNode('Plane').culling = false;
|
|
scene.getNode('Plane_001').culling = false;
|
|
|
|
scene.getNode('Plane').material.set('glossiness', 0.8);
|
|
scene.getNode('Plane').material.set('color', [0.4, 0.4, 0.4]);
|
|
|
|
timeline.on('frame', function(deltaTime) {
|
|
control.update(deltaTime);
|
|
|
|
frameBuffer.attach(colorTex);
|
|
frameBuffer.bind(renderer);
|
|
renderer.render(scene, camera);
|
|
frameBuffer.unbind(renderer);
|
|
|
|
gBuffer.update(renderer, scene, camera);
|
|
ssrPass.render(renderer, camera, colorTex);
|
|
});
|
|
});
|
|
|
|
window.onresize = function() {
|
|
var width = window.innerWidth;
|
|
var height = window.innerHeight;
|
|
renderer.resize(width, height);
|
|
gBuffer.resize(width, height);
|
|
colorTex.width = width;
|
|
colorTex.height = height;
|
|
colorTex.dirty();
|
|
camera.aspect = renderer.getViewportAspect();
|
|
};
|
|
window.onresize();
|
|
|
|
function updateConfig() {
|
|
for (var name in config) {
|
|
ssrPass.setParameter(name, config[name]);
|
|
}
|
|
}
|
|
updateConfig();
|
|
|
|
var gui = new dat.GUI();
|
|
gui.add(config, 'maxIteration', 0, 200).step(1).onChange(updateConfig);
|
|
gui.add(config, 'maxBinarySearchIteration', 0, 20).step(1).onChange(updateConfig);
|
|
gui.add(config, 'maxRayDistance', 0, 10).onChange(updateConfig);
|
|
gui.add(config, 'pixelStride', 0, 32).onChange(updateConfig);
|
|
gui.add(config, 'pixelStrideZCutoff', 0, 50).onChange(updateConfig);
|
|
gui.add(config, 'screenEdgeFadeStart', 0, 1).onChange(updateConfig);
|
|
gui.add(config, 'eyeFadeStart', 0, 1).onChange(updateConfig);
|
|
gui.add(config, 'eyeFadeEnd', 0, 1).onChange(updateConfig);
|
|
gui.add(config, 'minGlossiness', 0, 1).onChange(updateConfig);
|
|
gui.add(config, 'zThicknessThreshold', 0, 2).onChange(updateConfig);
|
|
});
|
|
</script>
|
|
</html> |