mirror of
https://github.com/pissang/claygl.git
synced 2026-01-18 16:22:29 +00:00
9767eb5c72
* wip: add rect area light in example * fix normal not normalized * update example * fix light accumulation for custom light in deferred renderer * fix alpha is larger than 1 in the light accumulation * naming tweaks * updateOffset in deferred renderer * convert albedo color to sRGB in gbuffer * support depth attachment in gbuffer * fix some shadow map issue in deferred renderer * clear depth buffer after render * update pcf kernel in shadow * fix light accumulate * fix pcf shadow in deferred renderer * deferred: fix pcss * respect to material linear * can disable camera bounding box intersection in shadowmap * deferred: show black when there is no light * resize support pixelRatio * release alpha.18
290 lines
12 KiB
HTML
290 lines
12 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.nav {
|
|
width: 200px;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
border-right: 1px solid #eee;
|
|
}
|
|
.nav ul {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
margin-top: 10px;
|
|
}
|
|
.nav ul li {
|
|
list-style: none;
|
|
padding: 5px 20px;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
.nav ul li a {
|
|
color: #444;
|
|
text-decoration: none;
|
|
display: block
|
|
}
|
|
.nav ul li.current {
|
|
background-color: #8d00be;
|
|
}
|
|
.nav ul li.current a {
|
|
color: #fff;
|
|
}
|
|
.main {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 200px;
|
|
}
|
|
.viewport {
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 10px;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
iframe {
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="nav">
|
|
<ul>
|
|
|
|
<li><a href="ambientcubemap.html" data-hash="ambientcubemap" target="viewport">ambientcubemap(ts)</a></li>
|
|
|
|
<li><a href="anisotropic.html" data-hash="anisotropic" target="viewport">anisotropic(ts)</a></li>
|
|
|
|
<li><a href="app_ambientcubmap.html" data-hash="app_ambientcubmap" target="viewport">app_ambientcubmap(ts)</a></li>
|
|
|
|
<li><a href="app_basic.html" data-hash="app_basic" target="viewport">app_basic(ts)</a></li>
|
|
|
|
<li><a href="app_event.html" data-hash="app_event" target="viewport">app_event(ts)</a></li>
|
|
|
|
<li><a href="app_gbuffer.html" data-hash="app_gbuffer" target="viewport">app_gbuffer(ts)</a></li>
|
|
|
|
<li><a href="app_geometry.html" data-hash="app_geometry" target="viewport">app_geometry(ts)</a></li>
|
|
|
|
<li><a href="app_instancing.html" data-hash="app_instancing" target="viewport">app_instancing(ts)</a></li>
|
|
|
|
<li><a href="app_instancing2.html" data-hash="app_instancing2" target="viewport">app_instancing2(ts)</a></li>
|
|
|
|
<li><a href="app_light.html" data-hash="app_light" target="viewport">app_light(ts)</a></li>
|
|
|
|
<li><a href="app_material.html" data-hash="app_material" target="viewport">app_material(ts)</a></li>
|
|
|
|
<li><a href="app_memory.html" data-hash="app_memory" target="viewport">app_memory</a></li>
|
|
|
|
<li><a href="app_model_animation.html" data-hash="app_model_animation" target="viewport">app_model_animation(ts)</a></li>
|
|
|
|
<li><a href="app_model_animation2.html" data-hash="app_model_animation2" target="viewport">app_model_animation2(ts)</a></li>
|
|
|
|
<li><a href="app_model_embedded.html" data-hash="app_model_embedded" target="viewport">app_model_embedded(ts)</a></li>
|
|
|
|
<li><a href="app_model_vertex_color.html" data-hash="app_model_vertex_color" target="viewport">app_model_vertex_color(ts)</a></li>
|
|
|
|
<li><a href="app_model.html" data-hash="app_model" target="viewport">app_model(ts)</a></li>
|
|
|
|
<li><a href="app_performance.html" data-hash="app_performance" target="viewport">app_performance(ts)</a></li>
|
|
|
|
<li><a href="app_performance2.html" data-hash="app_performance2" target="viewport">app_performance2(ts)</a></li>
|
|
|
|
<li><a href="composite_alchemyao.html" data-hash="composite_alchemyao" target="viewport">composite_alchemyao(ts)</a></li>
|
|
|
|
<li><a href="composite_blur.html" data-hash="composite_blur" target="viewport">composite_blur(ts)</a></li>
|
|
|
|
<li><a href="composite_coloradjust.html" data-hash="composite_coloradjust" target="viewport">composite_coloradjust(ts)</a></li>
|
|
|
|
<li><a href="composite_gbuffer.html" data-hash="composite_gbuffer" target="viewport">composite_gbuffer(ts)</a></li>
|
|
|
|
<li><a href="composite_lensflare.html" data-hash="composite_lensflare" target="viewport">composite_lensflare</a></li>
|
|
|
|
<li><a href="composite_lighting_rect.html" data-hash="composite_lighting_rect" target="viewport">composite_lighting_rect(ts)</a></li>
|
|
|
|
<li><a href="composite_lighting.html" data-hash="composite_lighting" target="viewport">composite_lighting(ts)</a></li>
|
|
|
|
<li><a href="composite_ssao.html" data-hash="composite_ssao" target="viewport">composite_ssao(ts)</a></li>
|
|
|
|
<li><a href="composite_ssr.html" data-hash="composite_ssr" target="viewport">composite_ssr(ts)</a></li>
|
|
|
|
<li><a href="composite_ssr2.html" data-hash="composite_ssr2" target="viewport">composite_ssr2(ts)</a></li>
|
|
|
|
<li><a href="composite_ssr3.html" data-hash="composite_ssr3" target="viewport">composite_ssr3(ts)</a></li>
|
|
|
|
<li><a href="composite_ssr4.html" data-hash="composite_ssr4" target="viewport">composite_ssr4(ts)</a></li>
|
|
|
|
<li><a href="composite_taa.html" data-hash="composite_taa" target="viewport">composite_taa(ts)</a></li>
|
|
|
|
<li><a href="cubeanim.html" data-hash="cubeanim" target="viewport">cubeanim</a></li>
|
|
|
|
<li><a href="cubes.html" data-hash="cubes" target="viewport">cubes(ts)</a></li>
|
|
|
|
<li><a href="cubeshadowmap.html" data-hash="cubeshadowmap" target="viewport">cubeshadowmap(ts)</a></li>
|
|
|
|
<li><a href="curlnoise.html" data-hash="curlnoise" target="viewport">curlnoise</a></li>
|
|
|
|
<li><a href="deferred_ambientcubemap.html" data-hash="deferred_ambientcubemap" target="viewport">deferred_ambientcubemap(ts)</a></li>
|
|
|
|
<li><a href="deferred_shadow.html" data-hash="deferred_shadow" target="viewport">deferred_shadow(ts)</a></li>
|
|
|
|
<li><a href="deferred_shadow2.html" data-hash="deferred_shadow2" target="viewport">deferred_shadow2(ts)</a></li>
|
|
|
|
<li><a href="deferred_shadow3.html" data-hash="deferred_shadow3" target="viewport">deferred_shadow3(ts)</a></li>
|
|
|
|
<li><a href="deferred_skinning.html" data-hash="deferred_skinning" target="viewport">deferred_skinning(ts)</a></li>
|
|
|
|
<li><a href="deferred_sphere.html" data-hash="deferred_sphere" target="viewport">deferred_sphere(ts)</a></li>
|
|
|
|
<li><a href="deferred_tube.html" data-hash="deferred_tube" target="viewport">deferred_tube(ts)</a></li>
|
|
|
|
<li><a href="deferred.html" data-hash="deferred" target="viewport">deferred(ts)</a></li>
|
|
|
|
<li><a href="deferred2.html" data-hash="deferred2" target="viewport">deferred2(ts)</a></li>
|
|
|
|
<li><a href="framebuffer.html" data-hash="framebuffer" target="viewport">framebuffer(ts)</a></li>
|
|
|
|
<li><a href="gbuffer.html" data-hash="gbuffer" target="viewport">gbuffer(ts)</a></li>
|
|
|
|
<li><a href="geometries.html" data-hash="geometries" target="viewport">geometries(ts)</a></li>
|
|
|
|
<li><a href="glb.html" data-hash="glb" target="viewport">glb</a></li>
|
|
|
|
<li><a href="gltf_texture_npot.html" data-hash="gltf_texture_npot" target="viewport">gltf_texture_npot(ts)</a></li>
|
|
|
|
<li><a href="gltf_vertex_color.html" data-hash="gltf_vertex_color" target="viewport">gltf_vertex_color(ts)</a></li>
|
|
|
|
<li><a href="gltf.html" data-hash="gltf" target="viewport">gltf(ts)</a></li>
|
|
|
|
<li><a href="gltf2.html" data-hash="gltf2" target="viewport">gltf2</a></li>
|
|
|
|
<li><a href="IBL.html" data-hash="IBL" target="viewport">IBL</a></li>
|
|
|
|
<li><a href="largegeometry.html" data-hash="largegeometry" target="viewport">largegeometry(ts)</a></li>
|
|
|
|
<li><a href="lightgroup.html" data-hash="lightgroup" target="viewport">lightgroup(ts)</a></li>
|
|
|
|
<li><a href="logdepth.html" data-hash="logdepth" target="viewport">logdepth(ts)</a></li>
|
|
|
|
<li><a href="mipmap.html" data-hash="mipmap" target="viewport">mipmap(ts)</a></li>
|
|
|
|
<li><a href="normalmap.html" data-hash="normalmap" target="viewport">normalmap(ts)</a></li>
|
|
|
|
<li><a href="parallaxocclusionmap.html" data-hash="parallaxocclusionmap" target="viewport">parallaxocclusionmap(ts)</a></li>
|
|
|
|
<li><a href="particle.html" data-hash="particle" target="viewport">particle(ts)</a></li>
|
|
|
|
<li><a href="performance.html" data-hash="performance" target="viewport">performance(ts)</a></li>
|
|
|
|
<li><a href="physically_based_shading.html" data-hash="physically_based_shading" target="viewport">physically_based_shading(ts)</a></li>
|
|
|
|
<li><a href="picking_gpu.html" data-hash="picking_gpu" target="viewport">picking_gpu</a></li>
|
|
|
|
<li><a href="picking.html" data-hash="picking" target="viewport">picking(ts)</a></li>
|
|
|
|
<li><a href="picking2.html" data-hash="picking2" target="viewport">picking2(ts)</a></li>
|
|
|
|
<li><a href="rgbedecoder.html" data-hash="rgbedecoder" target="viewport">rgbedecoder(ts)</a></li>
|
|
|
|
<li><a href="shadow_directional.html" data-hash="shadow_directional" target="viewport">shadow_directional(ts)</a></li>
|
|
|
|
<li><a href="shadow_pcss.html" data-hash="shadow_pcss" target="viewport">shadow_pcss(ts)</a></li>
|
|
|
|
<li><a href="shadow_pcss2.html" data-hash="shadow_pcss2" target="viewport">shadow_pcss2(ts)</a></li>
|
|
|
|
<li><a href="shadowmap.html" data-hash="shadowmap" target="viewport">shadowmap(ts)</a></li>
|
|
|
|
<li><a href="skybox.html" data-hash="skybox" target="viewport">skybox(ts)</a></li>
|
|
|
|
<li><a href="skydome.html" data-hash="skydome" target="viewport">skydome(ts)</a></li>
|
|
|
|
<li><a href="spherical_harmonic.html" data-hash="spherical_harmonic" target="viewport">spherical_harmonic(ts)</a></li>
|
|
|
|
<li><a href="standard_material.html" data-hash="standard_material" target="viewport">standard_material</a></li>
|
|
|
|
<li><a href="stereo.html" data-hash="stereo" target="viewport">stereo</a></li>
|
|
|
|
<li><a href="texture_array.html" data-hash="texture_array" target="viewport">texture_array(ts)</a></li>
|
|
|
|
<li><a href="texture_compressed.html" data-hash="texture_compressed" target="viewport">texture_compressed(ts)</a></li>
|
|
|
|
<li><a href="triangle_customshader.html" data-hash="triangle_customshader" target="viewport">triangle_customshader(ts)</a></li>
|
|
|
|
<li><a href="triangle_vertexcolor.html" data-hash="triangle_vertexcolor" target="viewport">triangle_vertexcolor(ts)</a></li>
|
|
|
|
<li><a href="triangle.html" data-hash="triangle" target="viewport">triangle(ts)</a></li>
|
|
|
|
<li><a href="tron.html" data-hash="tron" target="viewport">tron(ts)</a></li>
|
|
|
|
<li><a href="updateperf.html" data-hash="updateperf" target="viewport">updateperf(ts)</a></li>
|
|
|
|
<li><a href="velocity_buffer.html" data-hash="velocity_buffer" target="viewport">velocity_buffer(ts)</a></li>
|
|
|
|
<li><a href="webvr_tron.html" data-hash="webvr_tron" target="viewport">webvr_tron</a></li>
|
|
|
|
<li><a href="webvr.html" data-hash="webvr" target="viewport">webvr</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="main">
|
|
<div class="viewport">
|
|
<iframe name="viewport"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const iframeDom = document.querySelector('iframe');
|
|
Array.from(document.querySelectorAll('.nav a')).forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
window.location.hash = '#' + link.getAttribute('data-hash')
|
|
});
|
|
})
|
|
|
|
iframeDom.onload = () => {
|
|
document.title = iframeDom.contentDocument.title;
|
|
}
|
|
|
|
function updateFromHash(isFirst) {
|
|
const testName = window.location.hash.slice(1);
|
|
if (testName) {
|
|
iframeDom.src = testName + '.html'
|
|
}
|
|
|
|
!isFirst && Array.from(document.querySelectorAll('.nav a')).forEach(link => {
|
|
link.parentNode.classList.remove('current');
|
|
})
|
|
const current = document.querySelector('.nav a[data-hash=' + testName + ']');
|
|
if (current) {
|
|
current.parentNode.classList.add('current')
|
|
if (isFirst) {
|
|
setTimeout(() => {
|
|
current.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}, 100)
|
|
}
|
|
}
|
|
}
|
|
updateFromHash(true);
|
|
window.onhashchange = () => updateFromHash();
|
|
</script>
|
|
</body>
|
|
</html>
|