THREE.JS - 如何繪製光環（外部輪廓）到圓形扇區

我想繪製光環（外部黑色輪廓）在three.js中的某些形狀。雖然我用矩形和圓圈很容易做到，但我在圓形扇區（非全圓）方面遇到了很多麻煩。THREE.JS - 如何繪製光環（外部輪廓）到圓形扇區

到目前爲止，這是最好的我有：

enter image description here

正如你所看到的，它並不完美（暈是「上」圓上的中心網）

這是代碼：

var radius = 50 
var segments = 32; 
var thetaStart = 0;     
var thetaLength = 0.5 * Math.PI; 

var geometry = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength); 
var material = new THREE.MeshBasicMaterial({color: 0xffffff}); 
var circle = new THREE.Mesh(geometry, material); 

/* create halo */ 
var unit = 1/radius; 
var biggerGeometry = new THREE.CircleGeometry(radius + 2, segments, thetaStart - 2*unit, thetaLength + 4*unit); 
var haloGeometry = new THREE.EdgesGeometry(biggerGeometry);  
var haloMaterial = new THREE.LineBasicMaterial({ color: 0x000000 }); //black halo  
var halo = new THREE.LineSegments(haloGeometry, haloMaterial); 
circle.add(halo);

是否有人對此有一個更好或更簡單的解決方案？

在此先感謝。

來源

2016-12-27 RoeePeleg

你可以用這樣一個邊緣檢測着色器做的（雖然這將需要一個額外的傳球）： http://ar3f.in/goochShading.html

來源

2016-12-27 22:51:30 griffin2000

你能否詳細說明嗎？ – RoeePeleg

基本上，您將場景渲染爲渲染目標紋理。然後使用它作爲第二遍的輸入，使用片段着色器檢測存在邊緣的區域並在其中繪製像素。有許多不同的算法可以使用，從簡單的（只使用輸入圖像上的微分函數，並在超過特定閾值的位置繪製像素）變得更加複雜。上面的例子使用Canny邊緣檢測（https://en.m.wikipedia.org/wiki/Canny_edge_detector） – griffin2000

通過縮小圖像，可以在邊緣周圍實現更大的線條（因爲縮小後的圖像中的每個像素都覆蓋了幾個像素原始圖像） – griffin2000

THREE.JS - 如何繪製光環（外部輪廓）到圓形扇區

回答

相關問題