标签：ViewMatrix webgl SOURCE program var Position 三角形 gl 绘制
<canvas id="myCanvas" width="400" height="400"></canvas>
var canvas = document.getElementById('myCanvas')
var gl = canvas.getContext('webgl')
var program = gl.createProgram()
var VSHADER_SOURCE, FSHADER_SOURCE
VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'uniform mat4 u_ViewMatrix;\n' +
'void main () {\n' +
'gl_Position = u_ProjectionMartix u_ViewMatrix u_ModelMatrix * a_Position; \n' +
'}\n'
FSHADER_SOURCE =
'void main () {\n' +
'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
'}\n'
var vertexShader, fragmentShader
function createShader (gl, sourceCode, type) {
// create shader
var shader = gl.createShader(type)
gl.shaderSource(shader,sourceCode)
gl.compileShader(shader)
return shader
}
// define vertex shader
vertexShader = createShader(gl, VSHADER_SOURCE,gl.VERTEX_SHADER)
//define frament shader
fragmentShader = createShader(gl, FSHADER_SOURCE, gl.FRAGMENT_SHADER)
//attach shader to program
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
//link program to context
gl.linkProgram(program)
gl.useProgram(program)
gl.program = program
var currentAngle = 0
var g_last = Date.now()
var tick = function () {
// update the new rotation angle
animate()
//draw
draw()
requestAnimationFrame(tick)
}
function initVertexBuffers (gl) {
var vertices = new Float32Array([
0, 0.5, -0.5, -0.5, 0.5, -0.5])
var n = 3
var vertexBuffer = www.cungun.comgl.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)
// 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)
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
var modelMatrix = new Matrix4()
然后调取出游戏数据库：
var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix')
var viewMatrix = new Matrix4()
viewMatrix.lookAt(100, 100, 100, 0, 0, 0, 0, 1, 0)
var u_ProjectionMatrix = gl.getUniformLocation(gl.program, 'u_ProjectionMatrix')
var projectionMatrix = new Matrix4()
// projectionMatrix.perspective(120, 1, 0.1, 1000)
projectionMatrix.ortho(-1, 1, -1, 1, 0.1, 1000)
function animate () {
var now = Date.now()
var duration = now - g_last
g_last = now
currentAngle = currentAngle + duration / 1000 * 180
}
function draw () {
// clear canvas and add background color
modelMatrix.setRotate(currentAngle, 0, 1, 0)
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements)
gl.uniformMatrix4fv(u_ProjectionMatrix, false, projectionMatrix.elements)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0, n)
}
tick()
标签：ViewMatrix,webgl,SOURCE,program,var,Position,三角形,gl,绘制 来源： https://www.cnblogs.com/a252625/p/14963623.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。