【WebGL】一、画布创建和着色器基本操作及封装
一、画布创建和着色器基本操作及封装
- 一、基本信息
-
- 1、WebGL简介
- 2、WebGL的优势
- 二、基本操作
-
- 1、画布创建
- 2、clearColor—清空颜色
- 3、clear—清空canvas
- 三、着色器基本操作
-
- 1、顶点着色器
- 2、片元着色器
- 3、程序对象
- 三、WebGL组件化绘制流程
一、基本信息
1、WebGL简介
webgl是一种3D绘图协议，衍生于 OpenGL ES2.0，可以结合Html5 和 JavaScript 在网页上绘制和渲染二/三维图形
2、WebGL的优势
●内嵌在浏览器中，不需要安装任何插件即可运行
●只需要一个文本编辑器和浏览器，就可以编写三维图形程序
●学习和使用比较简单
二、基本操作
1、画布创建
<body>
<canvas id="canvas" width="400" height="400"/>
</body>
</html>
<script type="text/javascript">
const stx=document.getElementById("canvas");
const gl = stx.getContext("webgl");
</script>
2、clearColor—清空颜色
gl.clearColor(r,g,b,a)指定清空 的颜色，接收四个参数取值区间为( 0.0~1.0)
gl.clearColor(1.0,0.0,0.0,1.0);
3、clear—清空canvas
gl.clear(buffer)
●gl.clear(gl.COLOR_BUFFER_BIT) 清空颜色缓存 == glclearColor(0.0,0.0,0.0,1.0)
●gl.clear(gl.DEPTH_BUFFER_BIT) 清空深度缓冲区 == glclearDepth(1.0)
●gl.clear(gl.STENCIL_BUFFER_BIT) 清空模板缓冲区 == gl.clearStencil(0)
三、着色器基本操作
着色器就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。
- 顶点着色器：
通过计算获取位置信息
顶点着色器
通过计算获取位置信息
- 片元着色器：
进行逐片元处理程序
片元着色器
进行逐片元处理程序
JavaScript 读取相关着色器信息，传递给 webgl并进行使用
1、顶点着色器
//1.顶点着色器源码
const VERTEX_SHADER_SOURCE = `
// 必须存在 main 函数
void main() {
//点坐标所绘制的位置
//gl_Position vec4(0.0, 0.0, 0.0, 1.0) x , y , z , w其次坐标(x/w , y/w , z/w)
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
//点的大小
gl_PointSize = 10.0;
}`;
console.log('VERTEX_SHADER_SOURCE',VERTEX_SHADER_SOURCE);
//创建着色器
const vertexSharder=gl.createShader(gl.VERTEX_SHADER);
//指定顶点着色器的源码
gl.shaderSource(vertexSharder,VERTEX_SHADER_SOURCE);
//编译着色器
gl.compileShader(vertexSharder);
2、片元着色器
//2.片元着色器源码
const FRAGMENT_SHADER_SOURCE = `
// 必须存在 main 函数
void main(){
//片的颜色
//gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) x , y , z , a
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;
//创建着色器
const fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
//指定片元着色器的源码
gl.shaderSource(fragmentShader,FRAGMENT_SHADER_SOURCE);
//编译着色器
gl.compileShader(fragmentShader);
3、程序对象
//创建一个程序对象
const program = gl.createProgram();
//传入程序对象，着色器
gl.attachShader(program, vertexSharder);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
三、WebGL组件化绘制流程
PS：严格注意【分号】的使用！否则不会生效
代码展示：
- index.html主体文件
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
const ctx = document.getElementById("canvas");
const gl = ctx.getContext("webgl");
// gl.clearColor(1.0,0.0,0.0,1.0);
// gl.clear(gl.COLOR_BUFFER_BIT)
//1.顶点着色器源码
const VERTEX_SHADER_SOURCE = `
// 必须存在 main 函数
void main() {
//点坐标所绘制的位置
//gl_Position vec4(0.0, 0.0, 0.0, 1.0) x , y , z , w其次坐标(x/w , y/w , z/w)
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
//点的大小
gl_PointSize = 10.0;
}`;
//2.片元着色器源码
const FRAGMENT_SHADER_SOURCE = `
// 必须存在 main 函数
void main(){
//片的颜色
//gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) x , y , z , a
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;
const program = initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE);
//执行绘制
//点 要绘制的图形， 从哪个开始， 使用几个顶点
gl.drawArrays(gl.POINTS,0, 1);
</script>
- index.js组件文件
-function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
//创建着色器
const vertexSharder = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//指定着色器的源码
gl.shaderSource(vertexSharder, VERTEX_SHADER_SOURCE);
gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);
//编译着色器
gl.compileShader(vertexSharder);
gl.compileShader(fragmentShader);
//创建一个程序对象
const program = gl.createProgram();
//传入程序对象，着色器
gl.attachShader(program, vertexSharder);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
return program;
}