TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Instanced Line Rendering Using WebGL

107 点作者 otherjason大约 4 年前

9 条评论

mtsr将近 4 年前
I wrote an implementation based on this a few weeks back. It works really nicely and I can render some 2M line segments at 60fps.<p>One thing you should do is try to limit very short and small segments, as GPUs don’t like rendering 1px triangles.<p>Still, I’ve been lead to understand that the instanced rendering done in this article is suboptimal on most GPUs. A better way to do it is apparently to put the points into a (non-vertex) buffer and do (batched) drawcalls for large numbers of vertices with a kind of manual instancing. Basically looking up what amounts to instance data using gl_VertexInput&#x2F;6 and vertex data using gl_VertexIndex%6 (or 4 instead of 6 for indexes rendering).<p>Unfortunately I haven’t had the time to implement and test this yet.<p>If like me you’re also rendering lines with perspective, you want to also look at Freya Holmer&#x27;s work. Particularly line thinness fading is important to reduce shimmer&#x2F;aliasing. This means basically keep the width at a minimum of 1px and adjusting opacity below that instead.<p>Edit: For those interested, mine is implemented as a plugin to the Bevy game engine, written in Rust. Bevy can be found here <a href="https:&#x2F;&#x2F;github.com&#x2F;bevyengine&#x2F;bevy" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;bevyengine&#x2F;bevy</a>. The plugin is <a href="https:&#x2F;&#x2F;github.com&#x2F;ForesightMiningSoftwareCorporation&#x2F;bevy_polyline" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ForesightMiningSoftwareCorporation&#x2F;bevy_p...</a>.
评论 #27262089 未加载
hughes将近 4 年前
Love interactive articles like this. Unfortunately “mouse over to animate” really doesn’t work on mobile.
评论 #27260938 未加载
Jyaif将近 4 年前
One advantage of rendering your own lines is that it allows you to create cool effects. For instance, if you change the opacity and width of lines depending on how far away they are from a given plane, you can simulate a depth of field effect that runs even on low-end devices:<p><a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=tWh6pX4r5nE" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=tWh6pX4r5nE</a>
jonplackett将近 4 年前
It’s kinda of baffling that it takes so much extra effort to just render some lines in WebGL
评论 #27261986 未加载
jasmcole将近 4 年前
Nice article!<p>When we wrote the instanced WebGL line renderer for <a href="https:&#x2F;&#x2F;count.co" rel="nofollow">https:&#x2F;&#x2F;count.co</a> one of the tricky parts was switching between mitre and bevel joins based on the join angle - for very acute angles the mitre join shoots off to infinity.<p>Another nice extension (that we are yet to implement) is anti-aliasing, but I think that requires extra geometry to vary the opacity over.
评论 #27262273 未加载
评论 #27262326 未加载
评论 #27262066 未加载
Everlag将近 4 年前
Heads up for anyone reading this on chrome, the examples may not render with a `Cannot read property &#x27;_gl&#x27; of null` exception; firefox worked fine when I tried it.
评论 #27261174 未加载
评论 #27261543 未加载
评论 #27260800 未加载
artifact_44将近 4 年前
What a gorgeous writeup. Love it. Gonna go make some lines now.
ognarb将近 4 年前
Missing 2019 in the title
asiachick将近 4 年前
Nit, The article mentions things like GL_LINES, GL_LINE_STRIP. Those are OpenGL not WebGL. It might seem unimportant to someone that knows both APIs but to someone that only knows or is learning WebGL it can be extremely confusing
评论 #27261072 未加载
评论 #27262112 未加载
评论 #27260982 未加载