enderman.ch/index-static
3
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Slight tweaks, bump up ECMAPortal to v1.1

Browse Source
This commit is contained in:
endermanch committed 2023-11-05 00:46:08 +03:00
1 parent ca43c9441f
commit b290e102c1
4 files changed
+15 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+1 -1
View File
@@ -186,6 +186,6 @@
<img src="/images/enderman.gif" alt="Hello!">
</div>
<script src="/scripts/portal.js"></script>
<script src="/scripts/portal-min.js"></script>
</body>
</html>
scripts/portal-min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
class Portal{constructor(t,e){const i=[`${"/"!==e?e:""}/sky.png`,`${"/"!==e?e:""}/portal.png`];this.version="1.0",this.notice(),this.canvas=t,this.gl=this.canvas.getContext("webgl2"),this.gl?(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.time=Date.now()-this.randomRange(6e4,18e4),this.prog=this.build("#version 300 es\n\n\t\tlayout (location = 0) in vec3 Position;\n\n\t\tuniform mat4 modelViewMatrix;\n\t\tuniform mat4 projectionMatrix;\n\n\t\tvec4 projection_from_position(vec4 position) {\n\t\t\tvec4 projection = position * 0.5;\n\t\t\tprojection.xy = vec2(projection.x + projection.w, projection.y + projection.w);\n\t\t\tprojection.zw = position.zw;\n\t\t\treturn projection;\n\t\t}\n\n\t\tout vec4 texProj0;\n\n\t\tvoid main() {\n\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4(Position, 1.0);\n\n\t\t\ttexProj0 = projection_from_position(gl_Position);\n\t\t}","#version 300 es\n\n\t\tprecision highp float;\n\n\t\tuniform sampler2D sky;\n\t\tuniform sampler2D particles;\n\t\tuniform float dt;\n\n\t\tin vec4 texProj0;\n\n\t\tconst int LAYERS = 15;\n\t\tconst vec3 COLORS[] = vec3[](\n\t\t\tvec3(0.022087, 0.098399, 0.110818),\n\t\t\tvec3(0.011892, 0.095924, 0.089485),\n\t\t\tvec3(0.027636, 0.101689, 0.100326),\n\t\t\tvec3(0.046564, 0.109883, 0.114838),\n\t\t\tvec3(0.064901, 0.117696, 0.097189),\n\t\t\tvec3(0.063761, 0.086895, 0.123646),\n\t\t\tvec3(0.084817, 0.111994, 0.166380),\n\t\t\tvec3(0.097489, 0.154120, 0.091064),\n\t\t\tvec3(0.106152, 0.131144, 0.195191),\n\t\t\tvec3(0.097721, 0.110188, 0.187229),\n\t\t\tvec3(0.133516, 0.138278, 0.148582),\n\t\t\tvec3(0.070006, 0.243332, 0.235792),\n\t\t\tvec3(0.196766, 0.142899, 0.214696),\n\t\t\tvec3(0.047281, 0.315338, 0.321970),\n\t\t\tvec3(0.204675, 0.390010, 0.302066),\n\t\t\tvec3(0.080955, 0.314821, 0.661491)\n\t\t);\n\n\t\tconst mat4 SCALE_TRANSLATE = mat4(\n\t\t\t0.5, 0.0, 0.0, 0.25,\n\t\t\t0.0, 0.5, 0.0, 0.25,\n\t\t\t0.0, 0.0, 1.0, 0.0,\n\t\t\t0.0, 0.0, 0.0, 1.0\n\t\t);\n\n\t\tmat2 mat2_rotate_z(float radians) {\n\t\t\treturn mat2(\n\t\t\t\tcos(radians), -sin(radians),\n\t\t\t\tsin(radians), cos(radians)\n\t\t\t);\n\t\t}\n\n\t\tmat4 portal_layer(float layer) {\n\t\t\tmat4 translate = mat4(\n\t\t\t\t1.0, 0.0, 0.0, 17.0 / layer,\n\t\t\t\t0.0, 1.0, 0.0, (2.0 + layer / 1.5) * (dt * 1.5),\n\t\t\t\t0.0, 0.0, 1.0, 0.0,\n\t\t\t\t0.0, 0.0, 0.0, 1.0\n\t\t\t);\n\n\t\t\tmat2 rotate = mat2_rotate_z(radians((layer * layer * 4321.0 + layer * 9.0) * 2.0));\n\n\t\t\tmat2 scale = mat2((4.5 - layer / 4.0) * 2.0);\n\n\t\t\treturn mat4(scale * rotate) * translate * SCALE_TRANSLATE;\n\t\t}\n\n\t\tout vec4 fragColor;\n\n\t\tvoid main() {\n\t\t\tvec3 color = textureProj(sky, texProj0).rgb * COLORS[0];\n\t\t\t\n\t\t\tfor (int i = 0; i < LAYERS; i++) {\n\t\t\t\tcolor += textureProj(particles, texProj0 * portal_layer(float(i + 1))).rgb * COLORS[i];\n\t\t\t}\n\t\t\t\n\t\t\tfragColor = vec4(color, 1.0);\n\t\t}"),this.prog?(window.addEventListener("resize",this.resize.bind(this)),this.promises=i.map((t=>this.loadImage(t))),this.initialize(),Promise.all(this.promises).then((t=>{t.forEach(((t,e)=>this.loadResource(t,e))),this.gl.useProgram(this.prog),this.render()}))):alert("Failed to compile WebGL 2 shaders.\nOpen the developer console for debug output.")):alert("Unable to initialize WebGL 2. Your browser or machine may not support it.")}notice(){console.log(`%c \u2587%c\u2587%c\u2587 %c\u2587%c\u2587%c\u2587 %c // ECMAPortal v${this.version} by Endermanch & WiPet\n\n\thttps://enderman.ch\n\thttps://go.enderman.ch/wipet`,"color: #E58EFF","color: #D52DFF","color: #E58EFF","color: #E58EFF","color: #D52DFF","color: #E58EFF","color: #008000"),console.log("If any errors occur below, please send a screenshot of them my way!\n\t%[email protected]","color: #87CEFA")}randomRange(t,e){return t=Math.ceil(t),e=Math.floor(e),Math.floor(Math.random()*(e-t+1))+t}build(t,e){let i=this.gl.createShader(this.gl.VERTEX_SHADER);if(this.gl.shaderSource(i,t),this.gl.compileShader(i),!this.gl.getShaderParameter(i,this.gl.COMPILE_STATUS))return console.error(this.gl.getShaderInfoLog(i)),!1;let r=this.gl.createShader(this.gl.FRAGMENT_SHADER);if(this.gl.shaderSource(r,e),this.gl.compileShader(r),!this.gl.getShaderParameter(r,this.gl.COMPILE_STATUS))return console.error(this.gl.getShaderInfoLog(r)),!1;let n=this.gl.createProgram();return this.gl.attachShader(n,i),this.gl.attachShader(n,r),this.gl.linkProgram(n),this.gl.getProgramParameter(n,this.gl.LINK_STATUS)?n:(console.error(this.gl.getProgramInfoLog(n)),!1)}loadImage(t){return new Promise(((e,i)=>{let r=new Image;r.onload=()=>e(r),r.onerror=i,r.src=t}))}loadResource(t,e){const i=[this.gl.CLAMP_TO_EDGE,this.gl.MIRRORED_REPEAT];let r=this.gl.createSampler();this.gl.samplerParameteri(r,this.gl.TEXTURE_WRAP_S,i[e]),this.gl.samplerParameteri(r,this.gl.TEXTURE_WRAP_T,i[e]),this.gl.samplerParameteri(r,this.gl.TEXTURE_WRAP_R,i[e]),this.gl.samplerParameteri(r,this.gl.TEXTURE_MIN_FILTER,this.gl.NEAREST_MIPMAP_LINEAR),this.gl.sLine truncated
class Portal{constructor(t,e){const i=[`${"/"!==e?e:""}/sky.png`,`${"/"!==e?e:""}/portal.png`];this.version="1.1",this.notice(),this.canvas=t,this.gl=this.canvas.getContext("webgl2"),this.gl?(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.time=Date.now()-this.randomRange(6e4,18e4),this.prog=this.build("#version 300 es\n\n\t\tlayout (location = 0) in vec3 Position;\n\n\t\tuniform mat4 modelViewMatrix;\n\t\tuniform mat4 projectionMatrix;\n\t\t\n\t\tuniform vec2 canvasResolution;\n\n\t\tvec4 projection_from_position(vec4 position) {\n\t\t\tvec4 projection = position * 0.5;\n\t\t\tprojection.xy = vec2(projection.x + projection.w, projection.y + projection.w);\n\t\t\tprojection.zw = position.zw;\n\t\t\treturn projection;\n\t\t}\n\n\t\tout vec4 texProj0;\n\n\t\tvoid main() {\n\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4(Position, 1.0);\n\n\t\t\ttexProj0 = projection_from_position(gl_Position);\n\t\t\ttexProj0 = vec4(texProj0.xy * canvasResolution / max(canvasResolution.x, canvasResolution.y), texProj0.zw);\n\t\t}","#version 300 es\n\n\t\tprecision highp float;\n\n\t\tuniform sampler2D sky;\n\t\tuniform sampler2D particles;\n\t\tuniform float dt;\n\n\t\tin vec4 texProj0;\n\n\t\tconst int LAYERS = 15;\n\t\tconst vec3 COLORS[] = vec3[](\n\t\t\tvec3(0.022087, 0.098399, 0.110818),\n\t\t\tvec3(0.011892, 0.095924, 0.089485),\n\t\t\tvec3(0.027636, 0.101689, 0.100326),\n\t\t\tvec3(0.046564, 0.109883, 0.114838),\n\t\t\tvec3(0.064901, 0.117696, 0.097189),\n\t\t\tvec3(0.063761, 0.086895, 0.123646),\n\t\t\tvec3(0.084817, 0.111994, 0.166380),\n\t\t\tvec3(0.097489, 0.154120, 0.091064),\n\t\t\tvec3(0.106152, 0.131144, 0.195191),\n\t\t\tvec3(0.097721, 0.110188, 0.187229),\n\t\t\tvec3(0.133516, 0.138278, 0.148582),\n\t\t\tvec3(0.070006, 0.243332, 0.235792),\n\t\t\tvec3(0.196766, 0.142899, 0.214696),\n\t\t\tvec3(0.047281, 0.315338, 0.321970),\n\t\t\tvec3(0.204675, 0.390010, 0.302066),\n\t\t\tvec3(0.080955, 0.314821, 0.661491)\n\t\t);\n\n\t\tconst mat4 SCALE_TRANSLATE = mat4(\n\t\t\t0.5, 0.0, 0.0, 0.25,\n\t\t\t0.0, 0.5, 0.0, 0.25,\n\t\t\t0.0, 0.0, 1.0, 0.0,\n\t\t\t0.0, 0.0, 0.0, 1.0\n\t\t);\n\n\t\tmat2 mat2_rotate_z(float radians) {\n\t\t\treturn mat2(\n\t\t\t\tcos(radians), -sin(radians),\n\t\t\t\tsin(radians), cos(radians)\n\t\t\t);\n\t\t}\n\n\t\tmat4 portal_layer(float layer) {\n\t\t\tmat4 translate = mat4(\n\t\t\t\t1.0, 0.0, 0.0, 17.0 / layer,\n\t\t\t\t0.0, 1.0, 0.0, (2.0 + layer / 1.5) * (dt * 1.5),\n\t\t\t\t0.0, 0.0, 1.0, 0.0,\n\t\t\t\t0.0, 0.0, 0.0, 1.0\n\t\t\t);\n\n\t\t\tmat2 rotate = mat2_rotate_z(radians((layer * layer * 4321.0 + layer * 9.0) * 2.0));\n\n\t\t\tmat2 scale = mat2((4.5 - layer / 4.0) * 2.0);\n\n\t\t\treturn mat4(scale * rotate) * translate * SCALE_TRANSLATE;\n\t\t}\n\n\t\tout vec4 fragColor;\n\n\t\tvoid main() {\n\t\t\tvec3 color = textureProj(sky, texProj0).rgb * COLORS[0];\n\t\t\t\n\t\t\tfor (int i = 0; i < LAYERS; i++) {\n\t\t\t\tcolor += textureProj(particles, texProj0 * portal_layer(float(i + 1))).rgb * COLORS[i];\n\t\t\t}\n\t\t\t\n\t\t\tfragColor = vec4(color, 1.0);\n\t\t}"),this.prog?(window.addEventListener("resize",this.resize.bind(this)),this.promises=i.map((t=>this.loadImage(t))),this.initialize(),Promise.all(this.promises).then((t=>{t.forEach(((t,e)=>this.loadResource(t,e))),this.gl.useProgram(this.prog),this.render()}))):alert("Failed to compile WebGL 2 shaders.\nOpen the developer console for debug output.")):alert("Unable to initialize WebGL 2. Your browser or machine may not support it.")}notice(){console.log(`%c \u2587%c\u2587%c\u2587 %c\u2587%c\u2587%c\u2587 %c // ECMAPortal v${this.version} by Endermanch & WiPet\n\n\thttps://enderman.ch\n\thttps://go.enderman.ch/wipet`,"color: #E58EFF","color: #D52DFF","color: #E58EFF","color: #E58EFF","color: #D52DFF","color: #E58EFF","color: #008000"),console.log("If any errors occur below, please send a screenshot of them my way!\n\t%[email protected]","color: #87CEFA")}randomRange(t,e){return t=Math.ceil(t),e=Math.floor(e),Math.floor(Math.random()*(e-t+1))+t}build(t,e){let i=this.gl.createShader(this.gl.VERTEX_SHADER);if(this.gl.shaderSource(i,t),this.gl.compileShader(i),!this.gl.getShaderParameter(i,this.gl.COMPILE_STATUS))return console.error(this.gl.getShaderInfoLog(i)),!1;let r=this.gl.createShader(this.gl.FRAGMENT_SHADER);if(this.gl.shaderSource(r,e),this.gl.compileShader(r),!this.gl.getShaderParameter(r,this.gl.COMPILE_STATUS))return console.error(this.gl.getShaderInfoLog(r)),!1;let n=this.gl.createProgram();return this.gl.attachShader(n,i),this.gl.attachShader(n,r),this.gl.linkProgram(n),this.gl.getProgramParameter(n,this.gl.LINK_STATUS)?n:(console.error(this.gl.getProgramInfoLog(n)),!1)}loadImage(t){return new Promise(((e,i)=>{let r=new Image;r.onload=()=>e(r),r.onerror=i,r.src=t}))}loadResource(t,e){const i=[this.gl.CLAMP_TO_EDGE,this.gl.MIRRORED_REPEAT];let r=this.gl.createSampler();this.gl.samplerParameteri(r,this.gl.TEXTURE_WRAP_S,i[e]),this.gl.samplerParameteri(r,this.gl.TEXTURE_WRAP_T,iLine truncated
scripts/portal.js
+9 -2
View File
@@ -8,6 +8,8 @@ class Portal {
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec2 canvasResolution;
vec4 projection_from_position(vec4 position) {
vec4 projection = position * 0.5;
@@ -22,6 +24,7 @@ class Portal {
gl_Position = projectionMatrix * modelViewMatrix * vec4(Position, 1.0);
texProj0 = projection_from_position(gl_Position);
texProj0 = vec4(texProj0.xy * canvasResolution / max(canvasResolution.x, canvasResolution.y), texProj0.zw);
}`
// Fragment shader.
@@ -101,7 +104,7 @@ class Portal {
];
// Version & notice.
this.version = '1.0';
this.version = '1.1';
this.notice();
this.canvas = canvas;
@@ -260,6 +263,7 @@ class Portal {
modelViewMatrix: this.gl.getUniformLocation(this.prog, "modelViewMatrix"),
projectionMatrix: this.gl.getUniformLocation(this.prog, "projectionMatrix"),
dt: this.gl.getUniformLocation(this.prog, "dt"),
resolution: this.gl.getUniformLocation(this.prog, "canvasResolution"),
sky: this.gl.getUniformLocation(this.prog, "sky"),
particles: this.gl.getUniformLocation(this.prog, "particles"),
}
@@ -316,11 +320,14 @@ class Portal {
0.0, 0.0, 0.0, 1.0
]);
let dt = (Date.now() - this.time) / (1000 * 1000);
let dt = (Date.now() - this.time) / 1000 / 1000;
this.gl.uniformMatrix4fv(this.uniforms.modelViewMatrix, false, identityMatrix);
this.gl.uniformMatrix4fv(this.uniforms.projectionMatrix, false, identityMatrix);
this.gl.uniform2f(this.uniforms.resolution, this.canvas.clientWidth, this.canvas.clientHeight);
console.log(this.canvas.clientWidth, this.canvas.clientHeight);
this.gl.uniform1f(this.uniforms.dt, dt);
this.gl.uniform1i(this.uniforms.sky, 0);
this.gl.uniform1i(this.uniforms.particles, 1);
styles/styles.css
+4
View File
@@ -181,6 +181,10 @@ div.bottom-right {
opacity: 30%;
}
div.bottom-right:hover {
opacity: 100%;
}
div.bottom-right img {
height: 30vmin;
}