4

Есть облако произвольных GLSL частиц. Задача соединить ближайших соседей линиями. Очень желательно чтобы линии были тоже просчитаны в шейдере (скорее всего втором) и имели толщину в отличии от THREE.Line.

Да, можно было построить 3Д модели, соединив вершины и рендерить как wireframes или GL_LINES. Но хотелось бы решение на шейдере.

    
/**
 * @author qiao / https://github.com/qiao
 * @author mrdoob / http://mrdoob.com
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangley
 */

THREE.OrbitControls=function(e,t){var n,o,a,i,r;this.object=e,this.domElement=void 0!==t?t:document,this.enabled=!0,this.target=new THREE.Vector3,this.minDistance=0,this.maxDistance=1/0,this.minZoom=0,this.maxZoom=1/0,this.minPolarAngle=0,this.maxPolarAngle=Math.PI,this.minAzimuthAngle=-1/0,this.maxAzimuthAngle=1/0,this.enableDamping=!1,this.dampingFactor=.25,this.enableZoom=!0,this.zoomSpeed=1,this.enableRotate=!0,this.rotateSpeed=1,this.enablePan=!0,this.keyPanSpeed=7,this.autoRotate=!1,this.autoRotateSpeed=2,this.enableKeys=!0,this.keys={LEFT:37,UP:38,RIGHT:39,BOTTOM:40},this.mouseButtons={ORBIT:THREE.MOUSE.LEFT,ZOOM:THREE.MOUSE.MIDDLE,PAN:THREE.MOUSE.RIGHT},this.target0=this.target.clone(),this.position0=this.object.position.clone(),this.zoom0=this.object.zoom,this.getPolarAngle=function(){return E.phi},this.getAzimuthalAngle=function(){return E.theta},this.saveState=function(){s.target0.copy(s.target),s.position0.copy(s.object.position),s.zoom0=s.object.zoom},this.reset=function(){s.target.copy(s.target0),s.object.position.copy(s.position0),s.object.zoom=s.zoom0,s.object.updateProjectionMatrix(),s.dispatchEvent(c),s.update(),u=l.NONE},this.update=(n=new THREE.Vector3,o=(new THREE.Quaternion).setFromUnitVectors(e.up,new THREE.Vector3(0,1,0)),a=o.clone().inverse(),i=new THREE.Vector3,r=new THREE.Quaternion,function(){var e=s.object.position;return n.copy(e).sub(s.target),n.applyQuaternion(o),E.setFromVector3(n),s.autoRotate&&u===l.NONE&&M(2*Math.PI/60/60*s.autoRotateSpeed),E.theta+=p.theta,E.phi+=p.phi,E.theta=Math.max(s.minAzimuthAngle,Math.min(s.maxAzimuthAngle,E.theta)),E.phi=Math.max(s.minPolarAngle,Math.min(s.maxPolarAngle,E.phi)),E.makeSafe(),E.radius*=b,E.radius=Math.max(s.minDistance,Math.min(s.maxDistance,E.radius)),s.target.add(g),n.setFromSpherical(E),n.applyQuaternion(a),e.copy(s.target).add(n),s.object.lookAt(s.target),!0===s.enableDamping?(p.theta*=1-s.dampingFactor,p.phi*=1-s.dampingFactor):p.set(0,0,0),b=1,g.set(0,0,0),!(!(T||i.distanceToSquared(s.object.position)>h||8*(1-r.dot(s.object.quaternion))>h)||(s.dispatchEvent(c),i.copy(s.object.position),r.copy(s.object.quaternion),T=!1))}),this.dispose=function(){s.domElement.removeEventListener("contextmenu",B,!1),s.domElement.removeEventListener("mousedown",Z,!1),s.domElement.removeEventListener("wheel",F,!1),s.domElement.removeEventListener("touchstart",X,!1),s.domElement.removeEventListener("touchend",_,!1),s.domElement.removeEventListener("touchmove",K,!1),document.removeEventListener("mousemove",Y,!1),document.removeEventListener("mouseup",z,!1),window.removeEventListener("keydown",I,!1)};var s=this,c={type:"change"},m={type:"start"},d={type:"end"},l={NONE:-1,ROTATE:0,DOLLY:1,PAN:2,TOUCH_ROTATE:3,TOUCH_DOLLY:4,TOUCH_PAN:5},u=l.NONE,h=1e-6,E=new THREE.Spherical,p=new THREE.Spherical,b=1,g=new THREE.Vector3,T=!1,v=new THREE.Vector2,R=new THREE.Vector2,O=new THREE.Vector2,f=new THREE.Vector2,y=new THREE.Vector2,H=new THREE.Vector2,w=new THREE.Vector2,P=new THREE.Vector2,j=new THREE.Vector2;function C(){return Math.pow(.95,s.zoomSpeed)}function M(e){p.theta-=e}function L(e){p.phi-=e}var N,A,k,x=(N=new THREE.Vector3,function(e,t){N.setFromMatrixColumn(t,0),N.multiplyScalar(-e),g.add(N)}),D=(A=new THREE.Vector3,function(e,t){A.setFromMatrixColumn(t,1),A.multiplyScalar(e),g.add(A)}),U=(k=new THREE.Vector3,function(e,t){var n=s.domElement===document?s.domElement.body:s.domElement;if(s.object.isPerspectiveCamera){var o=s.object.position;k.copy(o).sub(s.target);var a=k.length();a*=Math.tan(s.object.fov/2*Math.PI/180),x(2*e*a/n.clientHeight,s.object.matrix),D(2*t*a/n.clientHeight,s.object.matrix)}else s.object.isOrthographicCamera?(x(e*(s.object.right-s.object.left)/s.object.zoom/n.clientWidth,s.object.matrix),D(t*(s.object.top-s.object.bottom)/s.object.zoom/n.clientHeight,s.object.matrix)):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."),s.enablePan=!1)});function S(e){s.object.isPerspectiveCamera?b/=e:s.object.isOrthographicCamera?(s.object.zoom=Math.max(s.minZoom,Math.min(s.maxZoom,s.object.zoom*e)),s.object.updateProjectionMatrix(),T=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),s.enableZoom=!1)}function V(e){s.object.isPerspectiveCamera?b*=e:s.object.isOrthographicCamera?(s.object.zoom=Math.max(s.minZoom,Math.min(s.maxZoom,s.object.zoom/e)),s.object.updateProjectionMatrix(),T=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),s.enableZoom=!1)}function Z(e){if(!1!==s.enabled){switch(e.preventDefault(),e.button){case s.mouseButtons.ORBIT:if(!1===s.enableRotate)return;o=e,v.set(o.clientX,o.clientY),u=l.ROTATE;break;case s.mouseButtons.ZOOM:if(!1===s.enableZoom)return;n=e,w.set(n.clientX,n.clientY),u=l.DOLLY;break;case s.mouseButtons.PAN:if(!1===s.enablePan)return;t=e,f.set(t.clientX,t.clientY),u=l.PAN}var t,n,o;u!==l.NONE&&(document.addEventListener("mousemove",Y,!1),document.addEventListener("mouseup",z,!1),s.dispatchEvent(m))}}function Y(e){var t,n;if(!1!==s.enabled)switch(e.preventDefault(),u){case l.ROTATE:if(!1===s.enableRotate)return;!function(e){R.set(e.clientX,e.clientY),O.subVectors(R,v);var t=s.domElement===document?s.domElement.body:s.domElement;M(2*Math.PI*O.x/t.clientWidth*s.rotateSpeed),L(2*Math.PI*O.y/t.clientHeight*s.rotateSpeed),v.copy(R),s.update()}(e);break;case l.DOLLY:if(!1===s.enableZoom)return;n=e,P.set(n.clientX,n.clientY),j.subVectors(P,w),0<j.y?S(C()):j.y<0&&V(C()),w.copy(P),s.update();break;case l.PAN:if(!1===s.enablePan)return;t=e,y.set(t.clientX,t.clientY),H.subVectors(y,f),U(H.x,H.y),f.copy(y),s.update()}}function z(e){!1!==s.enabled&&(document.removeEventListener("mousemove",Y,!1),document.removeEventListener("mouseup",z,!1),s.dispatchEvent(d),u=l.NONE)}function F(e){var t;!1===s.enabled||!1===s.enableZoom||u!==l.NONE&&u!==l.ROTATE||(e.preventDefault(),e.stopPropagation(),(t=e).deltaY<0?V(C()):0<t.deltaY&&S(C()),s.update(),s.dispatchEvent(m),s.dispatchEvent(d))}function I(e){!1!==s.enabled&&!1!==s.enableKeys&&!1!==s.enablePan&&function(e){switch(e.keyCode){case s.keys.UP:U(0,s.keyPanSpeed),s.update();break;case s.keys.BOTTOM:U(0,-s.keyPanSpeed),s.update();break;case s.keys.LEFT:U(s.keyPanSpeed,0),s.update();break;case s.keys.RIGHT:U(-s.keyPanSpeed,0),s.update()}}(e)}function X(e){if(!1!==s.enabled){switch(e.touches.length){case 1:if(!1===s.enableRotate)return;r=e,v.set(r.touches[0].pageX,r.touches[0].pageY),u=l.TOUCH_ROTATE;break;case 2:if(!1===s.enableZoom)return;o=(n=e).touches[0].pageX-n.touches[1].pageX,a=n.touches[0].pageY-n.touches[1].pageY,i=Math.sqrt(o*o+a*a),w.set(0,i),u=l.TOUCH_DOLLY;break;case 3:if(!1===s.enablePan)return;t=e,f.set(t.touches[0].pageX,t.touches[0].pageY),u=l.TOUCH_PAN;break;default:u=l.NONE}var t,n,o,a,i,r;u!==l.NONE&&s.dispatchEvent(m)}}function K(e){var t,n,o,a,i;if(!1!==s.enabled)switch(e.preventDefault(),e.stopPropagation(),e.touches.length){case 1:if(!1===s.enableRotate)return;if(u!==l.TOUCH_ROTATE)return;!function(e){R.set(e.touches[0].pageX,e.touches[0].pageY),O.subVectors(R,v);var t=s.domElement===document?s.domElement.body:s.domElement;M(2*Math.PI*O.x/t.clientWidth*s.rotateSpeed),L(2*Math.PI*O.y/t.clientHeight*s.rotateSpeed),v.copy(R),s.update()}(e);break;case 2:if(!1===s.enableZoom)return;if(u!==l.TOUCH_DOLLY)return;o=(n=e).touches[0].pageX-n.touches[1].pageX,a=n.touches[0].pageY-n.touches[1].pageY,i=Math.sqrt(o*o+a*a),P.set(0,i),j.subVectors(P,w),0<j.y?V(C()):j.y<0&&S(C()),w.copy(P),s.update();break;case 3:if(!1===s.enablePan)return;if(u!==l.TOUCH_PAN)return;t=e,y.set(t.touches[0].pageX,t.touches[0].pageY),H.subVectors(y,f),U(H.x,H.y),f.copy(y),s.update();break;default:u=l.NONE}}function _(e){!1!==s.enabled&&(s.dispatchEvent(d),u=l.NONE)}function B(e){!1!==s.enabled&&e.preventDefault()}s.domElement.addEventListener("contextmenu",B,!1),s.domElement.addEventListener("mousedown",Z,!1),s.domElement.addEventListener("wheel",F,!1),s.domElement.addEventListener("touchstart",X,!1),s.domElement.addEventListener("touchend",_,!1),s.domElement.addEventListener("touchmove",K,!1),window.addEventListener("keydown",I,!1),this.update()},THREE.OrbitControls.prototype=Object.create(THREE.EventDispatcher.prototype),THREE.OrbitControls.prototype.constructor=THREE.OrbitControls,Object.defineProperties(THREE.OrbitControls.prototype,{center:{get:function(){return console.warn("THREE.OrbitControls: .center has been renamed to .target"),this.target}},noZoom:{get:function(){return console.warn("THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead."),!this.enableZoom},set:function(e){console.warn("THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead."),this.enableZoom=!e}},noRotate:{get:function(){return console.warn("THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead."),!this.enableRotate},set:function(e){console.warn("THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead."),this.enableRotate=!e}},noPan:{get:function(){return console.warn("THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead."),!this.enablePan},set:function(e){console.warn("THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead."),this.enablePan=!e}},noKeys:{get:function(){return console.warn("THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead."),!this.enableKeys},set:function(e){console.warn("THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead."),this.enableKeys=!e}},staticMoving:{get:function(){return console.warn("THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead."),!this.enableDamping},set:function(e){console.warn("THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead."),this.enableDamping=!e}},dynamicDampingFactor:{get:function(){return console.warn("THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead."),this.dampingFactor},set:function(e){console.warn("THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead."),this.dampingFactor=e}}});

var circularPoint = "data:image/png;base64,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eG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wMS0yMVQxNTozMzo0MSswMzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0yMVQxNTozMzo0MSswMzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDEtMjFUMTU6MzM6NDErMDM6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzI5YjZjYzMtNWNmNy00MzllLWEwNWEtZTkzYTdhY2M4NjlhIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6OGM0MWExZjUtMGE3NS1iNjRhLThlY2UtYTI0YjRlNjdlZmE3IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NGU0ODQwM2UtNTYzNS00MmM4LTkxYzQtZjZlODIzMzk0MDg5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRpc3BsYXkiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjRlNDg0MDNlLTU2MzUtNDJjOC05MWM0LWY2ZTgyMzM5NDA4OSIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0yMVQxNTozMzo0MSswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlp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";

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 0, 10);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(0xEEEEEE, 1.0);
        document.body.appendChild(renderer.domElement);

        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        var N = 64, current_id = 0, last_id = 0;
        
        var pallete = ["#FF6138", "#FFFF9D", "#BEEB9F", "#79BD8F", "#00A388"];
        
        var verts = [], colors = [], rad = [], size = [], id = [], highlight = [];
        
        for (let i = 0; i < N; i++) {
            
            verts.push(getXYZ().multiplyScalar(5)); 
            size.push(1.5 + Math.random() * 3.0);
            rad.push(size[size.length - 1] * 1.0E-1 );
            colors.push.apply(colors, randomRGB());
            highlight.push(0.0);
            
            var indx = new THREE.Color().setHex((i + 1));
            id.push(indx.r, indx.g, indx.b);

        }

        var geometry = new THREE.BufferGeometry().setFromPoints(verts);
        geometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));
        geometry.addAttribute("id", new THREE.BufferAttribute(new Float32Array(id), 3));
        geometry.addAttribute("size", new THREE.BufferAttribute(new Float32Array(size), 1));
        geometry.addAttribute("rad", new THREE.BufferAttribute(new Float32Array(rad), 1));
        geometry.addAttribute("highlight", new THREE.BufferAttribute(new Float32Array(highlight), 1));

        var material = new THREE.ShaderMaterial({

            uniforms: {

                texture: {
                    value: new THREE.TextureLoader().load(circularPoint)
                },
                ori: {
                    value: new THREE.Vector3()
                },
                dir: {
                    value: new THREE.Vector3()
                },
                scale: {
                    value: window.innerHeight / 2
                }
            },
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent,
            depthTest : true,
            alphaTest: 0.9


        })
        
        material.extensions.fragDepth = true;
        material.extensions.drawBuffers = true;

        var points = new THREE.Points(geometry, material);
        scene.add(points);

        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        var inverseMatrix = new THREE.Matrix4();
        var ray = new THREE.Ray();

        renderer.domElement.addEventListener("mousemove", onMouseMove, false);

        function onMouseMove(event) {
            
            camera.clearViewOffset();
            
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);
            
        }

        renderer.setAnimationLoop(() => { renderer.render(scene, camera) });
        
        function getXYZ(){
            
            var n = 1E1;
            var rho = Math.random();
            var theta = Math.random() * Math.PI * 2;
            var phi = Math.random() * Math.PI * 2;
            var x = rho * Math.cos(phi) * Math.sin(theta);
            var y = rho * Math.sin(phi) * Math.sin(theta);
            var z = rho * Math.cos(theta);

            return new THREE.Vector3(x, y, z);
            
        }
        
        function randomRGB() {

            var i = Math.floor(Math.random() * 5);
            var hex = pallete[i];
            
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? [

            parseInt(result[1], 16) / 255,
            parseInt(result[2], 16) / 255,
            parseInt(result[3], 16) / 255

            ] : null;

        }
body { overflow: hidden; margin: 0; }
<head>

    <meta charset="utf-8">
    <title>THREE.JS | D3.JS : 3D SCATTERPLOT [rc]</title>
    <meta name="description" content="Ehno based on D3.JS | THREE.JS stack.">
    <meta name="keywords" content="HTML,CSS,CSV,JavaScript,D3.JS,THREE.JS">
    <meta name="author" content="Vladimir V. KUCHINOV">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>


</head>

<script type='x-shader/x-vertex' id='vertexShader'>

    uniform vec3 ori;
    uniform vec3 dir;
    attribute float rad;
    attribute float size;
    attribute vec3 color;
    uniform float scale;
    
    varying vec3 vColor;

    
    void main() {
    
        vColor = color;

        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( scale / -mvPosition.z );
        gl_Position = projectionMatrix * mvPosition;
        
    }


</script>

<script type='x-shader/x-fragment' id='fragmentShader'>

    varying vec3 vColor;
    uniform sampler2D texture;
    
    void main() { 
    
        gl_FragColor = vec4(vColor, 1.);
        gl_FragColor = gl_FragColor * texture2D(texture, gl_PointCoord);
        if (gl_FragColor.a < 0.1) discard;

    }


</script>

<body>

</body>

введите сюда описание изображения

