如何使用多个对象创建球体

Question

我必须使用多个正方形来绘制球体（我什至也可以使用三角形，但我发现了一些现有的正方形帮助代码，所以我使用了它）。我已经成功绘制了多个正方形 (5000)。但我不必使用任何 inbuit 函数来创建 sphere 。我的代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script class="WebGL">
        var gl;
        function createProgram(gl, vertexShader, fragmentShader)
        {
            var vs = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vs, vertexShader);
            gl.compileShader(vs);

            if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
                alert(gl.getShaderInfoLog(vs));
            //////
            var fs = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fs, fragmentShader);
            gl.compileShader(fs);

            if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
                alert(gl.getShaderInfoLog(fs));
            program = gl.createProgram();
            gl.attachShader(program, vs);
            gl.attachShader(program, fs);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program, gl.LINK_STATUS))
                alert(gl.getProgramInfoLog(program));
            return program;
        }
        function createShaderFromScriptElement(gl , shaderName)
        {
            var Shader = document.getElementById(shaderName).firstChild.nodeValue;
            return Shader;
        }
        function start()
        {
            var canvas = document.getElementById("canvas");
            gl = canvas.getContext("experimental-webgl");
            if (!gl) { alert("error while GL load"); }

              var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
              var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");

              var program = createProgram(gl, vertexShader, fragmentShader);

            gl.useProgram(program);
            var positionLocation = gl.getAttribLocation(program, "a_position");
            var colorLocation = gl.getUniformLocation(program, "u_color");
            var resolutionLocation = gl.getUniformLocation(program, "u_resolution");

            var buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.uniform2f(resolutionLocation, 200, 200);

            gl.enableVertexAttribArray(positionLocation);
            gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
            for (var ii = 0; ii < 5000; ++ii)
            {
                // Setup a random rectangle
                setRectangle(gl, randomInt(300), randomInt(300), 10, 10);
                // Set a random color.
                gl.uniform4f(colorLocation, Math.random(), Math.random(), Math.random(), 1);
                // Draw the rectangle.
                gl.drawArrays(gl.TRIANGLES, 0, 6);
            }
            function randomInt(range)
            {
                return Math.floor(Math.random() * range);
            }

            // Fills the buffer with the values that define a rectangle.
            function setRectangle(gl, x, y, width, height)
            {
                var x1 = x;
                var x2 = x + width;
                var y1 = y;
                var y2 = y + height;
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                   x1, y1,
                   x2, y1,
                   x1, y2,
                   x1, y2,
                   x2, y1,
                   x2, y2]), gl.STATIC_DRAW);
            }
        }
    </script>
    <script id="2d-vertex-shader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        uniform vec2 u_resolution;

        void main() {
        // convert the rectangle from pixels to 0.0 to 1.0
        vec2 zeroToOne = a_position / u_resolution;

        // convert from 0->1 to 0->2
        vec2 zeroToTwo = zeroToOne * 2.0;

        // convert from 0->2 to -1->+1 (clipspace)
        vec2 clipSpace = zeroToTwo - 1.0;

        gl_Position = vec4(clipSpace* vec2(1, -1), 0, 1);
        }
    </script>

    <script id="2d-fragment-shader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec4 u_color;

        void main()
        {
        gl_FragColor = u_color;  // green
        }
    </script>
</head>
<body onload="start()">
    <div style="text-align: center">
        <canvas id="canvas" width="1000" height="800"></canvas>
    </div>
</body>
</html>

我被要求使用多个对象绘制球体，我不知道如何 do.And 我的尝试是首先绘制多个对象（在我的例子中是 5000 个），然后尝试使用绘制球体它（我的意思是使用这 5000 个正方形，我的下一步是创建球体）。

但我不知道如何进一步使用这些正方形绘制球体？

我无法理解该怎么做。有人可以帮我吗？

Answer 1

其中一种方法是在顶点着色器中从矩形图块构造球体。

一般来说，就是用瓦片覆盖 [0, 2*M_PI] x [0, M_PI] 区域。比如说，你有 N 个方块，其中 N = m*k，m 是方块中的方块数量行和 k 是列中的图块数量。

您可以创建 N 个单位正方形，并为每个单位正方形分配其在 m * k 矩阵中的唯一位置。然后传递这些位置和 width/height of tiles (2*M_PI / m and M_PI / k ) 作为顶点着色器的制服（或作为属性）。

在顶点着色器中知道图块的位置及其 width/height 计算 [0, 2*M_PI] x [0, M_PI][ 上的顶点坐标=40=]（它们将是 phi 和 ksi）。然后计算球体上的实际顶点位置：

coord.x = sin(ksi) * cos(phi); coord.y = sin(ksi) * sin(phi); coord.z = cos(ksi);

另请注意，您应该为此设置透视投影。

选择 m 和 k 由您决定。我建议从方形瓷砖开始。这是我通过这种方式得到的结果图片：

如何使用多个对象创建球体

How to create sphere using multiple objects

javascript

webgl