将WebGL不连续的行作为单个对象 [英] Render WebGL non-contiguous lines as a single object
问题描述
我有多个WebGL线来渲染,他们都有相同的渲染风格。因此,为了性能,我想在一个绘图调用中将它们都渲染为一个单独的对象。
但是问题是,这些行并不都连接到每个其他。
请参见示例:。
three.js r .58
PS three.js包括 requestAnimationFrame()
shim。您不需要自己添加。
I have multiple WebGL lines to render, and they all have the same rendering style. So for performance, I want to render them all as a single object, in a single draw call.
But the problem is that the lines don't all connect to each other.
See example here: http://jsfiddle.net/b6jgS/6/
As you can see the rings connect, but I don't want them to. Yet I still want to draw them in a single draw call.
The relevant code is this, which simply generates some geometry for some rings:
# Pardon the coffeescript!
ringsGeom = new THREE.Geometry()
for u in [-2..2]
for v in [0..100]
ringsGeom.vertices.push new THREE.Vector3(
Math.sin(v/100 * 2 * Math.PI)
Math.cos(v/100 * 2 * Math.PI)
u
)
rings = new THREE.Line(
ringsGeom
new THREE.LineBasicMaterial(
color: 0xffff00
linewidth: 1
)
)
scene.add rings
How do I have a single object draw multiple discreet disconnected lines?
You construct your geometry as an array of pairs of points representing individual line segments, and then create your line like so:
var line = new THREE.Line( geometry, material, THREE.LinePieces );
For an example, see GridHelper.js.
three.js r.58
P.S. three.js includes the requestAnimationFrame()
shim. You do not need to include it yourself.
这篇关于将WebGL不连续的行作为单个对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!