写実的表現とリアリティの要素

/** 霞ませる奥行きの半径（立体を包む球の半径） */
const DEPTH_RADIUS = 1.45

/** 線の太さ（ピクセル） */
const LINE_WIDTH = 2.5

/** デプスキューイングの効き。1 で立体のいちばん奥が背景に溶けきる */
const STRENGTH = 0.9

// 稜線 1 本を 1 本の線分として、両端の座標を並べたもの
const positions = createEdgePositions()

const geometry = new LineSegmentsGeometry()
geometry.setPositions(positions)

// 太さのある線。太さはピクセル単位なので canvas の大きさが要るが、
// その受け渡しは LineSegments2 が描画の直前に引き受ける。
// fog は既定で無効なので、霞ませる線では明示的に有効にする
const material = new LineMaterial({ color: EDGE_COLOR, alphaToCoverage: true, fog: true })
material.linewidth = LINE_WIDTH
const wireframe = new LineSegments2(geometry, material)
scene.add(wireframe)

// 視点から遠い線ほど背景色へ近づける（デプスキューイング）。
// 混ぜる割合は、シェーダがフラグメントごとに奥行きから計算する
const fog = new Fog(BACKGROUND_COLOR, 0, 1)
scene.fog = fog

// 視点からの奥行きを測るための作業用ベクトル（毎フレーム使い回す）
const forward = new Vector3()
const point = new Vector3()

// 霞ませる範囲を立体に合わせる。立体を包む球の手前側で霞み始め、
// 効きが弱いほど、溶けきるまでの奥行きを遠くへ伸ばす。
// 視線の向きが変わると奥行きも変わるので、視点が動くたびに計算し直す
camera.getWorldDirection(forward)
const centerDepth = point.copy(wireframe.position).sub(camera.position).dot(forward)
fog.near = centerDepth - DEPTH_RADIUS
fog.far = fog.near + (DEPTH_RADIUS * 2) / STRENGTH

/** 線の太さ（ピクセル） */
const LINE_WIDTH = 2.5

// 面を三角形に分割して並べた座標と、稜線 1 本ずつの両端の座標
const faceGeometry = new BufferGeometry()
faceGeometry.setAttribute("position", new Float32BufferAttribute(createFacePositions(), 3))

const edgeGeometry = new LineSegmentsGeometry()
edgeGeometry.setPositions(createEdgePositions())

// 陰線消去した線画。
// 面は色を書かずに深度だけを書き、稜線はその深度に対する深度テストで隠れる。
// polygonOffset で面をわずかに奥へずらし、面の縁にある稜線が z ファイティングしないようにする
const occluderMaterial = new MeshBasicMaterial({
  colorWrite: false,
  polygonOffset: true,
  polygonOffsetFactor: 1,
  polygonOffsetUnits: 1
})
const occluder = new Mesh(faceGeometry, occluderMaterial)
occluder.renderOrder = 0
scene.add(occluder)

const edgeMaterial = new LineMaterial({ color: EDGE_COLOR, alphaToCoverage: true })
edgeMaterial.linewidth = LINE_WIDTH
const edges = new LineSegments2(edgeGeometry, edgeMaterial)
// 深度を書いた面より後に描く（描く順が入れ替わると稜線が隠れない）
edges.renderOrder = 2
scene.add(edges)

// 可視面表示。隠面消去は深度バッファが行う。
// 陰影を付けないので、見えている面はすべて同じ色になる
const surfaceMaterial = new MeshBasicMaterial({ color: SURFACE_COLOR })
scene.add(new Mesh(faceGeometry, surfaceMaterial))

// 影を落とすには renderer 側で影の描画を有効にする
renderer.shadowMap.enabled = true

// 面を三角形に分割して並べ、面ごとに独立した頂点から法線を求める
const geometry = new BufferGeometry()
geometry.setAttribute("position", new Float32BufferAttribute(createFacePositions(), 3))
geometry.computeVertexNormals()

// 面の明るさは、光の強さ・面の傾き・反射率だけで決まる（鏡面反射は考えない）
const material = new MeshLambertMaterial({ color: SURFACE_COLOR })
const solid = new Mesh(geometry, material)
// 影を落とす側・影を受ける側の両方に指定する。同じ立体に両方を指定すると、
// 段差が落とした影を、その下の段の面が受ける。指定しなければ陰影だけの表示になる
solid.castShadow = true
solid.receiveShadow = true
scene.add(solid)

// 平行光源。影用のカメラは立体のまわりだけに絞り、輪郭のはっきりした影を得る
const light = new DirectionalLight(LIGHT_COLOR, 2.5)
light.castShadow = true
light.shadow.mapSize.set(2048, 2048)
light.shadow.camera.left = -4
light.shadow.camera.right = 4
light.shadow.camera.top = 4
light.shadow.camera.bottom = -4
light.shadow.camera.near = 0.5
light.shadow.camera.far = 25
// 写す範囲は、変えたあとに投影行列を作り直さないと反映されない
light.shadow.camera.updateProjectionMatrix()
// 面と影の境目に縞が出ないよう、面の向きに応じて影の判定をわずかにずらす
light.shadow.normalBias = 0.02
scene.add(light)

// 光源の向きは方位角と仰角から決める（平行光源なので距離は見え方に関わらない）
const azimuth = MathUtils.degToRad(80)
const elevation = MathUtils.degToRad(55)
light.position.set(
  LIGHT_DISTANCE * Math.cos(elevation) * Math.sin(azimuth),
  LIGHT_DISTANCE * Math.sin(elevation),
  LIGHT_DISTANCE * Math.cos(elevation) * Math.cos(azimuth)
)

// 光の届かない面も真っ暗にはならない。上を向いた面ほど明るい環境光を足すことで、
// 影に入った段の面と、光を背にした段差の面が同じ明るさに溶けるのを防ぐ
scene.add(new HemisphereLight(LIGHT_COLOR, GROUND_COLOR, 0.55))

/** 球の半径 */
const RADIUS = 1.15

// ポリゴンで近似した球。分割数を減らすほど 1 枚 1 枚のポリゴンが大きくなる。
// 縦方向は横方向の半分にして、ポリゴンの形が細長くなりすぎないようにする
const geometry = new SphereGeometry(RADIUS, SEGMENTS, Math.max(2, Math.round(SEGMENTS / 2)))

// ポリゴンごとに明るさを一定にする。面の境目が段差として見える
const flatMaterial = new MeshLambertMaterial({ color: SURFACE_COLOR, flatShading: true })
const flat = new Mesh(geometry, flatMaterial)
flat.position.x = -OFFSET_X
scene.add(flat)

// 頂点の法線を面の内部で補間する（既定の動き）。濃淡が連続する
const smoothMaterial = new MeshLambertMaterial({ color: SURFACE_COLOR })
const smooth = new Mesh(geometry, smoothMaterial)
smooth.position.x = OFFSET_X
scene.add(smooth)

// 光源の向きは主題ではないので固定する。左右どちらの球にも同じ向きから当たる
const light = new DirectionalLight(LIGHT_COLOR, 2.5)
light.position.set(4, 5, 3)
scene.add(light)

scene.add(new AmbientLight(LIGHT_COLOR, 0.4))