【Three.js】getImageData()で取得したピクセル上にPointsMaterialを配置すると反転してしまう

Question

前提・実現したいこと

WebGLでなんか綺麗なキラキラなパーティクルの演出を作ってみた
http://tkengo.github.io/blog/2015/07/15/webgl-particle-effect-we-are-xseeds/

こちらを参考にしながら、 new THREE.Points を使用してドットで文字を描画しようとしています。

発生している問題・エラーメッセージ

https://jsfiddle.net/va9u6dL8/

2Dコンテクストに描画した水色の TEST のうしろのほうに小さくドットで描画されているのが Points で表示したテキストです。
なぜ反転してしまったのかの理由が見当もつきません。
また、 camera.position.z = 1000 のように大きな数字を指定しないと画面内に収まらないことも解消したいと思っています。

該当のソースコード

// THREE 初期化など
let windowWidth = window.innerWidth
let windowHeight = window.innerHeight

const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer()
const camera = new THREE.PerspectiveCamera(45, windowWidth / windowHeight)

renderer.setSize(windowWidth, windowHeight)
renderer.setPixelRatio(window.devicePixelRatio)

camera.position.z = 1000

// Points生成
const pointsGeometry = new THREE.Geometry()
let pointsMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 1
})
const pointsMesh = new THREE.Points(pointsGeometry, pointsMaterial)

scene.add(pointsMesh)


// テキストを描画したcanvasを走査、
// 色がある部分に点を配置
const text = createText('test')

const imageData = text.ctx.getImageData(0, 0, windowWidth, windowHeight).data

for(let x = 0; x < windowWidth; x++) {
  for(let y = 0; y < windowHeight; y++) {
    if (imageData[(x + y * windowWidth) * 4 + 3] === 0) {
      continue;
    }

    pointsGeometry.vertices.push(
      new THREE.Vector3(x, y, 1)
    )
  }
}

// canvasを生成してテキストを描画する関数
function createText(text) {
  let o = {}
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  canvas.width = windowWidth
  canvas.height = windowHeight

  ctx.font = '128px serif'
  ctx.fillStyle = '#cff'
  ctx.textAligh = 'center'
  ctx.fillText(text, windowWidth / 2, windowHeight / 2)

  // 表示確認のため固定配置でbodyに追加
  canvas.classList.add('text-canvas')
  document.body.appendChild(canvas)

  o.canvas = canvas
  o.ctx = ctx

  return o
}

// domに追加
document.querySelector('#gl').appendChild(renderer.domElement)

// render
renderer.render(scene, camera)

試したこと

camera.position の値をいろいろいじってみましたが位置が変わるのみで反転は解消できませんでした。

補足情報（FW/ツールのバージョンなど）

Three.js v100を使用しています。

Answer 1

質問いただきありがとうございます。

pointsGeometry.vertices.push(
      new THREE.Vector3(x,-y, 1)

このようにy座標を-1倍すれば反転は直ると思います。
メッシュの大きさの問題についてはScaleを調整するか、pointsGeometry.vertices.pushの部分で倍率を掛けるかすれば解決すると思います。

Comments

[machine_machine]

ありがとうございます。y座標にマイナスをかけて表示的には反転は治りました。
反転が起こってしまう理由についておわかりになることはございますでしょうか。

[bochan2]

Three.jsの座標系の問題だと思います
この右手が左手のどっちか忘れたんですがy軸の向きがcanvasと逆なのが原因です

[machine_machine]

座標系のお話はどこかで見たことがあります。こういうときに影響してくるんですね。
いろいろとご丁寧にありがとうございました！