Изначальный код прилагаю.

9
  • Если частиц не очень много, то, может быть, подойдет этот пример: threejs.org/examples/?q=draw#webgl_buffergeometry_drawrange. Правда, там все рассчитывается на стороне javascript и толщина линий никак не регулируется. 26 ноя 2019 в 23:09
  • Много частиц и толщина линии критична.
    – VVK
    26 ноя 2019 в 23:11
  • Поробую с этим разобраться blog.mapbox.com/…
    – VVK
    26 ноя 2019 в 23:48
  • Есть пара вариантов по поводу линий разной толщины: MeshLine и fat lines. Второе хоть и находится в официальных примерах - документации для него нет. 27 ноя 2019 в 12:00
  • 1
    bl.ocks.org/vkuchinov/53bb0fbd556c03f702c44fd48ab724eb Что-то типа этого (мой пример), только не точками линии рисовать, а линией.
    – VVK
    27 ноя 2019 в 12:03

3 ответа 3

2

Вот Вам решение.

Объяснений нет - задавайте вопросы, то что успел понять по ходу - подчистил:

THREE.TOUCH = {};
var circularPoint = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" height="20px"><circle cx="10" cy="10" r="9" fill="white" /></svg>`;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(35, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 20);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(devicePixelRatio);
renderer.setClearColor(0xEEEEEE, 1.0);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var N = 4,
  verts = [],
  colors = [],
  radius = [];

