2D text with a custom vertex shader

Questions
1

I have made a custom shader to make a fisheye view of a night sky.

image
image598×885 158 KB

Both points and mesh are distorted as intended. But not the text!

I am displaying the text using CSS2D. And this is part of the code.

const label = new CSS2DObject( text );
label.position.copy( position );
root.add( label );

“position” is the same as the location of points and the following is the vertex shader applied to the points.

	<script type="x-shader/x-vertex" id="vertexshader">

		attribute float size;

		varying vec3 vColor;
		
		vec4 Distort(vec4 p)
		{
			float aspect_ratio = 1.5;
			float FOV =170.0;
			float NEAR =1.0;
			float FAR =1000.0;
			vec4 v = p;
			vec3 spherical;
			v.z = -v.z;
			vec4 o = vec4(1.0);
	
			spherical.z = length(v.xyz);
			spherical.y = acos(v.z / spherical.z);
	
			vec2 val = v.xy / (spherical.z * sin(spherical.y));
			float first = acos(clamp(val.x, -1.0, 1.0));
			float second = asin(clamp(val.y, -1.0, 1.0));
			if (second >= 0.0)
				spherical.x = first;
			else
				spherical.x = 2.0*3.1415926 - first;
	
	
	
			o.xy = spherical.y * vec2( cos(spherical.x),sin(spherical.x));
			o.xy /= 3.1415926 / 360.0 * FOV;
	
			o.x =o.x*aspect_ratio;
			o.z = (spherical.z - NEAR) / (FAR - NEAR);
	
			// Test whether this vertex should be drawn
			if (length(o.xy) > 2.0)
				o.w = -1.0;
			else
				o.w = 1.0;
	
			p = o;
			
			return p;
		}		
		void main() {
			vColor = color;
			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
			gl_PointSize = size ;
			gl_Position = Distort(mvPosition);
		}
	</script>

Problem is that the points and mesh are distorted by the vertex shader but it is not applied to the text. Looking at the code in CSS2DRenderer.js, it seems like CSS2DObject only support the perspective projection. It is hardcoded.

Is there a way to solve this problem? Or should I just modify CSS2DRenderer.js and make a custom code?