multi target renderer instead of background scissor

This commit is contained in:
2026-07-04 23:10:38 -04:00
parent 3ba219697e
commit f248f9ac0f
3 changed files with 154 additions and 52 deletions

View File

@@ -16,14 +16,30 @@
}
.figure {
position: relative;
width: 100%;
height: 20em;
}
.figure > canvas {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<main>
<h1>Visualizer</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper ut mauris sed
tempor. Nunc
vehicula tempor purus, non vestibulum libero ornare non. Morbi fringilla sapien diam, sed
rhoncus lacus egestas
vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper ut mauris sed
tempor. Nunc
@@ -42,6 +58,46 @@
Mauris ullamcorper accumsan dui vel pulvinar.
</p>
<p>
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
aliquam tellus,
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
ligula eu maximus.
Mauris ullamcorper accumsan dui vel pulvinar.
</p>
<p>
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
aliquam tellus,
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
ligula eu maximus.
Mauris ullamcorper accumsan dui vel pulvinar.
</p>
<p>
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
aliquam tellus,
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
ligula eu maximus.
Mauris ullamcorper accumsan dui vel pulvinar.
</p>
<p>
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
aliquam tellus,
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
ligula eu maximus.
Mauris ullamcorper accumsan dui vel pulvinar.
</p>
<p>
Curabitur vestibulum vitae orci ac laoreet. Donec vel imperdiet tortor. Vestibulum lobortis
aliquam tellus,
vitae viverra nisi porttitor quis. Pellentesque id efficitur arcu. Nunc laoreet pulvinar
ligula eu maximus.
Mauris ullamcorper accumsan dui vel pulvinar.
</p>
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<div class="figure" id="demo-2"></div>
<div class="figure" id="demo-3"></div>
@@ -53,6 +109,18 @@
dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Curabitur tincidunt sapien et diam fringilla, eu accumsan odio faucibus. Orci varius natoque
penatibus et magnis
dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Curabitur tincidunt sapien et diam fringilla, eu accumsan odio faucibus. Orci varius natoque
penatibus et magnis
dis parturient montes, nascetur ridiculus mus.
</p>
<div id="atlas-container"
style="position: fixed; left: 0; top: 0; border: 1px solid white;"></div>
</main>