Question

我正在使用three.js在3D中显示几何图形。

当您（手工）将隐藏线绘制为虚线时，所有的虚线都是规则的。这意味着平行于相机平面的线或垂直于相机平面的线（几乎）应该具有相同的长度和间隙。

但这似乎不适用于LineDashedMaterial。

对于所附示例，我正在使用以下（非常）基本代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 2, 2, 2 );
var LINES_DASHED = new THREE.LineSegments(
    new THREE.EdgesGeometry(geometry),
    new THREE.LineDashedMaterial({
        linewidth: 2,
        color: 0x000000,
        dashSize: 0.2,
        gapSize: 0.1,
        depthTest: false,
        polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1
    })
);
LINES_DASHED.computeLineDistances();
scene.add( LINES_DASHED );
scene.background = new THREE.Color( 0xffffff);
camera.position.z = 5;

var animate = function () {
    requestAnimationFrame( animate );
    LINES_DASHED.rotation.x += 0.01;
    LINES_DASHED.rotation.y += 0.01;
    renderer.render( scene, camera );
};

animate();

body { margin: 0; }
canvas { width: 100%; height: 100% }

<script src="https://threejs.org/build/three.min.js"></script>

工作示例：

https://bs4.scolcours.ch/_dev/3js_ex.php

我认为使用：

line.computeLineDistance();

将解决问题。但这似乎是在3D空间中计算线长（这似乎很合逻辑）。

有什么我想念的吗？

感谢您的帮助！

Answer 1

那是国外的任务。似乎THREE.LineDashedMaterial不支持此功能。
但是可以编写着色器并使用THREE.ShaderMaterial。

诀窍是要知道片段着色器中一行的开始。通常，使用flat插值限定符很容易。
很遗憾，WebGL 1.0 / GLSL ES 1.00不支持此功能。因此，我们必须使用WebGL 2.0 / GLSL ES 3.00。可能有人可以在此处输入信息，并且知道WebGL / OES扩展，该扩展也支持flat限定符。

因此，让我们使用WebGL2上下文来确定THREE.WebGLRenderer。参见How to use WebGL2：

var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );

顶点着色器必须将规范化的设备坐标传递给片段着色器。一次使用默认插值，一次不使用（flat）插值。这会导致在片段阴影中，第一个输入参数包含直线上实际位置的NDC坐标，然后是直线起点的NDC坐标。

flat out vec3 startPos;
out vec3 vertPos;

void main() {
    vec4 pos    = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    gl_Position = pos;
    vertPos     = pos.xyz / pos.w;
    startPos    = vertPos;
}

除了变化的输入外，片段着色器还具有统一变量。 u_resolution包含视口的宽度和高度。 u_dashSize包含行长，u_gapSize包含像素间距。

因此可以计算从开始到实际片段的行长：

vec2  dir  = (vertPos.xy-startPos.xy) * u_resolution/2.0;
float dist = length(dir);

通过discard命令可以丢弃gab上的碎片。

if (fract(dist / (u_dashSize + u_gapSize)) > u_dashSize/(u_dashSize + u_gapSize))
    discard;

片段着色器：

precision highp float;

flat in vec3 startPos;
in vec3 vertPos;

uniform vec3  u_color;
uniform vec2  u_resolution;
uniform float u_dashSize;
uniform float u_gapSize;

void main(){

    vec2  dir  = (vertPos.xy-startPos.xy) * u_resolution/2.0;
    float dist = length(dir);

    if ( fract(dist / (u_dashSize + u_gapSize)) > u_dashSize/(u_dashSize + u_gapSize) )
        discard; 
    gl_FragColor = vec4(u_color.rgb, 1.0);
}

设置THREE.ShaderMaterial和制服：

var uniforms = {
    u_resolution: {type: 'v2', value: {x: vpSize[0], y: vpSize[1]}},
    u_dashSize : {type:'f', value: 10.0},
    u_gapSize : {type:'f', value: 5.0},
    u_color : {type: 'v3', value: {x:0.0, y:0.0, z:0.0} }
};

var material = new THREE.ShaderMaterial({  
        uniforms: uniforms,
        vertexShader: document.getElementById('vertex-shader').textContent,
        fragmentShader: document.getElementById('fragment-shader').textContent
});

var LINES_DASHED = new THREE.LineSegments(
    new THREE.EdgesGeometry(geometry),
    material);

请注意，如果画布的分辨率发生变化，则必须设置u_resolution的值：

例如

LINES_DASHED.material.uniforms.u_resolution.value.x = window.innerWidth;
LINES_DASHED.material.uniforms.u_resolution.value.y = window.innerHeight;

我将建议应用于您的原始代码。查看预览和示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 0.1, 1000 );
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );

var vpSize = [window.innerWidth, window.innerHeight];
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 2, 2, 2 );

var uniforms = {
    u_resolution: {type: 'v2', value: {x: vpSize[0], y: vpSize[1]}},
    u_dashSize : {type:'f', value: 10.0},
    u_gapSize : {type:'f', value: 5.0},
    u_color : {type: 'v3', value: {x:0.0, y:0.0, z:0.0} }
};
    
var material = new THREE.ShaderMaterial({  
        uniforms: uniforms,
        vertexShader: document.getElementById('vertex-shader').textContent,
        fragmentShader: document.getElementById('fragment-shader').textContent
});

var LINES_DASHED = new THREE.LineSegments(
    new THREE.EdgesGeometry(geometry),
    material);

LINES_DASHED.computeLineDistances();
scene.add( LINES_DASHED );
scene.background = new THREE.Color( 0xffffff);
camera.position.z = 5;

var animate = function () {
    requestAnimationFrame( animate );
    LINES_DASHED.rotation.x += 0.01;
    LINES_DASHED.rotation.y += 0.01;
    renderer.render( scene, camera );
};

window.onresize = function() {
    vpSize = [window.innerWidth, window.innerHeight];
    LINES_DASHED.material.uniforms.u_resolution.value.x = window.innerWidth;
    LINES_DASHED.material.uniforms.u_resolution.value.y = window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

animate();

<script type='x-shader/x-vertex' id='vertex-shader'>
flat out vec3 startPos;
out vec3 vertPos;

void main() {
    vec4 pos    = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    gl_Position = pos;
    vertPos     = pos.xyz / pos.w;
    startPos    = vertPos;
}
</script>

<script type='x-shader/x-fragment' id='fragment-shader'>
precision highp float;

flat in vec3 startPos;
in vec3 vertPos;

uniform vec3  u_color;
uniform vec2  u_resolution;
uniform float u_dashSize;
uniform float u_gapSize;

void main(){

    vec2  dir  = (vertPos.xy-startPos.xy) * u_resolution.xy/2.0;
    float dist = length(dir);
    
    if (fract(dist / (u_dashSize + u_gapSize)) > u_dashSize/(u_dashSize + u_gapSize))
        discard; 
    gl_FragColor = vec4(u_color.rgb, 1.0);
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

Three.js相对于摄像机的统一虚线

1 个答案: