trystan/trystkelly.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP attempt to use end portal shader

Browse Source 
Using shader-web-background
Got demotivated when it doesn't work locally due to cross-site restrictions
This commit is contained in:
tryashtar
2026-04-07 19:43:53 -06:00
parent a15574bbf4
commit 868a56830b
1 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
http/poem.html
+59
View File
@@ -5,6 +5,65 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="theme-color" content="#02060D"/>
<title>End Poem</title>
<script src="https://xemantic.github.io/shader-web-background/dist/shader-web-background.min.js"></script>
<script type="x-shader/x-fragment" id="image">
precision highp float;
uniform sampler2D Sampler0;
uniform sampler2D Sampler1;
void main() {
}
</script>
<script>
const loadImage = (src) => new Promise((resolve, reject) => {
let img = new Image();
img.crossOrigin = "";
img.onload = () => resolve(img);
img.onerror = () => {
reject(new Error("Failed to load image from: " + src));
};
img.src = src;
});
shaderWebBackground.shade({
onInit: (ctx) => {
loadImage("end_portal.png")
.then(image => {
const gl = ctx.gl;
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.bindTexture(gl.TEXTURE_2D, null);
ctx.Sampler0 = texture;
});
loadImage("end_sky.png")
.then(image => {
const gl = ctx.gl;
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.bindTexture(gl.TEXTURE_2D, null);
ctx.Sampler0 = texture;
});
},
shaders: {
image: {
uniforms: {
}
}
}
});
</script>
<style>
body {
color: white;