verts = [
  new THREE.Vector3(0.0, 0.0, -4.0),
  new THREE.Vector3(-4.0, 0.0, 0.0),
  new THREE.Vector3(4.0, 0.0, 0.0),
  new THREE.Vector3(0.0, 0.0, 4.0)
];

colors.push(1.0, 0., 1.0);
colors.push(1.0, 0., 1.0);
colors.push(0.847, 0.332, 0.347);
colors.push(0.457, 0.695, 0.675);

for (var i = 0; i < N; i++) {
  radius.push(0.5);
}

var pointsGeometry = new THREE.BufferGeometry().setFromPoints(verts);
pointsGeometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));
pointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius), 1));

var pointsMaterial = new THREE.ShaderMaterial({
  uniforms: {
    viewport: {
      value: window.innerHeight * window.devicePixelRatio
    },
    texture: {
      value: new THREE.TextureLoader().load(circularPoint)
    }
  },
  vertexShader: document.getElementById("vertexParticle").textContent,
  fragmentShader: document.getElementById("fragmentParticle").textContent,
  transparent: true
})

var verts2 = [],
  colors2 = [],
  radius2 = [];

var dist = new THREE.Vector3(-4.0, 0.0, 0.0).distanceTo(new THREE.Vector3(0.0, 0.0, -4.0));

for (var i = 0; i < 1; i++) {
  for (var j = i + 1; j < 2; j++) {
    var dist = verts[i].distanceTo(verts[j]);
    var nv = new THREE.Vector3(verts[i].x, verts[i].y, verts[i].z);
    verts2.push(nv.lerp(verts[j], 0.5));
    radius2.push(dist / 2.0 + 0.5);
  }
}


var jointsGeometry = new THREE.BufferGeometry().setFromPoints(verts2);
jointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius2), 1));

var jointsMaterial = new THREE.ShaderMaterial({
  uniforms: {
    viewport: {
      value: innerHeight * devicePixelRatio
    },
    texture: {
      value: new THREE.TextureLoader().load(circularPoint)
    },
    start: {
      value: verts[0]
    },
    end: {
      value: verts[1]
    },
    resolution: {
      value: [innerWidth, innerHeight]
    }
  },
  vertexShader: document.getElementById("vertexJoint").textContent,
  fragmentShader: document.getElementById("fragmentJoint").textContent,
  transparent: true
})


var points = new THREE.Points(pointsGeometry, pointsMaterial);
scene.add(points);

var joints = new THREE.Points(jointsGeometry, jointsMaterial);
scene.add(joints);

renderer.setAnimationLoop(function() {
  renderer.render(scene, camera)
});
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>  

<script type="x-shader/x-vertex" id="vertexParticle">
#define PI 3.141592
attribute float radius;
attribute vec3 color;
uniform float viewport;
varying vec3 vColor;

void main() {
  vColor = color;
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  gl_PointSize = viewport * radius * PI / -mvPosition.z;
  gl_Position = projectionMatrix * mvPosition;
}
</script>

<script type="x-shader/x-fragment" id="fragmentParticle">
  varying vec3 vColor;
  uniform sampler2D texture;
  void main() {
      gl_FragColor = vec4(vColor, 1.) * texture2D(texture, gl_PointCoord); 
      if (gl_FragColor.a < 0.3) discard;
  }
</script>
    
<script type="x-shader/x-vertex" id="vertexJoint">
#define PI 3.141592
attribute float radius;

uniform float viewport;
uniform vec2 resolution;
uniform vec3 start;
uniform vec3 end;

varying vec2 outStart;
varying vec2 outEnd;

vec2 projectWorldCoordinates(vec3 in_){
    vec4 p = projectionMatrix * modelViewMatrix * vec4(in_.xy, in_.z, 1.0);
    return p.xy / p.w;
}

void main() {
  outStart = projectWorldCoordinates(start);
  outEnd = projectWorldCoordinates(end);
  
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  gl_PointSize = viewport * radius * PI / -mvPosition.z;
  gl_Position = projectionMatrix * mvPosition;
}
</script>

<script type="x-shader/x-fragment" id="fragmentJoint">
uniform vec2 resolution;
varying vec2 outStart;
varying vec2 outEnd;

void main() {
    vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / resolution;
    float d = length(outStart - uv) / length(outStart - outEnd);
    d = length(uv - mix(outStart, outEnd, clamp(d, 0., 1.)));
    d = 0.85 - smoothstep(d, .0, 0.002);
    gl_FragColor = vec4(vec3(.1, .4, .7)*d, d);
}
</script>

10
  • У метода есть существенный недостаток - если частица(ее центр), шейдер которой рисует джоинт, попадет вне объема пирамиды видимости - ничего не нарисуется... 6 дек 2019 в 11:02
  • Что-то у меня этот код работает криво vault.vkuchinov.co.uk/glitch.png
    – VVK
    9 дек 2019 в 8:14
  • Про недостаток я в курсе
    – VVK
    9 дек 2019 в 8:15
  • У меня тоже Version 78.0.3904.108 (Official Build) (64-bit)
    – VVK
    9 дек 2019 в 8:17
  • vault.vkuchinov.co.uk/glitch.mov
    – VVK
    9 дек 2019 в 8:19
