- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直致力于在适用于 Android 的 OpenGL ES 2.0 中使用三角形带渲染球体。我遇到了一个问题,当球体旋转时,它似乎在自身上重叠。
我创建顶点列表的代码是
private static final int FLOATS_PER_VERTEX = 5;
private final float[] vertexData;
private final List<DrawCommand> drawList = new ArrayList<>();
private int offset = 0;
private ObjectBuilder(int sizeInVertices)
{
vertexData = new float[sizeInVertices * FLOATS_PER_VERTEX];
}
private void appendSphere(double radius, int depth)
{
double x, y, z, h, altitude, azimuth;
// Ensure that the depth is between 1 and MAX_DEPTH
int clampDepth = Math.max(1, Math.min(5, depth));
// Calculate the sphere values
int numStrips = (int) Math.pow(2, clampDepth - 1) * 5;
final int numVerticesPerStrip = (int) Math.pow(2, clampDepth) * 3;
double altitudeStepAngle = ONE_TWENTY_DEGREES / Math.pow(2, clampDepth);
double azimuthStepAngle = THREE_SIXTY_DEGREES / numStrips;
// Loop through each strip
for (int i = 0; i < numStrips; i++)
{
final int startVertex = offset / FLOATS_PER_VERTEX;
// Calculate the position of the first vertex in the strip
altitude = NINETY_DEGREES;
azimuth = i * azimuthStepAngle;
// Draw the rest of the strip
for (int j = 0; j < numVerticesPerStrip; j += 2)
{
// First point - Vertex.
y = radius * Math.sin(altitude);
h = radius * Math.cos(altitude);
z = h * Math.sin(azimuth);
x = h * Math.cos(azimuth);
vertexData[offset++] = (float) x;
vertexData[offset++] = (float) y;
vertexData[offset++] = (float) z;
// First point - Texture.
vertexData[offset++] = (float) (1 - azimuth / THREE_SIXTY_DEGREES);
vertexData[offset++] = (float) (1 - (altitude + NINETY_DEGREES) / ONE_EIGHTY_DEGREES);
// Second point - Vertex.
altitude -= altitudeStepAngle;
azimuth -= azimuthStepAngle / 2.0;
y = radius * Math.sin(altitude);
h = radius * Math.cos(altitude);
z = h * Math.sin(azimuth);
x = h * Math.cos(azimuth);
vertexData[offset++] = (float) x;
vertexData[offset++] = (float) y;
vertexData[offset++] = (float) z;
// Second point - Texture.
vertexData[offset++] = (float) (1 - azimuth / THREE_SIXTY_DEGREES);
vertexData[offset++] = (float) (1 - (altitude + NINETY_DEGREES) / ONE_EIGHTY_DEGREES);
azimuth += azimuthStepAngle;
}
drawList.add(new DrawCommand()
{
@Override
public void draw()
{
glDrawArrays(GL_TRIANGLE_STRIP, startVertex, numVerticesPerStrip);
}
});
}
}
我的渲染代码将多个观察矩阵和透视矩阵相乘,然后执行以下操作:
positionObjectInScene(0f, 0f, 0f);
textureProgram.useProgram();
textureProgram.setUniforms(modelViewProjectionMatrix, texture);
planet.bindData(textureProgram);
glFrontFace(GL_CW);
planet.draw();
渲染中显然涉及很多不同的部分。不过,我认为问题在于顶点生成。
最佳答案
以下代码 fragment 将为要在 OpenGL-ES 中渲染的球体生成顶点、法线、纹理坐标和顶点索引:
public float[] mVertices;
public float[] mNormals;
public float[] mTexture;
public char[] mIndexes;
// rings defines how many circles exists from the bottom to the top of the sphere
// sectors defines how many vertexes define a single ring
// radius defines the distance of every vertex from the center of the sphere.
public void generateSphereData(int totalRings, int totalSectors, float radius)
{
mVertices = new float[totalRings * totalSectors * 3];
mNormals = new float[totalRings * totalSectors * 3];
mTexture = new float[totalRings * totalSectors * 2];
mIndexes = new char[totalRings * totalSectors * 6];
float R = 1f / (float)(totalRings-1);
float S = 1f / (float)(totalSectors-1);
int r, s;
float x, y, z;
int vertexIndex = 0, textureIndex = 0, indexIndex = 0, normalIndex = 0;
for(r = 0; r < totalRings; r++)
{
for(s = 0; s < totalSectors; s++)
{
y = (float)Math.sin((-Math.PI / 2f) + Math.PI * r * R );
x = (float)Math.cos(2f * Math.PI * s * S) * (float)Math.sin(Math.PI * r * R );
z = (float)Math.sin(2f * Math.PI * s * S) * (float)Math.sin(Math.PI * r * R );
if (mTexture != null)
{
mTexture[textureIndex] = s * S;
mTexture[textureIndex + 1] = r * R;
textureIndex += 2;
}
mVertices[vertexIndex] = x * radius;
mVertices[vertexIndex + 1] = y * radius;
mVertices[vertexIndex + 2] = z * radius;
vertexIndex += 3;
mNormals[normalIndex] = x;
mNormals[normalIndex + 1] = y;
mNormals[normalIndex + 2] = z;
normalIndex += 3;
}
}
int r1, s1;
for(r = 0; r < totalRings ; r++)
{
for(s = 0; s < totalSectors ; s++)
{
r1 = (r + 1 == totalRings) ? 0 : r + 1;
s1 = (s + 1 == totalSectors) ? 0 : s + 1;
mIndexes[indexIndex] = (char)(r * totalSectors + s);
mIndexes[indexIndex + 1] = (char)(r * totalSectors + (s1));
mIndexes[indexIndex + 2] = (char)((r1) * totalSectors + (s1));
mIndexes[indexIndex + 3] = (char)((r1) * totalSectors + s);
mIndexes[indexIndex + 4] = (char)((r1) * totalSectors + (s1));
mIndexes[indexIndex + 5] = (char)(r * totalSectors + s);
indexIndex += 6;
}
}
}
根据您的代码结构,您可能需要重构代码以满足您的目的,但一般来说,顶点、法线、纹理坐标和顶点索引将生成一个具有纹理和法线的球体(如果您使用照明或您对法线有任何其他需求)。
您需要为这段代码生成的每个数组创建一个缓冲区,然后按以下方式绑定(bind)它们:
mVertexBuffer = ByteBuffer.allocateDirect(mVertexArray.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
mVertexBuffer.put(mVertexArray).position(0);
mIndexBuffer = ByteBuffer.allocateDirect(mIndexArray.length * 4).order(ByteOrder.nativeOrder()).asCharBuffer();
mIndexBuffer.put(mIndexArray).position(0);
mTextureCoordinateBuffer = ByteBuffer.allocateDirect(mTextureCoordinatesArray.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
mTextureCoordinateBuffer.put(mTextureCoordinatesArray).position(0);
mNormalBuffer = ByteBuffer.allocateDirect(mNormalArray.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
mNormalBuffer.put(mNormalArray).position(0);
vertexBuffer.position(0);
GLES20.glVertexAttribPointer(getParamId(PARAM_VERTEX_POSITION), 3, GLES20.GL_FLOAT, false, 0, vertexBuffer);
GLES20.glEnableVertexAttribArray(getParamId(PARAM_VERTEX_POSITION));
normalBuffer.position(0);
GLES20.glVertexAttribPointer(getParamId(PARAM_VERTEX_NORMAL), 3, GLES20.GL_FLOAT, false, 0, normalBuffer);
GLES20.glEnableVertexAttribArray(getParamId(PARAM_VERTEX_NORMAL));
textureCoordinateBuffer.position(0);
GLES20.glVertexAttribPointer(getParamId(PARAM_VERTEX_TEXTURE_COORDINATES), 2, GLES20.GL_FLOAT, false, 0, textureCoordinateBuffer);
GLES20.glEnableVertexAttribArray(getParamId(PARAM_VERTEX_TEXTURE_COORDINATES));
注意:getParamId()
返回 OpenGL 为着色器使用的变量(例如位置、法线和纹理坐标)生成的数字 ID。
完成此操作后,剩下要做的就是使用索引缓冲区进行绘制:
GLES20.glDrawElements(GLES20.GL_TRIANGLES, mIndexArray.length, GLES20.GL_UNSIGNED_SHORT, mIndexBuffer);
希望这能帮助您入门。
关于android - OpenGL ES 2 球体渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31328769/
我一直在尝试根据内部“ Shiny 球体”图案在球体上产生发光效果,但一直坚持定位“球体”的某些方面。 就目前而言,我的 CSS 看起来像这样: .sphere { height: 200px;
我正在尝试使用下面给出的旋转矩阵来旋转“轨道”: [cos(angle) -sin(angle) 0; sin(angle) cos (angle) 0; 0 0
我有一组由地理 (WGS84) 坐标指定的多边形:它们位于一个球体上。 我有一个由经纬度对指定的点。 我想(有效地)找到点和多边形之间的最小大圆距离。 我当前的堆栈包括 fiona、shapely、g
将 boost::geometry::line_interpolate 与 boost::geometry::srs::spheroid 结合使用,我正在计算沿最短距离的大圆导航点2个地理点。下面的代
如何在 JavaFX 中填充具有线性渐变(如 2d 圆)的 3D 球体?我使用 JavaFX Scene Builder。 最佳答案 正如@mohsenmadi 所指出的,漫反射颜色不允许您使用一种颜
我想使用 Python PyOpenGL 生成三个球体的场景。两个在有颜色的一侧(红色和绿色)。中间一个上面有任何纹理(砖 block 纹理实际上是与代码位于同一目录中的方形 jpg 文件)。 到目前
我从不同网格变量中的 .x 文件加载多个网格。现在我想计算我加载的所有网格(以及正在显示的网格)的包围球请指导我如何实现这一目标。可以将 VertexBuffers 附加到一个变量中并使用它计算 bo
我正在尝试用“粒子”(由 3D XYZ 向量表示)以最佳方式填充 3D 球形体积,这些粒子需要彼此保持特定距离,同时尽量减少它们之间存在的自由空间量. 但有一个问题 - 粒子本身可能会落在球形体积的边
我想创建一个球体,实际上是一个地球仪。但我似乎找不到任何有关如何处理球体的顶点和索引以及如何设置它们的有用信息。你们中的任何人都可以引导我走上正确的轨道,也许给我一些示例代码或指向教程的链接吗? 最佳
我终于手动画了一个球体:) 我希望我的球体是红色的,但轮廓是绿色的: 为了实现这一点,我做了以下事情。我用红色画了一个实心球体,然后我画了同一个球体,但线框和绿色。当我打开 DEPTH_TEST 时,
我想在 HTML 5.0 Canvas 中绘制 3D 球或球体。我想了解有关如何绘制 3D 球体的算法。谁可以与我分享这个? 最佳答案 您将需要为一个球体建模,并让它具有不同的颜色,以便在它旋转时您可
我正在尝试使用 webGL 构建 3D 太阳系。 我让所有恒星按照应有的方式绕太阳旋转,并且我希望它们也绕自己的 Y 轴旋转。 我怎样才能添加它?我尝试过: mat4.rotate(mvMatrix,
我有二维彩色图像。所有彩色点都位于此矩形图像中心的圆形区域内,圆圈外的所有点都是黑色的(我从鱼眼相机获得这些矩形图像)。我知道这个圆心的坐标和它的半径。 我需要将所有彩色点从 2D 图像上的圆形区域移
我正在用球体上的粒子进行 Metropolis Monte Carlo 模拟,并有一个关于给定时间步长内随机运动的问题。 我知道要在球体上获得均匀分布的随机点开始,使用最简单的方法是不够的(使用恒定
我想让球体向前移动一定的厘米,但到目前为止我还没有设法让任何东西正常工作这是我现在的代码: EditText distanceText = (EditText) findViewById(R.id.d
我想仅使用 Canvas 制作一个旋转对象(球体、盒子等)。但我找不到教程。如果您看到某个地方或解释如何做,请提供帮助。 像这样example ,仅无任何效果 最佳答案 希望你喜欢数学。如果您愿意编写
使用 GL_TRIANGLES 在 OpenGL ES 2.0 中绘制纹理球体的最简单方法是什么? 我特别想知道如何计算顶点。 最佳答案 有多种方法可以对球体进行三角测量。受欢迎的,不太受欢迎的,好的
我有一个关于在 HTML5/Canvas/Javascript 中伪造 3d 的问题... 基本上,我在 上绘制了一个二维图像使用 drawImage() . 我想做的是绘制图像,然后置换球体上的纹
我在 OpenGL ES 中绘制行星,遇到了一些有趣的性能问题。普遍的问题是:如何最好地在球体上渲染“非常详细”的纹理? (球体是有保证的;我对球体特定的优化很感兴趣) 基本案例: 窗口大约是。 20
对于我的论文项目,我使用 DataArts WebGL Globe 来开发一个网页,该网页将在触摸显示器上的展览中使用。作为监视器触摸,我需要使地球可点击以选择单个国家并打开弹出窗口并突出显示选定的国
我是一名优秀的程序员,十分优秀!