noe/3d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add 002

Browse source
This commit is contained in:
41666 2023-10-01 17:56:34 -04:00
parent d0957bf85a
commit 8cbe93d74d
8 changed files with 152 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

31
html/002-rainbow-trinity.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>com.mekanoe.art // 002-rainbow-trinity</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
color: white;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<link rel="stylesheet" href="work.css" />
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
</main>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"
integrity="sha512-cR3oS5mKRWD+38vYi1CNJk1DLpi104ovuQBuVv9p7nNxeqzSNiHzlboK2BZQybmpTi1QNnQ5unYajpURcMjeZQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/002-rainbow-trinity.js" type="module"></script>

74
html/002-rainbow-trinity.js Normal file
View file

@ -0,0 +1,74 @@
import { Shader, colorUtils, commonFrag, commonVert } from "./lib/shader.js";
import { BasicPlane } from "./lib/basic-plane.js";
import { App } from "./lib/app.js";
const app = new App({ fov: 20 });
const gl = app.gl;
const shader = new Shader(app)
.attach(
gl.VERTEX_SHADER,
`
${commonVert}
varying highp vec2 vTextureCoord;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
vTextureCoord = aTextureCoord;
}
`
)
.attach(
gl.FRAGMENT_SHADER,
`
${commonFrag}
${colorUtils}
varying highp vec2 vTextureCoord;
vec3 circle(vec2 pos, vec3 color) {
float radius = 0.75;
float dist = length(pos);
float circle = smoothstep(radius + 0.001, radius, dist);
return color * vec3(1.0 - circle);
}
vec3 colorRotator(vec3 color, float phase, vec2 uv) {
color.x += uSinTime * 0.0001 + uv.y;
vec3 hsv = rgb2hsv(color);
hsv.x += uSinTime * 0.001 * uv.y - phase;
hsv.y = 1.0;
hsv.z = 0.5;
vec3 rgb = hsv2rgb(hsv);
return rgb;
}
void main() {
float value = sin(uTime * 0.00025) * 0.5 + 0.5;
vec2 sv = vec2(1.0, 1.0);
vec3 triUpper = hsv2rgb(vec3(value, sv));
vec3 triLeft = hsv2rgb(vec3(value + 0.33, sv));
vec3 triRight = hsv2rgb(vec3(value + 0.66, sv));
vec2 uv = vTextureCoord * 2.0 - 1.0;
vec3 color = vec3(0.0);
// place 3 circles in a triangle
color += circle(vec2(uv.x, uv.y + 0.5), colorRotator(triUpper, 1.0, uv));
color += circle(vec2(uv.x - 0.5, uv.y - 0.33), colorRotator(triLeft, 0.667, uv));
color += circle(vec2(uv.x + 0.5, uv.y - 0.33), colorRotator(triRight, 0.333, uv));
// color = 1.0 - color;
gl_FragColor = vec4(color, 1.0);
gl_FragColor = clamp(gl_FragColor, 0.0, 1.0);
}
`
)
.link();
const plane = new BasicPlane(app);
plane.attachShader(shader);
app.loop();

1
html/index.html
View file

@ -30,6 +30,7 @@
</header>
<section id="works">
<ul>
<li><a href="/002-rainbow-trinity">./002-rainbow-trinity</a></li>
<li><a href="/001-platform-provenance">./001-platform-provenance</a></li>
</ul>
</section>

34
html/lib/shader.js
View file

@ -71,3 +71,37 @@ export class Shader {
this.updateTime();
}
}
export const colorUtils = `
vec3 rgb2hsv(vec3 c) {
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
`;
export const commonFrag = `
precision highp float;
uniform float uTime;
uniform float uSinTime;
uniform float uCosTime;
`;
export const commonVert = `
attribute vec4 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
`;