0

В порядке гипотезы. Если нам надо провести линию от одной вершины к другой, которые скажем рендеряться как круги, то можно посчитать точку на середине дистанции, размеры и вторым шейдером нарисовать линию.

введите сюда описание изображения

2
  • Чтобы дополнить свой вопрос, просим вас воспользоваться опцией редактирования. Кнопку «Опубликовать ответ» следует использовать только для исчерпывающих ответов на вопросы. — из очереди проверок 1 дек 2019 в 12:42
  • @VanyambaElectronics мне кажется, это скорее заготовка ответа, чем дополнение к вопросу.
    – Nick Volynkin
    2 дек 2019 в 4:15
0

Практически готовый ответ. В шейдере B есть проекции двух частиц шейдра A, которые и необходимо соединить линией наприсованной во fragment B.

Мне только не удалось просчитать правильный uv параметр для прорисовки линии

vec4 color = vec4(mix(background, lineColor, plot2D(line({UV}, startPos, endPos), 2.0)));

Пробовал различные варианты:

vec2 fragCoord = vec2(gl_FragCoord.x, gl_FragCoord.y);
vec2 uv = (fragCoord * 2.0 - resolution.xy) / resolution.y;

vec2 fragCoord = vec2(gl_FragCoord.x, gl_FragCoord.y);
vec2 uv = fragCoord / resolution.y;

брал uv через varying vec2 vUv из vertex части.

