WebGL中的第三个小程序（着色器）

2020-05-25 10:04:31 阅读：340 来源： 互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw a point</title>
</head>
<body onl oad="main()">
    <canvas id="webgl" width="400" height="400">

    </canvas>

    <script src="lib/webgl-utils.js"></script>
    <script src="lib/webgl-debug.js"></script>
    <script src="lib/cuon-utils.js"></script>
    <script src="HelloPoint1.js"></script>
</body>
</html>

var VSHADER_SOURC=
    'void main() {\n'+
    'gl_Position=vec4(0.0,0.0,0.0,1.0);\n'+
    'gl_PointSize=10.0;\n'+
    '}\n';//GLSL ES语言

var FSHADER_SOURCE=
    'void main(){\n'+
    'gl_FragColor=vec4(1.0,0.0,0.0,1.0);\n'+
    '}\n';

function main(){
    var canvas=document.getElementById("webgl");
    var gl=getWebGLContext(canvas);

    if(!gl)
    {
        console.log("Failed to initialize shaders");
        return;
    }
    
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl);

    gl.drawArrays(gl.POINTS,0,1);
}

js代码中有两个着色器：顶点着色器和片元着色器（着色器可以让光照上去之后，或者观察着的角度发生变化，对场景的影响）

着色器程序部分代码会被处理成字符串以换行结束，可以检查错误的行号。

initialShader()函数执行如下

将着色器代码从JavaScript传给WebGL的系统，建立着色器，顶点着色器先执行，对gl_position和gl_pointSize复制，然后传入片元着色器，片元着色器再执行。

WebGL程序包括运行在浏览器中的Javascript和运行在WebGL系统中的着色器程序两部分。

顶点着色器

GLSE ES是一种强类型语言，必须指明变量类型。

这里出现了两种float 和vec4两种类型，vect由4个浮点型组成的矢量，一个点是有3个坐标组成的，此处有4个

叫做齐次坐标，能够提高处理三维数据的效率，(x,y,z,w)表示(x/w,y/w,z/w),如果w趋近于0,则表示点趋向于无穷远，并且有利于使用矩阵乘法

三维坐标系统中一般使用其次坐标表示顶点的三维坐标。

片元着色器

片元着色器控制点的颜色

vec4 gl_FragColor=vec4(1.0,0.0,0.0,1.0)

gl.drawArrays(mode,first,count)函数，这个函数会使顶点着色器执行count此

mode:gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP...

first:从哪个点开始,count用到几个顶点。

顶点着色器的main函数执行完，片元着色器main()执行将颜色赋值给gl_FragColor，

标签：1.0,0.0,WebGL,第三个,片元,顶点,gl,着色器
来源： https://www.cnblogs.com/1521681359qqcom/p/12526294.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

WebGL中的第三个小程序（着色器）