How to create create a 3d structure using gl.POINTS in webgl?
Question
I have a big set of coordinates that corresponds to a 3d structure which i want to create in webgl and i think i can do it with:
gl.drawArray(gl.POINTS, 0, 3);
but the thing is that the i am unable to create the code, can anyone please provide a code that help me create that structure?
1 answers
solution1
0 2021-04-03 05:53:18
If you want to quickly render your data in 3D then I recommend you use a 3rd party library between your app and WebGL, such as three.js or Unity.
If you want to use WebGL directly, then I have appended a tiny functioning WebGL program. You can use it as a starting point to learn WebGL.
If your 3D data is a point cloud then you can make and select a buffer of XYZ coordinates, and then use "gl.drawArray(gl.POINTS, 0, nv)".
If your 3D data contains surfaces then you need to represent your surface as many triangles, load the vertices into a buffer, and then use gl.TRIANGLES instead of 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.