Skip to content

Commit

Permalink
remove webGL and beautify homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@y0sh1ne
y0sh1ne committed Jun 27, 2024
1 parent a1ed083 commit 2294c25
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 267 deletions.
63 changes: 13 additions & 50 deletions docusaurus.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ const config: Config = {
],

themeConfig: {
// Replace with your project's social card
image: 'img/docusaurus-social-card.jpg',
colorMode: {
defaultMode: 'dark',
disableSwitch: true,
respectPrefersColorScheme: false,
},
navbar: {
title: 'My Site',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
title: 'y0sh1ne',
hideOnScroll: false,
items: [
{
type: 'docSidebar',
Expand All @@ -84,56 +84,19 @@ const config: Config = {
{
// type: 'default',
href: 'https://github.com/y0sh1ne/y0sh1ne.github.io',
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" background-color="white" style="background-color: white;border-radius: 50%;"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>',
// html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" background-color="white" style="background-color: white;border-radius: 50%;"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>',
className: "header-github-link",
"aria-label": "GitHub repository",
position: 'right',
}
],
},
/*
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Tutorial',
to: '/docs/intro',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: '/blog',
},
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
copyright: `Copyright © ${new Date().getFullYear()} - PRESENT y0sh1ne. Built with Docusaurus.`,
},
*/
prism: {
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
Expand Down
19 changes: 19 additions & 0 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,22 @@
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* CSS for github link icon */
.header-github-link:hover {
opacity: 0.6;
}

.header-github-link:before {
content: '';
width: 24px;
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}

html[data-theme='dark'] .header-github-link:before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
4 changes: 4 additions & 0 deletions src/pages/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/

body{
min-width: 300px;
}

.heroBanner {
padding: 4rem 0;
Expand Down
218 changes: 1 addition & 217 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,107 +5,14 @@ import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import styles from "./index.module.css";
import avatarPath from "@site/static/img/asuka.jpg";
import noisePath from "@site/static/img/noise.png";

function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();

useEffect(() => {
(async function () {
const vsSource = `
precision mediump float;
attribute vec2 aPosition;
attribute vec2 aUV;
varying vec2 vUV;
varying vec2 vPos;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
vUV = aUV;
vPos = aPosition;
}
`;
const fsSource = `
precision mediump float;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;
uniform float uVar;
varying vec2 vUV;
varying vec2 vPos;
float random (vec2 st) {
return fract(sin(dot(st.xy,vec2(12.9898,78.233)))* 43758.5453123);
}
void main() {
vec4 color1 = texture2D(uTexture1, vUV);
vec4 color2 = texture2D(uTexture2, vUV);
vec4 color3 = vec4(vec3(random(vUV)), 1.);
if (color2.r - uVar < 0.0) {
discard;
}
gl_FragColor = color1;
}
`;

const [avatarElement, noiseElement] = await Promise.all([
createImageElement(avatarPath),
createImageElement(noisePath),
]);
const webGLManager = new WebGLManager(document.querySelector("canvas"));
const { gl } = webGLManager;

webGLManager
.init(vsSource, fsSource)
.loadBuffer(
new Float32Array([
1.0, 1.0, 1, 1, -1.0, 1.0, 0, 1, -1.0, -1.0, 0, 0, -1.0, -1.0, 0, 0,
1.0, -1.0, 1, 0, 1.0, 1.0, 1, 1,
])
)
.setAttrib("aPosition", 2, gl.FLOAT, false, 16, 0)
.setAttrib("aUV", 2, gl.FLOAT, false, 16, 8)
.loadTexture(avatarElement)
.setUniform("uTexture1", "uniform1i", 0)
.loadTexture(noiseElement)
.setUniform("uTexture2", "uniform1i", 1);

let value = 0.0;
let reverse = false;
draw();

function draw() {
const uniform2 = gl.getUniformLocation(webGLManager.program, "uVar");
gl.uniform1f(uniform2, reverse ? (value -= 0.01) : (value += 0.01));

if (value >= 1) {
reverse = true;
}

if (value <= 0) {
reverse = false;
}

webGLManager.draw(webGLManager.gl.TRIANGLES, 6);

requestAnimationFrame(draw);
}
})();
}, []);

return (
<header className={clsx(styles.heroBanner)}>
<div className="container">
{/* <img src={avatarPath} style={{width: 280, borderRadius: '50%'}} /> */}
<canvas width="300" height="300" style={{ borderRadius: '50%' }} />
<img src={avatarPath} style={{width: 300, height:'auto', borderRadius: '50%'}} />
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
Expand All @@ -130,129 +37,6 @@ export default function Home() {
);
}

class WebGLManager {
gl: WebGLRenderingContext;
program: WebGLProgram;
vShader: WebGLShader; //v==vertex
fShader: WebGLShader; //f==fragment
buffer: WebGLBuffer;
textures = [];

constructor(canvasElement: HTMLCanvasElement) {
this.gl = canvasElement.getContext("webgl");
this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, true);
}
/**
* @param vShaderSource vertexShaderSource
* @param fShaderSource fragmentShaderSource
*/
init(vShaderSource: string, fShaderSource: string) {

const vShader = (this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER));
this.gl.shaderSource(vShader, vShaderSource);
this.gl.compileShader(vShader);

const fShader = (this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER));
this.gl.shaderSource(fShader, fShaderSource);
this.gl.compileShader(fShader);

const program = (this.program = this.gl.createProgram());
this.gl.attachShader(program, vShader);
this.gl.attachShader(program, fShader);
this.gl.linkProgram(program);
this.gl.useProgram(program);

return this;
}

loadBuffer(typedArray) {
const buffer = (this.buffer = this.gl.createBuffer());
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, typedArray, this.gl.STATIC_DRAW);

return this;
}

loadTexture(image) {
const texture = this.gl.createTexture();

this.gl.activeTexture(this.gl["TEXTURE" + this.textures.length]);
this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
this.gl.texImage2D(
this.gl.TEXTURE_2D,
0,
this.gl.RGBA,
this.gl.RGBA,
this.gl.UNSIGNED_BYTE,
image
);

this.gl.texParameteri(
this.gl.TEXTURE_2D,
this.gl.TEXTURE_MIN_FILTER,
this.gl.LINEAR
);
this.gl.texParameteri(
this.gl.TEXTURE_2D,
this.gl.TEXTURE_WRAP_S,
this.gl.CLAMP_TO_EDGE
);
this.gl.texParameteri(
this.gl.TEXTURE_2D,
this.gl.TEXTURE_WRAP_T,
this.gl.CLAMP_TO_EDGE
);

this.textures.push(texture);
return this;
}

setAttrib(name, size, type, normalized, stride, offset) {
const location1 = this.gl.getAttribLocation(this.program, name);
this.gl.vertexAttribPointer(
location1,
size,
type,
normalized,
stride,
offset
);
this.gl.enableVertexAttribArray(location1);

return this;
}

setUniform(name, type, value) {
const location = this.gl.getUniformLocation(this.program, name);
this.gl[type](location, value);

return this;
}

draw(type: GLenum, count: GLsizei) {
this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
this.gl.clearColor(0, 0, 0, 0);
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.gl.drawArrays(type, 0, count);
}

then(callback: Function) {
callback.call(this);

return this;
}
}

function createImageElement(path: string): Promise<HTMLImageElement> {
return new Promise((resolve) => {
const image = new Image();
image.src = path;
image.onload = function () {
resolve(image);
};
});
}

//#region FeaturesField
type FeatureItem = {
title: string;
Expand Down
Binary file removed static/img/docusaurus-social-card.jpg
View file
Binary file not shown.
Binary file added static/img/favicon.ico
View file
Binary file not shown.
Binary file removed static/img/noise.png
View file
Binary file not shown.

0 comments on commit 2294c25

Please sign in to comment.