# graphics

**Repository Path**: os-share/graphics

## Basic Information

- **Project Name**: graphics
- **Description**: 一些图形系统相关的小例子
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-07
- **Last Updated**: 2025-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一些图形系统相关的小例子

https://akira-cn.github.io/graphics/

## 3D基础

- [立方体](https://akira-cn.github.io/graphics/3d-basic/cube.html)
- [圆柱](https://akira-cn.github.io/graphics/3d-basic/cylinder.html)

## 3D相机

- [圆柱裁切](https://akira-cn.github.io/graphics/3d-camera/cylinder-clip.html)
- [正交相机](https://akira-cn.github.io/graphics/3d-camera/cylinder-ortho.html)
- [透视相机](https://akira-cn.github.io/graphics/3d-camera/cylinder-perspective.html)
- [圆柱](https://akira-cn.github.io/graphics/3d-camera/cylinder.html)
- [使用Ogl](https://akira-cn.github.io/graphics/3d-camera/ogl-basic.html)

## 3D模型矩阵

- [轴角](https://akira-cn.github.io/graphics/3d-model/axis-angle.html)
- [欧拉角](https://akira-cn.github.io/graphics/3d-model/euler-angle.html)

## 动画

- [增量动画](https://akira-cn.github.io/graphics/animate/animate_delta.html)
- [时间动画](https://akira-cn.github.io/graphics/animate/animate_time.html)
- [动画封装](https://akira-cn.github.io/graphics/animate/animator.html)
- [帧动画](https://akira-cn.github.io/graphics/animate/frame_animate.html)
- [css贝塞尔](https://akira-cn.github.io/graphics/animate/lerp-bezier-css.html)
- [js贝塞尔](https://akira-cn.github.io/graphics/animate/lerp-bezier.html)

## webgl动画

- [bezier easing](https://akira-cn.github.io/graphics/animate_webgl/bezier_easing.html)
- [网格动画](https://akira-cn.github.io/graphics/animate_webgl/cellular-animation.html)
- [片元着色器旋转](https://akira-cn.github.io/graphics/animate_webgl/fragment_rotation_animator.html)
- [片元着色器旋转](https://akira-cn.github.io/graphics/animate_webgl/fragment_rotation_animator2.html)
- [帧动画](https://akira-cn.github.io/graphics/animate_webgl/frame_animate.html)
- [补间easing](https://akira-cn.github.io/graphics/animate_webgl/lerp_easing.html)
- [补间动画](https://akira-cn.github.io/graphics/animate_webgl/lerp.html)
- [粒子动画](https://akira-cn.github.io/graphics/animate_webgl/particle.html)
- [顶点移动动画](https://akira-cn.github.io/graphics/animate_webgl/vertex_move_animator.html)
- [顶点移动easing](https://akira-cn.github.io/graphics/animate_webgl/vertex_move_easing.html)
- [顶点旋转动画](https://akira-cn.github.io/graphics/animate_webgl/vertex_rotation_animator.html)
- [顶点旋转](https://akira-cn.github.io/graphics/animate_webgl/vertex_rotation.html)

## 贝塞尔

- [3阶贝塞尔曲线](https://akira-cn.github.io/graphics/bezier/cubic.html)
- [2阶贝塞尔曲线](https://akira-cn.github.io/graphics/bezier/quadratic.html)

## canvas

- [基础](https://akira-cn.github.io/graphics/canvas/basic/index.html)
- [层次结构图](https://akira-cn.github.io/graphics/canvas/hierarchy/index.html)

## 颜色

- [color-cubehelix](https://akira-cn.github.io/graphics/color-hints/color-cubehelix.html)
- [color-hints-hsl](https://akira-cn.github.io/graphics/color-hints/color-hints-hsl.html)
- [color-hints-rgb](https://akira-cn.github.io/graphics/color-hints/color-hints-rgb.html)
- [color-hsl-problem](https://akira-cn.github.io/graphics/color-hints/color-hsl-problem.html)
- [color-lab](https://akira-cn.github.io/graphics/color-hints/color-lab.html)

## covid 可视化

- [covid-动态](https://akira-cn.github.io/graphics/covid-vis/covid-dynamic.html)
- [covid-静态](https://akira-cn.github.io/graphics/covid-vis/covid-static.html)
- [墨卡托-topojson](https://akira-cn.github.io/graphics/covid-vis/mercator-topojson.html)
- [墨卡托](https://akira-cn.github.io/graphics/covid-vis/mercator.html)

## 坐标系

- [坐标变换](https://akira-cn.github.io/graphics/coordinates/index.html)

## 数据图表-css

- [面积图](https://akira-cn.github.io/graphics/data-graph-css/areagraph.html)
- [柱状图](https://akira-cn.github.io/graphics/data-graph-css/bargraph.html)
- [折线图](https://akira-cn.github.io/graphics/data-graph-css/linegraph.html)
- [饼图](https://akira-cn.github.io/graphics/data-graph-css/piegraph.html)

## 数据图表里-svg

- [柱状图](https://akira-cn.github.io/graphics/data-graph-svg/bargraph.html)

## Github贡献图表

- [3D柱状图](https://akira-cn.github.io/graphics/github-contributions/index.html)

## GPU抽奖

- [webgl抽奖](https://akira-cn.github.io/graphics/gl-raffle/index.html)

## 光照

- [环境光](https://akira-cn.github.io/graphics/lights/ambient-light.html)
- [平行光](https://akira-cn.github.io/graphics/lights/directional-light.html)
- [Phong光照](https://akira-cn.github.io/graphics/lights/phong.html)
- [点光源](https://akira-cn.github.io/graphics/lights/point-light.html)
- [镜面高光](https://akira-cn.github.io/graphics/lights/specular.html)
- [聚光灯](https://akira-cn.github.io/graphics/lights/spot-light.html)

## 噪声

- [基础噪声](https://akira-cn.github.io/graphics/noise/basic.html)
- [网格噪声](https://akira-cn.github.io/graphics/noise/cellular-noise.html)
- [云雾](https://akira-cn.github.io/graphics/noise/clouds.html)
- [阶梯噪声](https://akira-cn.github.io/graphics/noise/gradient-noise.html)
- [线](https://akira-cn.github.io/graphics/noise/noise-lines.html)
- [距离场](https://akira-cn.github.io/graphics/noise/noise-sdf.html)
- [天空](https://akira-cn.github.io/graphics/noise/noise-sky.html)
- [二维噪声](https://akira-cn.github.io/graphics/noise/noise2d.html)
- [simplex](https://akira-cn.github.io/graphics/noise/simplex-noise.html)

## 法线贴图

- [立方体](https://akira-cn.github.io/graphics/normal-maps/cube.html)
- [岩石](https://akira-cn.github.io/graphics/normal-maps/rock.html)

## 参数方程

- [参数方程一](https://akira-cn.github.io/graphics/parametric/index.html)
- [参数方程二](https://akira-cn.github.io/graphics/parametric2/index.html)
- [极坐标](https://akira-cn.github.io/graphics/parametric-polar/index.html)

## 后期处理

- [辉光](https://akira-cn.github.io/graphics/pass/bloom.html)
- [模糊](https://akira-cn.github.io/graphics/pass/blur.html)
- [烟雾](https://akira-cn.github.io/graphics/pass/smoke.html)

## 像素处理

- [美颜](https://akira-cn.github.io/graphics/pixels/index4.html)
- [纹理合成一](https://akira-cn.github.io/graphics/pixels/index5.html)
- [纹理合成二](https://akira-cn.github.io/graphics/pixels/index6.html)
- [纹理合成三](https://akira-cn.github.io/graphics/pixels/index7.html)

## 像素处理——着色器

- [组合](https://akira-cn.github.io/graphics/pixels-shader/combine.html)
- [粒子](https://akira-cn.github.io/graphics/pixels-shader/particle.html)
- [纹理颜色变换](https://akira-cn.github.io/graphics/pixels-shader/texture.html)

## 极坐标——着色器

- [花瓣](https://akira-cn.github.io/graphics/polar-shader/bud.html)
- [圆](https://akira-cn.github.io/graphics/polar-shader/circle.html)
- [葫芦](https://akira-cn.github.io/graphics/polar-shader/clover.html)
- [径向](https://akira-cn.github.io/graphics/polar-shader/conic.html)
- [hsv色轮](https://akira-cn.github.io/graphics/polar-shader/hsvwheel.html)
- [玫瑰瓣](https://akira-cn.github.io/graphics/polar-shader/rose.html)
- [玫瑰瓣2](https://akira-cn.github.io/graphics/polar-shader/rose2.html)

## 多边形填充

- [2D多边形填充](https://akira-cn.github.io/graphics/polygon-fill/fill-canvas2d.html)

## 多边形-曲线

- [2D曲线](https://akira-cn.github.io/graphics/polyline-curve/canvas2d.html)
- [挤压曲线](https://akira-cn.github.io/graphics/polyline-curve/webgl-lines-extrude.html)

## 重复与随机

- [网格](https://akira-cn.github.io/graphics/repeat-and-random/grids.html)
- [Mandelbrot集](https://akira-cn.github.io/graphics/repeat-and-random/mandelbrot.html)
- [迷宫](https://akira-cn.github.io/graphics/repeat-and-random/maze.html)
- [随机一](https://akira-cn.github.io/graphics/repeat-and-random/random.html)
- [随机二](https://akira-cn.github.io/graphics/repeat-and-random/random2.html)

## 造型函数

- [基础](https://akira-cn.github.io/graphics/shaping-functions/basic.html)
- [粒子圆效果](https://akira-cn.github.io/graphics/shaping-functions/circle_particle.html)
- [圆轨迹重复](https://akira-cn.github.io/graphics/shaping-functions/circle-repeat.html)
- [剪裁区域](https://akira-cn.github.io/graphics/shaping-functions/clip.html)
- [直线-鼠标操作](https://akira-cn.github.io/graphics/shaping-functions/line-mouse.html)
- [直线-重复](https://akira-cn.github.io/graphics/shaping-functions/line-repeat.html)
- [直线](https://akira-cn.github.io/graphics/shaping-functions/line.html)
- [线段-鼠标操作](https://akira-cn.github.io/graphics/shaping-functions/lineseg-mouse.html)
- [圆形进度条](https://akira-cn.github.io/graphics/shaping-functions/progress.html)
- [重复三角形](https://akira-cn.github.io/graphics/shaping-functions/triangle-repeat.html)
- [三角形](https://akira-cn.github.io/graphics/shaping-functions/triangles.html)

## SVG

- [基础](https://akira-cn.github.io/graphics/svg/basic/index.html)
- [层次结构图](https://akira-cn.github.io/graphics/svg/hierarchy/index.html)

## 三角剖分

- [多边形2D-碰撞检测](https://akira-cn.github.io/graphics/triangluations/polygon2d-collision.html)
- [多边形2D](https://akira-cn.github.io/graphics/triangluations/polygon2d.html)
- [多边形-三角剖分](https://akira-cn.github.io/graphics/triangluations/trianglu-polygon.html)

## 矢量绘制

- [矢量绘制多边形](https://akira-cn.github.io/graphics/vector_draw/index.html)

## 矢量画树

- [矢量画树](https://akira-cn.github.io/graphics/vector_tree/index.html)

## WegGL基础

- [Hello world](https://akira-cn.github.io/graphics/webgl/hello_world.html)

## WebGL粒子

- [粒子效果](https://akira-cn.github.io/graphics/webgl_particles/index.html)