<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/three.min.js"></script> <script id="shader-vs"> // 全拼 vertext shader attribute vec3 v3Positon; //输入变量 void main(void) //负责处理顶点 { gl_Position = vec4(v3Positon,1.0); //内置变量 } </script> <script id="shader-fs"> // webgl中是fragment shader DirectX中称为PX; void main(void) //负责绘色 { gl_FragColor = vec4(1.0,1.0,1.0,1.0); //绘制颜色 } </script> <script> function getShaderSource(scriptId) { var shaderScript = document.getElementById(scriptId); if(shaderScript == null) return ""; var sourceCode = ""; var child = shaderScript.firstChild; while (child){ if(child.nodeType == child.TEXT_NODE) sourceCode += child.textContent; child= child.nextSibling; } return sourceCode; } var webgl = null; var vertexShaderObj = null; var fragmentShaderObj = null; var programObject = null; var triangleBuffer = null; var v3PositionIndex=0; function Init() { var canvas= document.getElementById("myCanvas"); webgl = canvas.getContext("webgl"); //获取webgl上下文 webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight);//设置视图大小 vertexShaderObj = webgl.createShader(webgl.VERTEX_SHADER); //创建顶点shader fragmentShaderObj = webgl.createShader(webgl.FRAGMENT_SHADER); // 创建fragmentShader webgl.shaderSource(vertexShaderObj,getShaderSource("shader-vs")); //指定数据原 webgl.shaderSource(fragmentShaderObj,getShaderSource("shader-fs"));// 指定数据源 webgl.compileShader(vertexShaderObj); //编译上述代码为显卡可以识别的二进制或者汇编语言 webgl.compileShader(fragmentShaderObj); if(!webgl.getShaderParameter(vertexShaderObj,webgl.COMPILE_STATUS)){ //获取编译参数状态,如果错误返回 alert("error:vertexShaderObj"); return; } if(!webgl.getShaderParameter(fragmentShaderObj,webgl.COMPILE_STATUS)){ alert("error:fragmentShaderObj"); return; } programObject = webgl.createProgram(); //创建程序 webgl.attachShader(programObject, vertexShaderObj);//将上面两个编译代码导入程序中 webgl.attachShader(programObject, fragmentShaderObj); webgl.bindAttribLocation(programObject,v3PositionIndex,"v3Position"); //参数说明:bindAttribLocation指的是上面"shader-vs"中attribute,v3PositionIndex指的是索引,v3Positon指的是上面相应的变量 //bind之后通过给索引赋值,给v3Position赋值 webgl.linkProgram(programObject); //链接将程序,形成可执行体 if(!webgl.getProgramParameter(programObject,webgl.LINK_STATUS)){ //链接程序处理 alert("error:programObject"); return; } webgl.useProgram(programObject); //使用程序 var jsArrayData = [ 0.0,1.0,0.0, //上顶点 -1.0,-1.0,0.0,//左顶点 1.0,-1.0,0.0//右定点 ]; //将应用程序的参数传到显卡中,首先在显卡中创建缓冲区 triangleBuffer = webgl.createBuffer(); webgl.bindBuffer(webgl.ARRAY_BUFFER,triangleBuffer);//指定缓冲区对象的类型 webgl.bufferData(webgl.ARRAY_BUFFER,new Float32Array(jsArrayData),webgl.STATIC_DRAW);//将应用数据传到显卡中(webgl.STATIC_DRAW指参数是静态的) webgl.clearColor(0.0,0.0,0.0,1.0); //请颜色 背景 webgl.clear(webgl.COLOR_BUFFER_BIT); webgl.bindBuffer(webgl.ARRAY_BUFFER,triangleBuffer); //使用缓冲区 webgl.enableVertexAttribArray(v3PositionIndex); //绑定启用,需要给顶点赋值(对应上面的v3PositionIndex变量) webgl.vertexAttribPointer(v3PositionIndex,3,webgl.FLOAT,false,0,0); //变量赋值,参数说明:1.属性变量attribute变量名称,2.这里是三维,3.变量类型浮点,4.是否规格化, // 5.变量之间的间隔。6.指顶点缓冲区的取值位置,如果是0的话,参数v3PositionIndex就是指jsArrayData webgl.drawArrays(webgl.TRIANGLES,0,3); //执行绘画,三角形,从第0个开始绘制,绘制三个 } </script> </head> <body οnlοad="Init()"> <canvas id="myCanvas" style="border: 1px solid red;" width="600" height="600"></canvas> </body> </html>
最后效果图如下: