1、画一个简单的三角形
接着上节,只需要修改下面这行代码即可。
webgl.drawArrays(webgl.TRIANGLES,0,3)
最终代码
<canvas id="container" width="800px" height="600px"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
attribute vec4 a_Position;
varying vec4 v_color;
void main(){
gl_Position=a_Position;
}
`;
var FSHADER=`
precision mediump float;
void main(){
gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
`;
let webgl=container.getContext('webgl') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
var colors = []
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
let vertexBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象
webgl.drawArrays(webgl.TRIANGLES,0,3)
</script>
2、平移
<canvas id="container" width="800px" height="600px"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
attribute vec4 a_Position;
uniform mat4 u_zformMatrix;
void main(){
gl_Position=u_zformMatrix*a_Position;
}
`;
var FSHADER=`
precision mediump float;
void main(){
gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
`;
let webgl=container.getContext('webgl') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
var colors = []
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
let vertexBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象
let u_zformMatrix=webgl.getUniformLocation(webgl.program, 'u_zformMatrix')
let zformMatrix=new Matrix4();
zformMatrix.translate(0.5,0,0)
webgl.uniformMatrix4fv(u_zformMatrix, false, zformMatrix.elements)
webgl.drawArrays(webgl.TRIANGLES,0,3)
</script>
3、旋转180度
只需在上面的基础上,修改矩阵即可
let zformMatrix=new Matrix4();
zformMatrix.setRotate(180,0,0,1)
4、缩放0.5
只需在上面的基础上,修改矩阵即可
let zformMatrix=new Matrix4();
zformMatrix.setScale(0.5,0.5,0.5)
5、旋转加移动
let zformMatrix=new Matrix4();
zformMatrix.setTranslate(0.5,0,0)
zformMatrix.rotate(180,0,0,1)
6、各个顶点不同的颜色
这个要为各个顶点赋予不同的颜色需要用到varying这个关键字
<canvas id="container" width="800px" height="600px"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
attribute vec4 a_Position;
uniform mat4 u_zformMatrix;
attribute vec4 a_color;
varying vec4 v_color;
void main(){
gl_Position=u_zformMatrix*a_Position;
v_color=a_color;
}
`;
var FSHADER=`
precision mediump float;
varying vec4 v_color;
void main(){
gl_FragColor=v_color;
}
`;
let webgl=container.getContext('webgl') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
//给顶点着色器的顶点赋值
let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
let vertexBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象
//给顶点的各个点赋予颜色
let a_color= webgl.getAttribLocation(webgl.program, 'a_color')
let colors=new Float32Array([1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0])
let colorBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,colorBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,colors,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_color,3,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_color) //连接变量a_Position和缓冲区对象
//旋转矩阵
let u_zformMatrix=webgl.getUniformLocation(webgl.program, 'u_zformMatrix')
let zformMatrix=new Matrix4()
zformMatrix.setRotate(180,0,0,1)
webgl.uniformMatrix4fv(u_zformMatrix, false, zformMatrix.elements)
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
webgl.drawArrays(webgl.TRIANGLES,0,3)
</script>
7、使用webgl2.0来重写上面的程序
webgl2.0是基于opengl es3.0来写的,所以对应的shader最好按照新的格式来书写
<canvas id="container" width="800px" height="600px"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`#version 300 es
layout (location=0) in vec4 a_Position;
layout (location=1) in vec4 a_color;
uniform mat4 u_zformMatrix;
out vec4 v_color;
void main(){
gl_Position=u_zformMatrix*a_Position;
v_color=a_color;
}
`;
var FSHADER=`#version 300 es
precision mediump float;
in vec4 v_color;
out vec4 fragColor;
void main(){
fragColor=v_color;
}
`;
let webgl=container.getContext('webgl2') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
let shaderProgram=initWebgl2Shaders(webgl, VSHADER, FSHADER)
if(!shaderProgram){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
//给顶点着色器的顶点赋值
let a_Position= webgl.getAttribLocation(shaderProgram, 'a_Position')
let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
let vertexBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象
//给顶点的各个点赋予颜色
let a_color= webgl.getAttribLocation(shaderProgram, 'a_color')
let colors=new Float32Array([1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0])
let colorBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,colorBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,colors,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_color,3,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_color) //连接变量a_Position和缓冲区对象
//旋转矩阵
let u_zformMatrix=webgl.getUniformLocation(shaderProgram, 'u_zformMatrix')
let zformMatrix=new Matrix4()
zformMatrix.setRotate(180,0,0,1)
webgl.uniformMatrix4fv(u_zformMatrix, false, zformMatrix.elements)
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
webgl.drawArrays(webgl.TRIANGLES,0,3)
</script>
其中initWebgl2Shaders方法
function checkShaderCompilation(gl, shader) {
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
console.log('Shader compiled successfully: ' + compiled);
var compilationLog = gl.getShaderInfoLog(shader);
console.log('Shader compiler log: ' + compilationLog);
};
function initWebgl2Shaders(gl,vertCode,fragCode){
// Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);
// Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);
// Compile the vertex shader
gl.compileShader(vertShader);
checkShaderCompilation(gl, vertShader);
// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);
// Compile the fragment shader
gl.compileShader(fragShader);
checkShaderCompilation(gl, fragShader);
// Create a shader program object to store
// the combined shader program
var shaderProgram = gl.createProgram();
// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
// Link both the programs
gl.linkProgram(shaderProgram);
// Use the combined shader program object
gl.useProgram(shaderProgram);
return shaderProgram;
}