랜덤 포인트 애니메이션
8841 단어 WebGLReactJavaScriptregl
regl(Functional WebGL, GitHub) + React를 사용하여 랜덤 포인트 애니메이션을 그립니다.정기적인 업데이트에는 GitHubuse-interval가 사용됩니다.
App.js
import React from 'react';
import createRegl from 'regl';
import useInterval from 'use-interval';
const App = () => {
const pointSize = 14;
const pointRandom = () =>
[2 * Math.random() - 1, // x
2 * Math.random() - 1, // y
Math.random(), Math.random(), 0]; // r, g, b
const generatePoints = (nPoints) => Array(nPoints).fill(0).map(pointRandom);
const regl = createRegl(document.querySelector('.canvas'));
const frag = `
precision mediump float;
varying vec3 fragColor;
void main() {
gl_FragColor = vec4(fragColor, 1);
}
`;
const vert = `
varying vec3 fragColor;
attribute vec2 pos;
attribute vec3 color;
uniform float pointSize;
void main() {
fragColor = color;
gl_PointSize = pointSize;
gl_Position = vec4(pos, 0, 1);
}
`;
const drawPoints = regl({
frag: frag,
vert: vert,
primitive: 'points',
count: (context, props) => props.points.length,
attributes: {
pos: (context, props) => props.points.map(d => d.slice(0, 2)),
color: (context, props) => props.points.map(d => d.slice(2, 5))
},
uniforms: {
pointSize: pointSize,
points: regl.prop('points')
}
});
const clearRegl = () => regl.clear({
color: [0, 0, 0, 0],
depth: 1
});
let i = 0;
useInterval(() => {
clearRegl();
drawPoints({points: generatePoints((++i%2)*4+2)});
}, 1000);
return <div className='canvas'></div>;
};
export default App;
Reference
이 문제에 관하여(랜덤 포인트 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kkdd/items/c99c8042bebd162feeb8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)