- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 webgl 渲染圆环。我正在使用第三方库,这使得这个过程变得更容易:我只需要声明各个顶点、它们的法线和它们的索引。每个 3 个索引的元组绘制一个三角形,顶点必须遵循右手定则。
到目前为止,这就是我所拥有的:
this.vertices = [];
this.indices = [];
this.normals = [];
this.texCoords = [];
let slices_angle = 0;
let loops_angle = 0;
let slices_delta = (2 * Math.PI) / this.slices;
let loops_delta = (2 * Math.PI) / this.loops;
let abc = 0;
while (slices_angle < 2 * Math.PI + slices_delta) {
let cos_slices = Math.cos(slices_angle);
let sin_slices = Math.sin(slices_angle);
let cos_loops = Math.cos(loops_angle);
let sin_loops = Math.sin(loops_angle);
while (loops_angle < 2 * Math.PI + loops_delta) {
// x=(R+r·cos(v))cos(w)
// y=(R+r·cos(v))sin(w)
// z=r.sin(v)
let x = (this.outerRad + this.inner_rad * cos_slices) * cos_loops;
let y = (this.outerRad + this.inner_rad * cos_slices) * sin_loops;
let z = this.inner_rad * sin_slices;
this.vertices.push(x, y, z);
this.normals.push(x, y, z);
// this.texCoords.push(j / this.slices);
// this.texCoords.push(i / this.stacks);
loops_angle += loops_delta;
}
slices_angle += slices_delta;
}
for (var i = 0; i < this.loops; i++) {
let v1 = i * (this.slices + 1);
let v2 = v1 + this.slices + 1;
for (var j = 0; j < this.slices; j++) {
this.indices.push(v1);
this.indices.push(v2);
this.indices.push(v1 + 1);
this.indices.push(v1 + 1);
this.indices.push(v2);
this.indices.push(v2 + 1);
v1++;
v2++;
}
}
我在该网站的帮助下声明了顶点的坐标,但我在索引方面遇到了问题。
最佳答案
该代码乍一看没有多大意义。你有一个内循环和外循环
在内部循环中,此代码计算一个顶点
let x = (this.outerRad + this.inner_rad * cos_slices) * cos_loops;
let y = (this.outerRad + this.inner_rad * cos_slices) * sin_loops;
let z = this.inner_rad * sin_slices;
this.vertices.push(x, y, z);
this.normals.push(x, y, z);
但是这些计算在内循环内部没有任何变化
法线不能是 x、y、z(与位置相同)。
您还需要制作循环 + 1 和切片 + 1 个顶点。每个循环的顶点起始顶点,切片将具有相同的位置,但不会具有相同的纹理坐标。
然后,就你的索引而言,每个切片都是 (loops + 1) 个顶点,所以我认为代码中的循环是向后的。
如果是我,我不会根据角度进行循环,而是根据循环和切片进行循环
for (slice = 0; slice < this.slices; ++slice) {
for (loop = 0; loop < this.loops; ++loop) {
...
这是另一个版本
const o = {
slices: 8,
loops: 20,
inner_rad: 0.5,
outerRad: 2,
makeVerts() {
this.vertices = [];
this.indices = [];
this.normals = [];
this.texCoords = [];
for (let slice = 0; slice <= this.slices; ++slice) {
const v = slice / this.slices;
const slice_angle = v * 2 * Math.PI;
const cos_slices = Math.cos(slice_angle);
const sin_slices = Math.sin(slice_angle);
const slice_rad = this.outerRad + this.inner_rad * cos_slices;
for (let loop = 0; loop <= this.loops; ++loop) {
// x=(R+r·cos(v))cos(w)
// y=(R+r·cos(v))sin(w)
// z=r.sin(v)
const u = loop / this.loops;
const loop_angle = u * 2 * Math.PI;
const cos_loops = Math.cos(loop_angle);
const sin_loops = Math.sin(loop_angle);
const x = slice_rad * cos_loops;
const y = slice_rad * sin_loops;
const z = this.inner_rad * sin_slices;
this.vertices.push(x, y, z);
this.normals.push(
cos_loops * sin_slices,
sin_loops * sin_slices,
cos_slices);
this.texCoords.push(u);
this.texCoords.push(v);
}
}
// 0 1 2 3 4 5
// 6 7 8 9 10 11
// 12 13 14 15 16 17
const vertsPerSlice = this.loops + 1;
for (let i = 0; i < this.slices; ++i) {
let v1 = i * vertsPerSlice;
let v2 = v1 + vertsPerSlice;
for (let j = 0; j < this.loops; ++j) {
this.indices.push(v1);
this.indices.push(v1 + 1);
this.indices.push(v2);
this.indices.push(v2);
this.indices.push(v1 + 1);
this.indices.push(v2 + 1);
v1 += 1;
v2 += 1;
}
}
//this.indices = undefined;
},
};
o.makeVerts();
// -------------- ignore below this line -------------
const gl = document.querySelector('canvas').getContext('webgl');
const m4 = twgl.m4;
const vs = `
attribute vec4 position;
attribute vec3 normal;
attribute vec2 texcoord;
uniform mat4 u_matrix;
varying vec3 v_normal;
void main() {
gl_Position = u_matrix * position;
v_normal = normal; // just for testing
//v_normal = vec3(texcoord, 0); // comment in to see texcoords
gl_PointSize = 3.0;
}
`;
const fs = `
precision highp float;
varying vec3 v_normal;
void main() {
gl_FragColor = vec4(v_normal * 0.5 + 0.5, 1);
}
`;
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: o.vertices,
normal: o.normals,
texcoord: o.texCoords,
indices: o.indices,
});
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
gl.useProgram(programInfo.program);
function render(time) {
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
let mat = m4.perspective(
45 * Math.PI / 180, // fov
2, // aspect
0.1, // near
100, // far
);
mat = m4.translate(mat, [0, 0, -7]);
mat = m4.rotateY(mat, time * 0.001);
mat = m4.rotateX(mat, time * 0.0005);
twgl.setUniforms(programInfo, { u_matrix: mat });
twgl.drawBufferInfo(gl, bufferInfo);
//twgl.drawBufferInfo(gl, bufferInfo, gl.POINTS);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
关于3d - 在 webgl 中绘制圆环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58101753/
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
最近一直在学习D语言。我一直对运行时感到困惑。 从我能收集到的关于它的信息中,(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样,它与您自己的程序一起运行。但是既然 D 是编译
想问一下这两个正则表达式有区别吗? \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试,两者都工作正常并且结果相同。但是,当在 linux
我正在学习 Go,而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。 这是一些代码: type IPAddr
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思,但是\1-\2-\3-\4 是什么意思? 最佳答案 \1-\2-\3-\4 是 b
我一直在努力解决这个问题,这让我很恼火。我了解 D 运行时库。它是什么,它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧,XoMB 定义了自己的运行时,但是
我有两个列表列表,子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
我需要使用 Regex 格式化一个字符串,该字符串包含数字、字母 a-z 和 A-Z,同时还包含破折号和空格。 从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D,但没有成功。我也尝试过不同的方法。 import std.datetime : benc
tl;dr:你好吗perfect forwarding在 D? 该链接有一个很好的解释,但例如,假设我有这个方法: void foo(T)(in int a, out int b, ref int c
有什么方法可以在 D 中使用abstract auto 函数吗? 如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
有没有人为内存中重叠的数组切片实现交集?算法在没有重叠时返回 []。 当 pretty-print (使用重叠缩进)内存中重叠的数组切片时,我想要这个。 最佳答案 如果您确定它们是数组,那么只需取 p
我已经开始学习 D,但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
如何创建一个不可变的类? 我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData,m 表示可变。然后我创建一个别名 alias immut
不久前我买了《The D Programming Language》。好书,很有教育意义。但是,我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。 在这本书中,Andrei 写了任何可以像这样调用
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例 我想知道如何在 D 中实现可能的无限数据结构,就像
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数(或类)? 例如: source/packageA/something.d: @sillyWalk(10) void doSomething()
我是一名优秀的程序员,十分优秀!