【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组件化绘制流程

【WebGL】一、画布创建和着色器基本操作及封装_第1张图片

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;
}

你可能感兴趣的:(WebGL,webgl,着色器,vue)