webGl shader的学习记录(一) 在canvas的中心画出一个红点点图元

笔者也在学习如何写出shader

下面是自己的想法希望对大家有用

其实在webGl写shader的时候，我们可以分将整体分为几个部分

第一部分是顶点着色器

1，建立顶点着色的相关代码，

2，创建顶点着色器，并将顶点着色器的代码，与创建的顶点着色器关联起来

第二部分是片元着色器

1，建立片元着色的相关代码，

2，创建顶点着色器，并将片元着色器的代码，与创建的片元着色器关联起来

第三部分是将上面的顶点着色器与片元着色器结合起来，变为一个程序。这个程序就是你之后，决定展示你想要样子的效果，因为你可能同时有好几个着色器的程序。

第四部分，使用你上面创建好的shader的程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="shader-source" id="vertexShader">
    void main(){
        //声明顶点位置
        gl_Position = vec4(0.0, 0.0, 0.0 ,1.0);
        //声明要绘制的点的大小
        gl_PointSize = 10.0;
    }
</script>


<script type="shader-source" id="fragmentShader">
    void main(){
        //设置像素颜色为红点
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
</script>

<canvas id="canvas"></canvas>
<script>
    let canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    //返回string
    let vertexShaderSource = document.querySelector('#vertexShader').innerHTML;
    //返回WebGLShader  传入的是一个枚举类型 返回的是WebGLShader
    let vertextShader = gl.createShader(gl.VERTEX_SHADER);//首先使用顶点着色器的时候 需要先创建一个顶点着色器
    //将定点着色的shader 与 顶点着色器的资源结合起来 传给shaderSource()  返回void
    //shaderSource(shader: WebGLShader, source: string): void;
    gl.shaderSource(vertextShader,vertexShaderSource);
    //编写shader  ==compile编写的意思  compileShader(shader: WebGLShader): void;
    gl.compileShader(vertextShader);

    //创建片元着色器
    let fragmentShaderSouce = document.querySelector('#fragmentShader').innerHTML;
    //返回WebGLShader
    let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//创建一个shader
    gl.shaderSource(fragmentShader,fragmentShaderSouce);
    //编译
    gl.compileShader(fragmentShader);

    //上面的创建好了 顶点着色器 与 片元着色器 然后就是对这两个的加工

    //创建着色器程序
    let program = gl.createProgram();
    //将顶点着色器挂在着色程序上program: WebGLProgram, shader: WebGLShader
    gl.attachShader(program,vertextShader);
    //将片元着色器挂在着色器程序之上program: WebGLProgram, shader: WebGLShader
    gl.attachShader(program,fragmentShader);
    //链接着色程序linkProgram(program: WebGLProgram): void;
    gl.linkProgram(program);


    //有时候一个 WebGL 应用包含多个 program，所以在使用某个 program 绘制之前，我们要先启用它。
    // 使用刚创建好的着色器程序。useProgram(program: WebGLProgram | null): void;
    gl.useProgram(program);

    //设置清空画布的颜色未黑色
    gl.clearColor(0.0,0.0,0.0,1.0);
    //使用上一步的设置清空画布颜色 清空画布
    //clear(mask: GLbitfield): void;
    gl.clear(gl.COLOR_BUFFER_BIT);
    //绘制点drawArrays(mode: GLenum, first: GLint, count: GLsizei): void;
//     mode，代表图元类型。
// first，代表从第几个点开始绘制。
// count，代表绘制的点的数量。
    gl.drawArrays(gl.POINTS,0,1);


</script>

</body>
</html>

huhudeni

发布了65 篇原创文章 · 获赞 18 · 访问量 11万+

私信关注

webGl shader的学习记录(一) 在canvas的中心画出一个红点 点图元

猜你喜欢

webGl shader的学习记录(一) 在canvas的中心画出一个红点点图元