Javascript 如何在webgl中使用gl.POINTS创建三维结构？
我有一大组坐标，对应于我想在webgl中创建的3d结构，我想我可以使用：Javascript 如何在webgl中使用gl.POINTS创建三维结构？,javascript,webgl,Javascript,Webgl,我有一大组坐标，对应于我想在webgl中创建的3d结构，我想我可以使用： gl.drawArray(gl.POINTS, 0, 3); 但问题是，我无法创建代码，任何人都可以提供一个代码来帮助我创建该结构吗？如果您想快速以3D方式呈现数据，我建议您在应用程序和WebGL之间使用第三方库，如three.js或Unity 如果您想直接使用WebGL，那么我附加了一个功能很小的WebGL程序。您可以将其作为学习WebGL的起点 如果三维数据是点云，则可以创建并选择XYZ坐标的缓冲区，然后使用“gl.
gl.drawArray(gl.POINTS, 0, 3);
但问题是，我无法创建代码，任何人都可以提供一个代码来帮助我创建该结构吗？如果您想快速以3D方式呈现数据，我建议您在应用程序和WebGL之间使用第三方库，如three.js或Unity 如果您想直接使用WebGL，那么我附加了一个功能很小的WebGL程序。您可以将其作为学习WebGL的起点 如果三维数据是点云，则可以创建并选择XYZ坐标的缓冲区，然后使用“gl.drawArray（gl.POINTS，0，nv）” 如果三维数据包含曲面，则需要将曲面表示为多个三角形，将顶点加载到缓冲区中，然后使用gl.triangles而不是gl.Points
<!DOCTYPE html>
<html>
<head>
<title>Tiny WebGL</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<canvas id="chart" style="width:512px; height:512px; border:1px solid #000;">
<script>
function makeShader(type, src) {
var shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
alert("WebGL compiled failed");
return shader;
}
function makeProgram(vs, fs) {
var prog = gl.createProgram();
gl.attachShader(prog, makeShader(gl.VERTEX_SHADER, vs));
gl.attachShader(prog, makeShader(gl.FRAGMENT_SHADER, fs));
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS))
alert("WebGL link failed");
return prog;
}
// Setup WebGL with 1-1 pixels
var canvas = document.getElementById('chart');
var cw = canvas.clientWidth;
var ch = canvas.clientHeight;
var dpr = window.devicePixelRatio || 1;
canvas.width = cw * dpr;
canvas.height = ch * dpr;
var gl = canvas.getContext("webgl");
// Make GLSL program
var vs =
"attribute float a;" +
"void main(void) {" +
" gl_Position=vec4(a, 0.0, 0.0, 1.0);" +
" gl_PointSize=64.0;" +
"}";
var fs =
"precision mediump float;" +
"void main(void) {" +
" gl_FragColor=vec4(gl_PointCoord,0.0,1.0);" +
"}";
var prog = makeProgram(vs, fs);
// Bind attrib "a" in location 0, to avoid performance warning.
gl.bindAttribLocation(prog, 0, "a");
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(1), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(0, 1, gl.UNSIGNED_BYTE, false, 0, 0);
// Draw scene
gl.clearColor(0, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(prog);
gl.drawArrays(gl.POINTS, 0, 1);
</script>
</canvas>
</body>
</html>
微型WebGL
函数makeShader（类型，src）{
var shader=gl.createShader（类型）；
gl.shaderSource（着色器，src）；
gl.compileShader（着色器）；
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））
警报（“WebGL编译失败”）；
返回着色器；
}
函数生成程序（vs，fs）{
var prog=gl.createProgram（）；
gl.attachShader（prog，makeShader（gl.VERTEX_SHADER，vs））；
gl.attachShader（prog，makeShader（gl.FRAGMENT_SHADER，fs））；
总账链接程序（prog）；
if（！总账.getProgramParameter（程序、总账链接状态））
警报（“WebGL链接失败”）；
返回程序；
}
//使用1-1像素设置WebGL
var canvas=document.getElementById（'chart'）；
var cw=canvas.clientWidth；
var ch=canvas.clientHeight；
var dpr=window.devicePixelRatio | | 1；
canvas.width=cw*dpr；
canvas.height=ch*dpr；
var gl=canvas.getContext（“webgl”）；
//制作GLSL程序
var vs=
“属性浮动a；”+
“无效主（无效）{”+
“gl_位置=向量4（a，0.0，0.0，1.0）；”+
“gl_PointSize=64.0；”+
"}";
var fs=
“精密中泵浮动；”+
“无效主（无效）{”+
“gl_FragColor=vec4（gl_PointCoord，0.0,1.0）；”+
"}";
var prog=制造程序（vs，fs）；
//绑定位置0中的属性“a”，以避免性能警告。
总帐绑定属性（进度，0，“a”）；
var buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
总账缓冲数据（总账数组缓冲区、新Uint8Array（1）、总账静态绘图）；
gl.EnableVertexAttributeArray（0）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.VertexAttribute指针（0,1，gl.UNSIGNED_字节，false，0,0）；
//画场景
gl.clearColor（0,0,1,1）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
德国劳埃德船级社使用计划（prog）；
总图绘制阵列（总图点，0,1）；