以下代码 有多离谱,我写了两个着色器代码vertexString,fragmentString,
initshaders 在这个函数中 定义着色器基础分别是
创建着色器,
定义着色器源,
编译着色器,
创建着色器程序,
将着色器附加到刚刚创建的着色器程序上,
链接着色器程序,
使用着色器程序,
全都要我自己写,最终实现的效果是这样的,对没错,仅仅是一个蓝色的正方形
80多行代码........
正常写html,css的话,2个div搞定,webGL那么离谱的吗,但是也的确是灵活,我觉得一般人很难玩得转这东西
let webgl;
let projmat4 = mat4.create();
// let meta = mat4.create()
let vertexString = `
attribute vec4 a_position;
uniform mat4 proj;
void main(){
gl_Position = proj * a_position;
gl_PointSize = 60.0;
}
`
let fragmentString = `
void main(){
gl_FragColor = vec4(0.0,0.0,1.0,1.0);
}
`
function init(){
initwebgl();
initshaders();
initbuffers();
draw();
}
function initwebgl(){
webglDIV = document.getElementById("webgl");
webgl = webglDIV.getContext("webgl");
webgl.viewport(0,0,webglDIV.width,webglDIV.height);
mat4.ortho(0,webglDIV.width,0,webglDIV.height,-1,1,projmat4);
}
function initshaders(){
let vertexShader = webgl.createShader(webgl.VERTEX_SHADER);
let fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShader,vertexString);
webgl.shaderSource(fragmentShader,fragmentString);
webgl.compileShader(vertexShader);
webgl.compileShader(fragmentShader);
let program = webgl.createProgram();
webgl.attachShader(program,vertexShader);
webgl.attachShader(program,fragmentShader);
webgl.linkProgram(program);
webgl.useProgram(program);
webgl.program = program;
}
function initbuffers(){
let pointPosition = new Float32Array([100,100,0.0,1.0]);
let a_position = webgl.getAttribLocation(webgl.program,"a_position");
webgl.vertexAttrib4fv(a_position,pointPosition);
let proj = webgl.getUniformLocation(webgl.program,"proj");
webgl.uniformMatrix4fv(proj,false,projmat4);
}
function draw(){
webgl.clearColor(0.0,0.0,0.0,1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
webgl.drawArrays(webgl.POINTS,0,1);
}
以上所有代码加起来,就仅仅是一个蓝色的正方形....