monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

fix(frontend): MkAnimBgをリサイズに対応させる (#12642)

Browse source 
* (fix) MkAnimBgをリサイズに対応させる

* fix lint

* refactor
This commit is contained in:
かっこかり 2023-12-13 18:14:43 +09:00 committed by GitHub
parent 5472f4b934
commit 71bb181472
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/components/MkAnimBg.vue
View file

@ -21,8 +21,9 @@ const props = withDefaults(defineProps<{
focus: 1.0, focus: 1.0,
}); });
function loadShader(gl, type, source) { function loadShader(gl: WebGLRenderingContext, type: number, source: string) {
const shader = gl.createShader(type); const shader = gl.createShader(type);
if (shader == null) return null;
gl.shaderSource(shader, source); gl.shaderSource(shader, source);
gl.compileShader(shader); gl.compileShader(shader);
@ -38,11 +39,13 @@ function loadShader(gl, type, source) {
return shader; return shader;
} }
function initShaderProgram(gl, vsSource, fsSource) { function initShaderProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
const shaderProgram = gl.createProgram(); const shaderProgram = gl.createProgram();
if (shaderProgram == null || vertexShader == null || fragmentShader == null) return null;
gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader); gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram); gl.linkProgram(shaderProgram);
@ -63,8 +66,10 @@ let handle: ReturnType<typeof window['requestAnimationFrame']> | null = null;
onMounted(() => { onMounted(() => {
const canvas = canvasEl.value!; const canvas = canvasEl.value!;
canvas.width = canvas.offsetWidth; let width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight; let height = canvas.offsetHeight;
canvas.width = width;
canvas.height = height;
const gl = canvas.getContext('webgl', { premultipliedAlpha: true }); const gl = canvas.getContext('webgl', { premultipliedAlpha: true });
if (gl == null) return; if (gl == null) return;
@ -197,6 +202,7 @@ onMounted(() => {
gl_FragColor = vec4( color, max(max(color.x, color.y), color.z) ); gl_FragColor = vec4( color, max(max(color.x, color.y), color.z) );
} }
`); `);
if (shaderProgram == null) return;
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
const u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution'); const u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution');
@ -226,7 +232,23 @@ onMounted(() => {
gl!.uniform1f(u_time, 0); gl!.uniform1f(u_time, 0);
gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4); gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
} else { } else {
function render(timeStamp) { function render(timeStamp: number) {
let sizeChanged = false;
if (Math.abs(height - canvas.offsetHeight) > 2) {
height = canvas.offsetHeight;
canvas.height = height;
sizeChanged = true;
}
if (Math.abs(width - canvas.offsetWidth) > 2) {
width = canvas.offsetWidth;
canvas.width = width;
sizeChanged = true;
}
if (sizeChanged && gl) {
gl.uniform2fv(u_resolution, [width, height]);
gl.viewport(0, 0, width, height);
}
gl!.uniform1f(u_time, timeStamp); gl!.uniform1f(u_time, timeStamp);
gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4); gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);