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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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