Javascript 如何使用多个对象创建球体
我必须使用多个正方形来绘制球体（我甚至可以使用三角形，但我在square中找到了一些现有的帮助代码，所以我使用了它）。我已经成功地绘制了多个正方形（5000）。但我不必使用任何内置函数来创建球体。我的代码如下：Javascript 如何使用多个对象创建球体,javascript,webgl,Javascript,Webgl,我必须使用多个正方形来绘制球体（我甚至可以使用三角形，但我在square中找到了一些现有的帮助代码，所以我使用了它）。我已经成功地绘制了多个正方形（5000）。但我不必使用任何内置函数来创建球体。我的代码如下： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <script class="WebGL"> var gl;
<!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>
var-gl；
函数createProgram（gl、vertexShader、fragmentShader）
{
var vs=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vs，vertexShader）；
总帐编译主管（vs）；
如果（！gl.getShaderParameter（vs，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（vs））；
//////
var fs=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fs，fragmentShader）；
总帐编辑主任（fs）；
如果（！gl.getShaderParameter（fs，gl.COMPILE_状态））
警报（gl.getShaderInfoLog（fs））；
program=gl.createProgram（）；
总分类：attachShader（项目，vs）；
总承包商助理（项目，财政司）；
总账链接程序（程序）；
if（！gl.getProgramParameter（程序、总账链接状态））
警报（gl.getProgramInfoLog（程序））；
返回程序；
}
函数createShaderFromScriptElement（gl、shaderName）
{
var Shader=document.getElementById（shaderName）.firstChild.nodeValue；
返回着色器；
}
函数start（）
{
var canvas=document.getElementById（“canvas”）；
gl=canvas.getContext（“实验性webgl”）；
如果（！gl）{alert（“gl加载时出错”）；}
var vertexShader=createShaderFromScriptElement（gl，“2d顶点着色器”）；
var fragmentShader=createShaderFromScriptElement（gl，“2d片段着色器”）；
var program=createProgram（gl、vertexShader、fragmentShader）；
gl.useProgram（程序）；
var positionLocation=gl.GetAttriblLocation（程序，“a_位置”）；
var colorLocation=gl.getUniformLocation（程序，“u_颜色”）；
var resolutionLocation=gl.getUniformLocation（程序，“u_resolution”）；
var buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.uniform2f（决议位置，200200）；
gl.EnableVertexAttributeArray（位置位置）；
gl.VertexAttribute指针（位置位置，2，gl.FLOAT，false，0，0）；
对于（var ii=0；ii<5000；++ii）
{
//设置一个随机矩形
setRectangle（gl，randomInt（300），randomInt（300），10，10）；
//设置一个随机颜色。
gl.uniform4f（colorLocation，Math.random（），Math.random（），Math.random（），1）；
//画矩形。
gl.绘图阵列（gl.三角形，0,6）；
}
函数randomInt（范围）
{
返回Math.floor（Math.random（）*范围）；
}
//用定义矩形的值填充缓冲区。
函数集矩形（总图、x、y、宽度、高度）
{
var-x1=x；
var x2=x+宽度；
变量y1=y；
变量y2=y+高度；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array([
x1，y1，
x2，y1，
x1，y2，
x1，y2，
x2，y1，
x2，y2]），总图静态图）；
}
}
属性向量2 a_位置；
均匀vec2u_分辨率；
void main（）{
//将矩形从像素转换为0.0到1.0
vec2 zeroToOne=a_位置/u_分辨率；
//从0->1转换为0->2
vec2 zeroToTwo=zeroToOne*2.0；
//从0->2转换为-1->+1（剪辑空间）
vec2 clipSpace=zeroToTwo-1.0；
gl_Position=vec4（clipSpace*vec2（1，-1），0，1）；
}
精密中泵浮子；
均匀的vec4 u_颜色；
void main（）
{
gl\u FragColor=u\u color；//绿色
}
我不知道该怎么做。有人能帮我吗？其中一种方法是在顶点着色器中从矩形瓷砖构造球体 一般来说，事情是用瓷砖覆盖[0,2*M_-PI]x[0,M_-PI]区域。比如说，您有N个瓷砖，其中N=m*k，m是一行瓷砖的数量，k是一列瓷砖的数量 您可以创建N单位正方形，并将其在m*k矩阵中的唯一位置指定给每个正方形。然后将这些位置和瓷砖的宽度/高度（2*M_PI/M和M_PI/k）作为一致性传递给顶点着色器（或作为属性） 在顶点着色器中，知道平铺的位置及其宽度/高度可以计算vertice在[0,2*M_-PI]x[0,M_-PI]上的坐标（它们将是phi和ksi）。然后计算球体上的实际顶点位置：
coord.x = sin(ksi) * cos(phi);
coord.y = sin(ksi) * sin(phi);
coord.z = cos(ksi);
可以复制@mlkn，但你知道如何实现我的目标吗？你的意思是获得行和列相交的交点，然后创建sq