Все манипуляции безуспешные.

       
        THREE.OrbitControls=function(e,t){var n,o,a,i,r;this.object=e,this.domElement=void 0!==t?t:document,this.enabled=!0,this.target=new THREE.Vector3,this.minDistance=0,this.maxDistance=1/0,this.minZoom=0,this.maxZoom=1/0,this.minPolarAngle=0,this.maxPolarAngle=Math.PI,this.minAzimuthAngle=-1/0,this.maxAzimuthAngle=1/0,this.enableDamping=!1,this.dampingFactor=.25,this.enableZoom=!0,this.zoomSpeed=1,this.enableRotate=!0,this.rotateSpeed=1,this.enablePan=!0,this.keyPanSpeed=7,this.autoRotate=!1,this.autoRotateSpeed=2,this.enableKeys=!0,this.keys={LEFT:37,UP:38,RIGHT:39,BOTTOM:40},this.mouseButtons={ORBIT:THREE.MOUSE.LEFT,ZOOM:THREE.MOUSE.MIDDLE,PAN:THREE.MOUSE.RIGHT},this.target0=this.target.clone(),this.position0=this.object.position.clone(),this.zoom0=this.object.zoom,this.getPolarAngle=function(){return E.phi},this.getAzimuthalAngle=function(){return E.theta},this.saveState=function(){s.target0.copy(s.target),s.position0.copy(s.object.position),s.zoom0=s.object.zoom},this.reset=function(){s.target.copy(s.target0),s.object.position.copy(s.position0),s.object.zoom=s.zoom0,s.object.updateProjectionMatrix(),s.dispatchEvent(c),s.update(),u=l.NONE},this.update=(n=new THREE.Vector3,o=(new THREE.Quaternion).setFromUnitVectors(e.up,new THREE.Vector3(0,1,0)),a=o.clone().inverse(),i=new THREE.Vector3,r=new THREE.Quaternion,function(){var e=s.object.position;return n.copy(e).sub(s.target),n.applyQuaternion(o),E.setFromVector3(n),s.autoRotate&&u===l.NONE&&M(2*Math.PI/60/60*s.autoRotateSpeed),E.theta+=p.theta,E.phi+=p.phi,E.theta=Math.max(s.minAzimuthAngle,Math.min(s.maxAzimuthAngle,E.theta)),E.phi=Math.max(s.minPolarAngle,Math.min(s.maxPolarAngle,E.phi)),E.makeSafe(),E.radius*=b,E.radius=Math.max(s.minDistance,Math.min(s.maxDistance,E.radius)),s.target.add(g),n.setFromSpherical(E),n.applyQuaternion(a),e.copy(s.target).add(n),s.object.lookAt(s.target),!0===s.enableDamping?(p.theta*=1-s.dampingFactor,p.phi*=1-s.dampingFactor):p.set(0,0,0),b=1,g.set(0,0,0),!(!(T||i.distanceToSquared(s.object.position)>h||8*(1-r.dot(s.object.quaternion))>h)||(s.dispatchEvent(c),i.copy(s.object.position),r.copy(s.object.quaternion),T=!1))}),this.dispose=function(){s.domElement.removeEventListener("contextmenu",B,!1),s.domElement.removeEventListener("mousedown",Z,!1),s.domElement.removeEventListener("wheel",F,!1),s.domElement.removeEventListener("touchstart",X,!1),s.domElement.removeEventListener("touchend",_,!1),s.domElement.removeEventListener("touchmove",K,!1),document.removeEventListener("mousemove",Y,!1),document.removeEventListener("mouseup",z,!1),window.removeEventListener("keydown",I,!1)};var s=this,c={type:"change"},m={type:"start"},d={type:"end"},l={NONE:-1,ROTATE:0,DOLLY:1,PAN:2,TOUCH_ROTATE:3,TOUCH_DOLLY:4,TOUCH_PAN:5},u=l.NONE,h=1e-6,E=new THREE.Spherical,p=new THREE.Spherical,b=1,g=new THREE.Vector3,T=!1,v=new THREE.Vector2,R=new THREE.Vector2,O=new THREE.Vector2,f=new THREE.Vector2,y=new THREE.Vector2,H=new THREE.Vector2,w=new THREE.Vector2,P=new THREE.Vector2,j=new THREE.Vector2;function C(){return Math.pow(.95,s.zoomSpeed)}function M(e){p.theta-=e}function L(e){p.phi-=e}var N,A,k,x=(N=new THREE.Vector3,function(e,t){N.setFromMatrixColumn(t,0),N.multiplyScalar(-e),g.add(N)}),D=(A=new THREE.Vector3,function(e,t){A.setFromMatrixColumn(t,1),A.multiplyScalar(e),g.add(A)}),U=(k=new THREE.Vector3,function(e,t){var n=s.domElement===document?s.domElement.body:s.domElement;if(s.object.isPerspectiveCamera){var o=s.object.position;k.copy(o).sub(s.target);var a=k.length();a*=Math.tan(s.object.fov/2*Math.PI/180),x(2*e*a/n.clientHeight,s.object.matrix),D(2*t*a/n.clientHeight,s.object.matrix)}else s.object.isOrthographicCamera?(x(e*(s.object.right-s.object.left)/s.object.zoom/n.clientWidth,s.object.matrix),D(t*(s.object.top-s.object.bottom)/s.object.zoom/n.clientHeight,s.object.matrix)):(console.warn("WARNING"),s.enablePan=!1)});function S(e){s.object.isPerspectiveCamera?b/=e:s.object.isOrthographicCamera?(s.object.zoom=Math.max(s.minZoom,Math.min(s.maxZoom,s.object.zoom*e)),s.object.updateProjectionMatrix(),T=!0):(console.warn("WARNING"),s.enableZoom=!1)}function V(e){s.object.isPerspectiveCamera?b*=e:s.object.isOrthographicCamera?(s.object.zoom=Math.max(s.minZoom,Math.min(s.maxZoom,s.object.zoom/e)),s.object.updateProjectionMatrix(),T=!0):(console.warn("WARNING"),s.enableZoom=!1)}function Z(e){if(!1!==s.enabled){switch(e.preventDefault(),e.button){case s.mouseButtons.ORBIT:if(!1===s.enableRotate)return;o=e,v.set(o.clientX,o.clientY),u=l.ROTATE;break;case s.mouseButtons.ZOOM:if(!1===s.enableZoom)return;n=e,w.set(n.clientX,n.clientY),u=l.DOLLY;break;case s.mouseButtons.PAN:if(!1===s.enablePan)return;t=e,f.set(t.clientX,t.clientY),u=l.PAN}var t,n,o;u!==l.NONE&&(document.addEventListener("mousemove",Y,!1),document.addEventListener("mouseup",z,!1),s.dispatchEvent(m))}}function Y(e){var t,n;if(!1!==s.enabled)switch(e.preventDefault(),u){case l.ROTATE:if(!1===s.enableRotate)return;!function(e){R.set(e.clientX,e.clientY),O.subVectors(R,v);var t=s.domElement===document?s.domElement.body:s.domElement;M(2*Math.PI*O.x/t.clientWidth*s.rotateSpeed),L(2*Math.PI*O.y/t.clientHeight*s.rotateSpeed),v.copy(R),s.update()}(e);break;case l.DOLLY:if(!1===s.enableZoom)return;n=e,P.set(n.clientX,n.clientY),j.subVectors(P,w),0<j.y?S(C()):j.y<0&&V(C()),w.copy(P),s.update();break;case l.PAN:if(!1===s.enablePan)return;t=e,y.set(t.clientX,t.clientY),H.subVectors(y,f),U(H.x,H.y),f.copy(y),s.update()}}function z(e){!1!==s.enabled&&(document.removeEventListener("mousemove",Y,!1),document.removeEventListener("mouseup",z,!1),s.dispatchEvent(d),u=l.NONE)}function F(e){var t;!1===s.enabled||!1===s.enableZoom||u!==l.NONE&&u!==l.ROTATE||(e.preventDefault(),e.stopPropagation(),(t=e).deltaY<0?V(C()):0<t.deltaY&&S(C()),s.update(),s.dispatchEvent(m),s.dispatchEvent(d))}function I(e){!1!==s.enabled&&!1!==s.enableKeys&&!1!==s.enablePan&&function(e){switch(e.keyCode){case s.keys.UP:U(0,s.keyPanSpeed),s.update();break;case s.keys.BOTTOM:U(0,-s.keyPanSpeed),s.update();break;case s.keys.LEFT:U(s.keyPanSpeed,0),s.update();break;case s.keys.RIGHT:U(-s.keyPanSpeed,0),s.update()}}(e)}function X(e){if(!1!==s.enabled){switch(e.touches.length){case 1:if(!1===s.enableRotate)return;r=e,v.set(r.touches[0].pageX,r.touches[0].pageY),u=l.TOUCH_ROTATE;break;case 2:if(!1===s.enableZoom)return;o=(n=e).touches[0].pageX-n.touches[1].pageX,a=n.touches[0].pageY-n.touches[1].pageY,i=Math.sqrt(o*o+a*a),w.set(0,i),u=l.TOUCH_DOLLY;break;case 3:if(!1===s.enablePan)return;t=e,f.set(t.touches[0].pageX,t.touches[0].pageY),u=l.TOUCH_PAN;break;default:u=l.NONE}var t,n,o,a,i,r;u!==l.NONE&&s.dispatchEvent(m)}}function K(e){var t,n,o,a,i;if(!1!==s.enabled)switch(e.preventDefault(),e.stopPropagation(),e.touches.length){case 1:if(!1===s.enableRotate)return;if(u!==l.TOUCH_ROTATE)return;!function(e){R.set(e.touches[0].pageX,e.touches[0].pageY),O.subVectors(R,v);var t=s.domElement===document?s.domElement.body:s.domElement;M(2*Math.PI*O.x/t.clientWidth*s.rotateSpeed),L(2*Math.PI*O.y/t.clientHeight*s.rotateSpeed),v.copy(R),s.update()}(e);break;case 2:if(!1===s.enableZoom)return;if(u!==l.TOUCH_DOLLY)return;o=(n=e).touches[0].pageX-n.touches[1].pageX,a=n.touches[0].pageY-n.touches[1].pageY,i=Math.sqrt(o*o+a*a),P.set(0,i),j.subVectors(P,w),0<j.y?V(C()):j.y<0&&S(C()),w.copy(P),s.update();break;case 3:if(!1===s.enablePan)return;if(u!==l.TOUCH_PAN)return;t=e,y.set(t.touches[0].pageX,t.touches[0].pageY),H.subVectors(y,f),U(H.x,H.y),f.copy(y),s.update();break;default:u=l.NONE}}function _(e){!1!==s.enabled&&(s.dispatchEvent(d),u=l.NONE)}function B(e){!1!==s.enabled&&e.preventDefault()}s.domElement.addEventListener("contextmenu",B,!1),s.domElement.addEventListener("mousedown",Z,!1),s.domElement.addEventListener("wheel",F,!1),s.domElement.addEventListener("touchstart",X,!1),s.domElement.addEventListener("touchend",_,!1),s.domElement.addEventListener("touchmove",K,!1),window.addEventListener("keydown",I,!1),this.update()},THREE.OrbitControls.prototype=Object.create(THREE.EventDispatcher.prototype),THREE.OrbitControls.prototype.constructor=THREE.OrbitControls,Object.defineProperties(THREE.OrbitControls.prototype,{center:{get:function(){return console.warn("THREE.OrbitControls"),this.target}},noZoom:{get:function(){return console.warn("THREE.OrbitControls"),!this.enableZoom},set:function(e){console.warn("THREE.OrbitControls"),this.enableZoom=!e}},noRotate:{get:function(){return console.warn("THREE.OrbitControls"),!this.enableRotate},set:function(e){console.warn("THREE.OrbitControls"),this.enableRotate=!e}},noPan:{get:function(){return console.warn("THREE.OrbitControls"),!this.enablePan},set:function(e){console.warn("THREE.OrbitControls"),this.enablePan=!e}},noKeys:{get:function(){return console.warn("THREE.OrbitControls"),!this.enableKeys},set:function(e){console.warn("THREE.OrbitControls"),this.enableKeys=!e}},staticMoving:{get:function(){return console.warn("THREE.OrbitControls"),!this.enableDamping},set:function(e){console.warn("THREE.OrbitControls"),this.enableDamping=!e}},dynamicDampingFactor:{get:function(){return console.warn("THREE.OrbitControls"),this.dampingFactor},set:function(e){console.warn("THREE.OrbitControls"),this.dampingFactor=e}}});

        var circularPoint = "data:image/png;base64,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IiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTEyLTA1VDIzOjIyOjIyKzAzOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTEyLTA1VDIzOjIyOjIyKzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0xMi0wNVQyMzoyMjoyMiswMzowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0ODUyZTdjOS03OTA5LTQ3ZTItYWE3ZC0wNGFhOTc0OTBhZWYiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoxNThjMjY5ZS0yM2ZhLWQyNDgtYjI4NS05N2I1ZDViMjVhZjIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjY2VjYjVhNy1lZDAyLTRkOTYtYjI4Yy1mODQ2NDYyYTdlMWMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0iRGlzcGxheSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Y2NlY2I1YTctZWQwMi00ZDk2LWIyOGMtZjg0NjQ2MmE3ZTFjIiBzdEV2dDp3aGVuPSIyMDE5LTEyLTA1VDIzOjIyOjIyKzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4NTJlN2M5LTc5MDktNDdlMi1hYTdkLTA0YWE5NzQ5MGFlZiIgc3RFdnQ6d2hlbj0iMjAxOS0xMi0wNVQyMzoyMjoyMiswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsqkJm0AAACtSURBVDiNrZPBCgFRFIa/GTXlTTSmeCjPIwvKoyi8AyWslHewQE2fzaVxi3LHX2dxT+f7NudcVKIq1bF6UK+h9qFXxvPNR6FO1drPqdW52o0Fhbr8AsZZB+YlmP0APzNVydQ+sAU6/JYaGOTAKAEmMKNMPQC9BAHAMVNvQJEouOeJ4Jvg1EJwzoFFC8EqUytgQ9oah20OaeY/T7n1Z2pWX52oR/WuXtRd6FXx/AO9neVdms/CnAAAAABJRU5ErkJggg==";


        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 0, 20);
        
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(0xEEEEEE, 1.0);
        document.body.appendChild(renderer.domElement);

        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        var N = 4, verts = [], colors = [], radius = [];
        
        verts = [
            
            new THREE.Vector3(0.0, 0.0, -4.0),
            new THREE.Vector3(-4.0, 0.0, 0.0),
            new THREE.Vector3(4.0, 0.0, 0.0),
            new THREE.Vector3(0.0, 0.0, 4.0)

        ];
        
        colors.push(1.0, 0., 1.0);
        colors.push(1.0, 0., 1.0);
        colors.push(0.847, 0.332, 0.347);
        colors.push(0.457, 0.695, 0.675);
        
        for(var i = 0; i < N; i++){

            radius.push(0.5);
            
        }
        
        var pointsGeometry = new THREE.BufferGeometry().setFromPoints(verts);
        pointsGeometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));
        pointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius), 1));
        
        var pointsMaterial = new THREE.ShaderMaterial({

            uniforms: {

                viewport: {value: window.innerHeight * window.devicePixelRatio },
		        texture: {value: new THREE.TextureLoader().load(circularPoint)}
                
            },
            vertexShader: document.getElementById("vertexParticle").textContent,
            fragmentShader: document.getElementById("fragmentParticle").textContent,
            depthTest : true,
            alphaTest: 0.9


        })
        
        var verts2 = [], colors2 = [], radius2 = [];
        
        var dist = new THREE.Vector3(-4.0, 0.0, 0.0).distanceTo(new THREE.Vector3(0.0, 0.0, -4.0));
        console.log(dist);
        
        for(var i = 0; i < 1; i++){
            for(var j = i + 1; j < 2; j++){

                var dist = verts[i].distanceTo(verts[j]);
                var nv = new THREE.Vector3(verts[i].x, verts[i].y, verts[i].z);

                verts2.push(nv.lerp(verts[j], 0.5));
                radius2.push(dist / 2.0 + 0.5);
                colors2.push(1.0, 1.0, 0.0);

            }
        }

        pointsMaterial.extensions.fragDepth = true;
        pointsMaterial.extensions.drawBuffers = true;
        
        var jointsGeometry = new THREE.BufferGeometry().setFromPoints(verts2);
        jointsGeometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(colors2), 3));
        jointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius2), 1));
        
        var jointsMaterial = new THREE.ShaderMaterial({

            uniforms: {

                viewport: {value: window.innerHeight * window.devicePixelRatio },
		        texture: {value: new THREE.TextureLoader().load(circularPoint)},
                start: { value: verts[0] },
                end: { value: verts[1] },
                resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
                
            },
            vertexShader: document.getElementById("vertexJoint").textContent,
            fragmentShader: document.getElementById("fragmentJoint").textContent,
            depthTest : true,
            alphaTest: 0.8,
            transparent: true

        })

        jointsMaterial.extensions.derivatives = true;
        jointsMaterial.extensions.fragDepth = true;
        jointsMaterial.extensions.drawBuffers = true;

        var points = new THREE.Points(pointsGeometry, pointsMaterial);
        scene.add(points);
        
        var joints = new THREE.Points(jointsGeometry, jointsMaterial);
        scene.add(joints);
        
        var mouse = new THREE.Vector2();

        function getXYZ(){
            
            var n = 1E1;
            var rho = Math.random();
            var theta = Math.random() * Math.PI * 2;
            var phi = Math.random() * Math.PI * 2;
            var x = rho * Math.cos(phi) * Math.sin(theta);
            var y = rho * Math.sin(phi) * Math.sin(theta);
            var z = rho * Math.cos(theta);

            return new THREE.Vector3(x, y, z);
            
        }
        
        function onMouseMove(event) {
            
            camera.clearViewOffset();
            
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);
            
        }

        renderer.setAnimationLoop(function(){
            
            
            renderer.render(scene, camera) 
        
        
        });
 body {
        overflow: hidden;
        margin: 0;
        }
<html>

<head>

    <meta charset="utf-8">
    <title>THREE.JS | D3.JS : 3D SCATTERPLOT [rc]</title>
    <meta name="description" content="Ehno based on D3.JS | THREE.JS stack.">
    <meta name="keywords" content="HTML,CSS,CSV,JavaScript,D3.JS,THREE.JS">
    <meta name="author" content="Vladimir V. KUCHINOV">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>


</head>

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

#define PI 3.141592
attribute float radius;
attribute vec3 color;

uniform float viewport;
varying vec3 vColor;
void main() {

  vColor = color;
  
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  gl_PointSize = viewport * radius * PI / -mvPosition.z;
  gl_Position = projectionMatrix * mvPosition;
}


</script>

<script type="x-shader/x-fragment" id="fragmentParticle">

  varying vec3 vColor;
  uniform sampler2D texture;
  void main() {
  
      gl_FragColor = vec4(vColor, 1.); 
      gl_FragColor = gl_FragColor * texture2D(texture, gl_PointCoord); 
      if (gl_FragColor.a < 0.1) discard;
      
  }
  
</script>
    
<script type="x-shader/x-vertex" id="vertexJoint">

#define PI 3.141592
attribute float radius;
attribute vec3 color;

uniform float viewport;
uniform vec2 resolution;
uniform vec3 start;
uniform vec3 end;

varying vec3 vColor;
varying vec3 outStartPosition;
varying vec3 outEndPosition;
varying vec2 vUv;

vec3 projectWorldCoordinates(vec3 in_){

    vec4 positionTransformV  = modelViewMatrix * vec4(in_.x, in_.y, in_.z, 1.0);
    vec4 radiusTransformV  = vec4(positionTransformV.x, positionTransformV.y + radius, positionTransformV.zw);
    
    vec4 positionTransformH = projectionMatrix * positionTransformV;
    vec4 radiusTransformH  = projectionMatrix * radiusTransformV;
  
    return positionTransformH.xyz / positionTransformH.w;

}

void main() {

  vColor = color;
  vUv = uv;
  
  outStartPosition = projectWorldCoordinates(start);
  outEndPosition = projectWorldCoordinates(end);
 
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  gl_PointSize = viewport * radius * PI / -mvPosition.z;
  gl_Position = projectionMatrix * mvPosition;
  
}


</script>

<script type="x-shader/x-fragment" id="fragmentJoint">

  float LineWidth = 3.0;
  
  uniform sampler2D texture;
  uniform vec2 resolution;
  
  uniform vec3 start;
  uniform vec3 end;

  varying vec3 vColor;
  varying vec3 outStartPosition;
  varying vec3 outEndPosition;
  varying vec2 vUv;

  float circle( vec2 _st, vec2 _center, float _radius ){
  
    const float thickness = 16.0;
    float dist = length(_st - _center);
    return smoothstep(0.0, thickness / 2.0, abs(_radius - dist));
    
  }
  
  float plot2D(float d_, float thickness_) { return smoothstep(thickness_ / resolution.y, 0.0, abs(d_)); }
  
  float line(vec2 uv_, vec2 p0_, vec2 p1_) {
    
    vec2 v0 = p1_ - p0_, v1 = uv_ - p0_;
    return length(v1 - v0 * clamp(dot(v0, v1) / dot(v0, v0), 0.0, 1.0));
    
  }

  void main() {

      vec4 background = vec4(0.);
      vec4 lineColor = vec4(1., 0., 1., 1.);
      
      vec2 fragCoord = vec2(gl_FragCoord.x, gl_FragCoord.y);
      vec2 uv = (fragCoord * 2.0 - resolution.xy) / resolution.y;
      
      vec2 startPos = (outStartPosition.xy * 0.5 + 0.5) * resolution.xy * 2.0;      
      vec2 endPos = (outEndPosition.xy * 0.5 + 0.5) * resolution.xy * 2.0;

      vec4 color = vec4(mix(background, lineColor, plot2D(line(vUv, startPos, endPos), 2.0)));
      
      //gl_FragColor = vec4(circle(fragCoord, startPos, 16.0 ));
      gl_FragColor = color;

      
  }
  
</script>
    


<body>


</body>

</html>

2
  • Я до сих пор так и не понял Вашу идею, почему джоинты это точки? по мне так тут должно быть 2 теугольника на каждый джоинт 6 дек 2019 в 9:43
  • Идея простая, я хочу использовать второй шейдер Joint, чтобы в нем 'рисовать' что угодно между двумя частицами шейдера Particle. Например линию. Хотя это линия не основная задача.
    – VVK
    6 дек 2019 в 9:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.