csdn_xpw的博客

写在前面  WebGl（全称：Web Graphics Library ： web图形库） 是基于OpenGL ES 2.0的3D绘图协议。   WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。 绘图

写在前面 建议先阅读下前面我的两篇文章。webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点 平移 1、关键点说明 顶点着色器需要加上 uniform vec4 u_Translation, 存储平移的坐标矢量。 顶点坐标位置 ： gl_Position = a_Position + u_Translation 平移API ： gl.uniform4f(u_Transla

写在前面 建议先阅读下前面我的三篇文章。webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点webgl学习笔记三-平移旋转缩放  下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘正方形,并且每次重绘时轻微地改变其角度。 demo吊下胃口html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

写在前面 建议先阅读下前面我的三篇文章。webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点webgl学习笔记三-平移旋转缩放术语 ： 纹理 ：图像 图形装配区域 ：顶点着色器顶点坐标信息 装配图形 ： 片元着色器装配 光栅化 ：显示在屏幕上的三角形是由片元（像素）组成的,所以还需要将图形转化为片元,这个过程被称为光栅化。 纹理图像：映射的这个图像称为纹理图像 纹素 ： 组成纹理图像的像素

写在前面 建议先看下第一篇webgl学习笔记一第一篇文章,介绍了如何用webgl绘图一个点。接下来本文介绍的是如何绘制多个点。形成一个面。webgl提供了一种很方便的机制,即缓冲区对象，可以一次性地向着色器传入多个顶点的数据。缓存区对象是webgl系统的一块内存区域。 绘制多个点的流程 这里重点介绍缓冲区对象使用步骤 创建缓冲区对象 gl.createBuffer() 绑定缓冲区对象 gl.bi

前言 WebGL比较核心的两大着色器, 顶点着色器、片元着色器, 它俩肩负重任。顶点着色器负责顶点的坐标位置、大小定义, 片元着色器负责颜色效果。 先看看我们要实现的效果, 开下胃（奸笑~~）HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div style="float: