三角带伪影

Question

我在THREE.TriangleStripDrawMode 绘图模式下使用绘图组，我看到了一些奇怪的伪影。我认为这可能是一个错误，但我希望其他人在提交报告之前确认我没有做错什么。

在下面的 sn-p 中，我创建了 4 个正方形，每个正方形由 4 个三角形组成。它们都被索引为右手渲染。 （我意识到三角形条在技术上不需要索引，但我可能有复杂的形状和重复使用的顶点。）它们的其他属性和结果如下：

红场

• 两组：0-9 和 9-12
• 标准前端渲染
• 三角形索引 1 背面出现黑色伪影

绿色方块

• 一组：0-12
• 标准前端渲染
• 三角形索引 1 和 3 背面的黑色伪影
• 当我完全不使用分组时也会发生同样的事情

蓝色方块

• 两组：0-9 和 9-12
• 双面渲染
• 按预期呈现

黄色方块

• 一组：0-12
• 双面渲染
• 三角形索引 3 在两侧呈现黑色

那么我错过了什么，还是应该将其作为三个.js 中的错误提交？

var renderer, scene, camera, controls, stats;

var WIDTH = window.innerWidth,
	HEIGHT = window.innerHeight,
	FOV = 35,
	NEAR = 1,
	FAR = 1000;

function createShapes(){
	var bg = new THREE.BufferGeometry();
	bg.addAttribute("position", new THREE.BufferAttribute(new Float32Array([
		-1, 1, 0,
		-1, -1, 0,
		0, 1, 0,
		0, -1, 0,
		1, 1, 0,
		1, -1, 0
	]), 3));
	bg.addAttribute("normal", new THREE.BufferAttribute(new Float32Array([
		0, 0, 1,
		0, 0, 1,
		0, 0, 1,
		0, 0, 1,
		0, 0, 1,
		0, 0, 1
	]), 3));
	bg.setIndex(new THREE.BufferAttribute(new Uint32Array([
		0, 1, 2,
		3, 2, 1,
		2, 3, 4,
		5, 4, 3
	]), 1));

	var group1 = bg.clone(),
		group2 = bg.clone(),
		group3 = bg.clone(),
		group4 = bg.clone();

	/**/
	group1.clearGroups();
	group1.addGroup(0, 9, 0);
	group1.addGroup(9, 3, 0);

	group2.clearGroups();
	group2.addGroup(0, 12, 0);

	group3.clearGroups();
	group3.addGroup(0, 9, 0);
	group3.addGroup(9, 3, 0);

	group4.clearGroups();
	group4.addGroup(0, 12, 0);
	/**/

	var mat1 = new THREE.MeshPhongMaterial({color: "red"}),
		mat2 = new THREE.MeshPhongMaterial({color: "green"}),
		mat3 = new THREE.MeshPhongMaterial({color: "blue", side: THREE.DoubleSide}),
		mat4 = new THREE.MeshPhongMaterial({color: "yellow", side: THREE.DoubleSide});

	var m1 = new THREE.Mesh(group1, [mat1]),
		m2 = new THREE.Mesh(group2, [mat2]),
		m3 = new THREE.Mesh(group3, [mat3]),
		m4 = new THREE.Mesh(group4, [mat4]);

	m1.drawMode = THREE.TriangleStripDrawMode;
	m2.drawMode = THREE.TriangleStripDrawMode;
	m3.drawMode = THREE.TriangleStripDrawMode;
	m4.drawMode = THREE.TriangleStripDrawMode;

	m1.position.set(-2, 2, 0);
	m2.position.set(2, 2, 0);
	m3.position.set(-2, -2, 0);
	m4.position.set(2, -2, 0);

	scene.add(m1, m2, m3, m4);
}

function init() {
	document.body.style.backgroundColor = "slateGray";

	renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

	document.body.appendChild(renderer.domElement);
	document.body.style.overflow = "hidden";
	document.body.style.margin = "0";
	document.body.style.padding = "0";

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
	camera.position.z = 20;
	scene.add(camera);

	controls = new THREE.TrackballControls(camera, renderer.domElement);
	controls.dynamicDampingFactor = 0.5;
	controls.rotateSpeed = 3;

	var light = new THREE.PointLight(0xffffff, 1, Infinity);
	camera.add(light);

	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0';
	document.body.appendChild(stats.domElement);

	resize();
	window.onresize = resize;

	// POPULATE EXAMPLE
	createShapes();

	animate();
}

function resize() {
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;
	if (renderer && camera && controls) {
		renderer.setSize(WIDTH, HEIGHT);
		camera.aspect = WIDTH / HEIGHT;
		camera.updateProjectionMatrix();
		controls.handleResize();
	}
}

function render() {
	renderer.render(scene, camera);
}

function animate() {
	requestAnimationFrame(animate);
	render();
	controls.update();
	stats.update();
}

function threeReady() {
	init();
}

(function () {
	function addScript(url, callback) {
		callback = callback || function () { };
		var script = document.createElement("script");
		script.addEventListener("load", callback);
		script.setAttribute("src", url);
		document.head.appendChild(script);
	}

	addScript("https://threejs.org/build/three.js", function () {
		addScript("https://threejs.org/examples/js/controls/TrackballControls.js", function () {
			addScript("https://threejs.org/examples/js/libs/stats.min.js", function () {
				threeReady();
			})
		})
	})
})();

r86（这个问题其实已经存在一段时间了）

Answer 1

我有一个“啊哈！”在看一些其他例子的时候。我的索引已关闭，这也导致我的分组失败。

索引应该是：

bg.setIndex(new THREE.BufferAttribute(new Uint32Array([
    0, 1, 2, 3, 4, 5
]), 1));

这是有道理的，因为这就是三角形带定义其顶点的步骤的方式。

然后要画一个完整的正方形，我需要一个组：

group1.addGroup(0, 6, 0);

这意味着从 0 的组索引开始，对于 6 个组索引（涵盖所有这些索引）。

尝试渲染（奇数索引）单个三角形时仍然存在问题。因为奇数三角形的缠绕顺序是向后的，所以创建以奇数三角形开头的组将不会被正确点亮（渲染为黑色）。但这是另一个问题......