Javascript 渲染着色器，而无需向场景中添加几何体

我目前正在尝试在

ThreeJS r128

中绘制形状或至少相当于

geometry

的图形，只使用着色器

使用此库在屏幕上绘制内容的常用方法包括创建一个

网格

，该网格带有与其关联的

几何体

（以下是用于创建项目的示例）。创建该对象后，我们可以通过类将着色器应用于该新组件

但是，我找不到如何在场景而不是对象上渲染着色器。使用OpenGL着色语言（GLSL），我们实际上可以在屏幕上绘制形状，而无需顶点。这就是我的目标，但我似乎被这个渲染系统缠住了

甚至可以只使用3JS中的着色器进行渲染吗

---

对于测试，以下是一个使用着色器创建填充圆的函数：

片段着色器：

uniform vec2 u_resolution;

float circleShape(vec2 position, float radius){
    return step(radius, length(position));
}

void main(){
    vec2 position = gl_FragCoord.xy / u_resolution;
    float circle = circleShape(position, 0.3);
    vec3 color = vec3(circle);
    gl_FragColor = vec4(color, 1.0);
} 

以下是我的顶点着色器，以防万一：

void main(){
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

只需在整个画布上绘制一个：

var容器、摄影机、场景、渲染器、制服；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
摄像头=新的三个摄像头（）；
摄像机位置z=1；
场景=新的三个。场景（）；
var几何=新的三个平面几何（2,2）；
制服={
//u_时间：{类型：“f”，值：1.0}，
分辨率：{type:“v2”，值：new THREE.Vector2（）}，
//鼠标：{type:“v2”，值：new THREE.Vector2（）}
};
var material=新的三个着色器材质（{
制服：制服，
vertexShader:document.getElementById（'vertexShader'）.textContent，
fragmentShader:document.getElementById（'fragmentShader'）.textContent
} );
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
container.appendChild（renderer.doElement）；
onWindowResize（）；
addEventListener（'resize'，onWindowResize，false）；
document.onmousemove=函数（e）{
//uniforms.u_mouse.value.x=e.pageX
//uniforms.u_mouse.value.y=e.pageY
}
}
函数onWindowResize（事件）{
renderer.setSize（window.innerWidth、window.innerHeight）；
uniforms.u_resolution.value.x=renderer.domeElement.width；
uniforms.u_resolution.value.y=renderer.domeElement.height；
}
函数动画（delta_ms）{
请求动画帧（动画）；
渲染（delta_ms）；
}
函数渲染（delta_ms）{
//uniforms.u_time.value=delta_ms；
渲染器。渲染（场景、摄影机）；
}

void main（）{
gl_位置=vec4（位置，1.0）；
}
精密中泵浮子；
均匀vec2u_分辨率；
浮动圆形状（vec2位置，浮动半径）{
返回台阶（半径、长度（位置））；
}
void main（）{
vec2位置=gl_FragCoord.xy/u_分辨率；
浮动圆=圆形（位置，0.3）；
vec3颜色=vec3（圆形）；
gl_FragColor=vec4（颜色，1.0）；
}