Чтобы создать ощущение настоящего проекта луча, я создал шейдер с использованием RawShaderMaterial, который показывает размытие, исходящее от краев.
Тем не менее, я получаю диагональные линии в каждом углу, и у меня возникают проблемы с их работой.
Может ли кто-нибудь помочь мне изменить мой код, чтобы он работал правильно? Или, если у вас есть другие идеи по естественной реализации шейдера размытия, дайте мне знать.
Принимая во внимание, что vUv находится в диапазоне [0 .. 1] как по x, так и по y, область, где карта не затухает, представляет собой выровненный по оси прямоугольник над [краем .. 1 - 2 * краем] в обоих измерениях. Мы можем отбросить все условные операторы и использовать расстояние от vUv до этого прямоугольника.
void main(){
float edgeMin = edge;
float edgeMax = 1.0 - edge;
gl_FragColor = texture2D( map, vUv );
// dx => lilnear distance parallel to x from vUv to rectangle
// (0.5, 0.5) is the center of the rectangle in uv
// the abs and max work together to make any vUv inside the
// rectangle return 0
float dx = max(abs(vUv.x - 0.5) - (0.5 - edge), 0.);
// similarly for dy, along the parallel to y
float dy = max(abs(vUv.y - 0.5) - (0.5 - edge), 0.);
// d is the result of a Euclidean distance; this rounds the corners
float d = sqrt(dx * dx + dy * dy);
// alpha should be opacity at the edge of the rectangle, and also
// inside of it (all where d == 0), and 0. at the edge of the plane
// (where d == edge). So we do an inverse lerp.
gl_FragColor.a = opacity - opacity * d / edge;
}