html - 2Dと3Dの両方のコンテキストを使用したCanvas3D描画

Question

webgl / openglはテキスト描画をサポートしていないので、3Dコンテキストを使用して3Dオブジェクトを描画し、2Dコンテキストを使用してテキスト描画することは可能ですか？

Answer 1

残念ながら、そうではありません。

HTML 5の仕様では、すでに異なるコンテキストモードgetContextになっているcanvas要素を呼び出し、2つのコンテキストに互換性がない場合は、を返します。null

残念ながら、「webgl」と「2d」のキャンバスには互換性がないため、次のようになりますnull。

var canvas = document.getElementById('my-canvas');
var webgl = canvas.getContext("webgl"); // Get a 3D webgl context, returns a context
var twod = canvas.getContext("2d"); // Get a 2D context, returns null

Answer 2

述べたように、これを行うことはできません。

ただし、あるキャンバスを別のキャンバスの上に置いて、別々に描画することはできます。私は以前にこれを行ったことがあり、それは非常にうまくいく可能性があります。

Answer 3

キャンバス2Dを使用してテキストをテクスチャとして作成し、3Dでレンダリングします。チュートリアルについては、こちらをご覧ください。

Answer 4

トラブルシューティングのフィードバックが必要な場合でも、3Dキャンバス上の2Dテキストコンテンツが必要な場合でも、CSSを使用してキャンバスの上にいくつかのHTML要素を配置するだけです。

キャンバスとテキストフィールドのグループが同じスペースを共有するようにし、次のようにテキストフィールドが上にあることを確認できます。

HTML：

<div id="container">
  <canvas id="canvas"></canvas>
  <div id="controlsContainer">
    <label>Mouse Coordinates</label>
      <div>
        <label for="xPos">X</label>
        <span id="xPos"></span>
      </div>
      <div>
        <label for="yPos">Y</label>
        <span id="yPos"></span>
      </div>
  </div>
</div>

CSS：

canvas {
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
}

#container {
  position: relative;
}

#controlsContainer {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
}

  #controlsContainer div {
    padding-left: 8px;
  }

  #controlsContainer label {
    color: white;
    z-index: 4;
  }

  #controlsContainer span {
    color: white;
    z-index: 4;
  }

はz-index、どの要素が前面にあるかを確認position: relativeし、コンテナと、は、およびコントロールとposition: absolute連携して、それらが同じスペースを共有することを確認します。topleft

私はこれで非常に幸運に恵まれており、トラブルシューティングのフィードバックは非常に貴重です。

Javascript（この場合はES6）の例は次のとおりです。

let xPos = document.getElementById("xPos");
let yPos = document.getElementById("yPos");
let x = event.clientX - containerDiv.offsetLeft -parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-left"));
let y = event.clientY - containerDiv.offsetTop - parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-top"));
xPos.innerText = x;
yPos.innerText = y;

これをmousemoveハンドラーに配置しました。