javascript [webgl的]复数メッシュ表示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript [webgl的]复数メッシュ表示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>multiMesh</title>
<script src="minMatrix.js"></script>
<script src="script.js"></script>
<script id="vs" type="x-shader/x-vertex">
attribute vec3 pos;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec4 vColor;
void main()
{
vColor = color;
gl_Position = mvpMatrix * vec4(pos, 1);
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main()
{
gl_FragColor = vColor;
}
</script>
</head>
<body><canvas id="canvas"></canvas></body>
</html>
/**
* 複数メッシュ表示
*/
window.onload = function()
{
console.log("====== entry ======");
var canvas = document.getElementById('canvas');
canvas.width = canvas.height = 300;
var gl = canvas.getContext('webgl');
var vs = gl.createShader(gl.VERTEX_SHADER);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vs, document.getElementById('vs').text);
gl.shaderSource(fs, document.getElementById('fs').text);
gl.compileShader(vs);
gl.compileShader(fs);
var prog = gl.createProgram();
gl.attachShader(prog, vs);
gl.attachShader(prog, fs);
gl.linkProgram(prog);
if (gl.getProgramParameter(prog, gl.LINK_STATUS))
{
gl.useProgram(prog);
}
var attrList = [];
var strideList = [];
var uniformList = [];
attrList[0] = gl.getAttribLocation(prog, "pos");
attrList[1] = gl.getAttribLocation(prog, "color");
strideList[0] = 3;
strideList[1] = 4;
uniformList[0] = gl.getUniformLocation(prog, "mvpMatrix");
// attribute pos
var posVbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posVbo);
gl.enableVertexAttribArray(attrList[0]);
gl.vertexAttribPointer(attrList[0], strideList[0], gl.FLOAT, false, 0, 0);
var posData = [
0, 0.5, 0,
-0.5, -0.5, 0,
0.5, -0.5, 0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(posData), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// attribute color
var colorVbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorVbo);
gl.enableVertexAttribArray(attrList[1]);
gl.vertexAttribPointer(attrList[1], strideList[1], gl.FLOAT, false, 0, 0);
var colorData = [
1,0,0,1,
0,1,0,1,
0,0,1,1
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// matrix
var m = new matIV();
var mMatrix = m.identity(m.create());
var vMatrix = m.identity(m.create());
var pMatrix = m.identity(m.create());
var vpMatrix = m.identity(m.create());
var mvpMatrix = m.identity(m.create());
m.lookAt(
// z軸は正の数
[0,0,2],
[0,0,0],
[0,1,0],
vMatrix
);
m.perspective(
90,
1,
// nearを0にしてはいけない
0.1,
100,
pMatrix
);
m.multiply(pMatrix, vMatrix, vpMatrix);
draw();
function draw()
{
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 1つ目の三角形
m.identity(mMatrix);
m.translate(mMatrix, [-1, 1, 0, 1], mMatrix);
m.multiply(vpMatrix, mMatrix, mvpMatrix);
gl.uniformMatrix4fv(uniformList[0], false, mvpMatrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);
// 2つ目の三角形
m.identity(mMatrix);
m.translate(mMatrix, [0.5, -0.2, 1], mMatrix);
m.multiply(vpMatrix, mMatrix, mvpMatrix);
gl.uniformMatrix4fv(uniformList[0], false, mvpMatrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
};以上是关于javascript [webgl的]复数メッシュ表示的主要内容，如果未能解决你的问题，请参考以下文章