渲染着色器而無需在 ThreeJS 中將幾何圖形添加到場景中

Question

我目前正在嘗試僅使用着色器在ThreeJS r128中繪制形狀或至少等效於geometry 。

使用此庫在屏幕上繪制內容的常用方法包括創建一個具有與其相關聯的geometry （這里是項目創建的樣板代碼）的mesh 。 在創建 object 之后，我們可以通過ShaderMaterial class將着色器應用到這個新組件。

但是，我找不到如何在場景中而不是在 object 上渲染着色器。 使用 OpenGL 着色語言 (GLSL)，我們實際上可以在沒有頂點的情況下在屏幕上繪制形狀。 這就是我的目標，但我似乎糾結於這個渲染系統。

甚至可以僅使用 ThreeJS 中的着色器進行渲染嗎？

---

為了測試，這里是一個 function 用着色器創建一個實心圓：

片段着色器：

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);
}

Answer 1

只需在整個 canvas 上繪制一個THREE.PlaneGeometry ：

 var container, camera, scene, renderer, uniforms; init(); animate(); function init() { container = document.getElementById( 'container' ); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneGeometry( 2, 2 ); uniforms = { //u_time: { type: "f", value: 1.0 }, u_resolution: { type: "v2", value: new THREE.Vector2() }, //u_mouse: { type: "v2", value: new THREE.Vector2() } }; var material = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize, false ); document.onmousemove = function(e){ //uniforms.u_mouse.value.x = e.pageX //uniforms.u_mouse.value.y = e.pageY } } function onWindowResize( event ) { renderer.setSize( window.innerWidth, window.innerHeight ); uniforms.u_resolution.value.x = renderer.domElement.width; uniforms.u_resolution.value.y = renderer.domElement.height; } function animate(delta_ms) { requestAnimationFrame(animate); render(delta_ms); } function render(delta_ms) { //uniforms.u_time.value = delta_ms; renderer.render( scene, camera ); }

 <script src="https://cdn.jsdelivr.net/npm/three@0.128/build/three.js"></script> <div id="container"></div> <script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> precision mediump float; 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); } </script>