Webgl-超级基础随笔1-shader初始化与三角绘制

最新推荐文章于 2021-12-01 11:00:39 发布

_Zou

最新推荐文章于 2021-12-01 11:00:39 发布

阅读量175

点赞数

分类专栏： webgl笔记文章标签： webgl js canvas javascript html5

zouzouzou

本文链接：https://blog.csdn.net/weixin_40676050/article/details/107884126

版权

webgl笔记专栏收录该内容

16 篇文章 3 订阅

订阅专栏

shader的创建与绑定

静态三角形绘制

旋转三角绘制

shader的创建与绑定

demo.html

<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

<body>

<canvas id="myCanvas" width="400" height="400"></canvas>



<script type="text/javascript" src="./matrix.js"></script>

<script type="text/javascript" src="./demo.js"></script>

</body>

</html>

demo.js

var canvas = document.getElementById('myCanvas')//获取canvas

var gl = canvas.getContext('webgl')//获取上下文

var VSHADER_SOURCE,FSHADER_SOURCE//定义顶点、片元源代码

var program = gl.createProgram()//创建webgl程序

var vertexShader, fragmentShader

//创建着色器（gl上下文、着色器源码,着色器类型）

function createShader(gl, sourceCode, type) {

// create shader

var shader = gl.createShader(type)

gl.shaderSource(shader, sourceCode)//挂载代码

gl.compileShader(shader)//编译

//打印shader中的编译错误信息

var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

if (!compiled) {

var error = gl.getShaderInfoLog(shader);

console.log('Failed to compile shader : ' + error);

gl.deleteShader(shader);

return null;

}

return shader

}

//定义顶点着色器vertex shader

vertexShader = createShader(gl,VSHADER_SOURCE,gl.VERTEX_SHADER)

//定义片元着色器frament shader

fragmentShader = createShader(gl,FSHADER_SOURCE,gl.FRAGMENT_SHADER)

//program中添加shader

gl.attachShader(program, vertexShader)

gl.attachShader(program,fragmentShader)

//连接program to context

gl.linkProgram(program)

gl.useProgram(program)

gl.program = program

静态三角形绘制

demo.js

var VSHADER_SOURCE,FSHADER_SOURCE//定义顶点、片元源代码

VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'void main (){\n'+

'gl_Position = a_Position;\n'+

'}\n'

FSHADER_SOURCE =

'void main (){\n'+

'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n'+

'}\n'

function initVertexBuffers (gl) {

var vertices = new Float32Array([

0, 0.5, -0.5, -0.5, 0.5, -0.5

])

var n = 3//取3个点

var vertexBuffer = gl.createBuffer()

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

// write data into the buffer object

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

// get attribute a_Position address in vertex shader

var a_Position = gl.getAttribLocation(gl.program, 'a_Position')

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)//每2个data为一点

// enable a_Position variable

gl.enableVertexAttribArray(a_Position)

return n

}

// write the positions of vertices to a vertex shader

var n = initVertexBuffers(gl)

//绘制

gl.clearColor(0, 0, 0, 1)//背景色

function draw() {

//cleaer canvas and add background color

gl.clear(gl.COLOR_BUFFER_BIT)//背景色

gl.drawArrays(gl.TRIANGLES, 0, n)

}

draw()

旋转三角绘制

demo.js:关键代码

顶点着色器源码

VSHADER_SOURCE =

'attribute vec4 a_Position;\n'+

'uniform mat4 u_ModelMatrix;\n' +//旋转

'void main (){\n'+

'gl_Position = u_ModelMatrix*a_Position;\n'+//位置*旋转角度

'}\n'

角度定义与变换

//旋转角度定义

var currentAngle = 0

var g_last = Date.now()

var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')

var modelMatrix = new Matrix4()