<!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 onload="Init()">
<canvas id="myCanvas" style="border: 1px solid red;" width="600" height="600"></canvas>
</body>
</html>
