■WebGL
■入門
WebGL入門 - サンプルで理解する3D表現の迫力 - ICS MEDIA
https://ics.media/entry/2328/
【2022年版】WebGL/three.js参考サイト 日本・海外 最新事例30選
https://balance.bz/magazine/webgr2022/
「WebGLだけで3Dグラフィックを表現するには、3Dの空間を2Dのブラウザ上で表現するための座標置換やGLSLというシェーディング言語の習得といった高い専門知識が必要となり、開発にも時間がかかります」
WebGLを直接扱うのはあまり現実的では無いか
【WebGL】ただの四角を描画しましょう | デザインおしゃれ手帳
https://blog.design-nkt.com/osyare-webgl1/
四角形を表示するだけでも、相当難易度が高い
WebGLで三角形を描画するまでの長すぎる道のり（もう沼） - Qiita
https://qiita.com/FumiyaShibusawa/items/db81dc4152e19d6b4a2a
とても難しそう
■サンプル
WebGL(2D) - 入門編 - 1日目: 線を描く - Qiita
https://qiita.com/ienaga/items/9f85d127c175bfca0cae
画面に一本直線を引くだけだが、それでも非常に難しい
Three.js などのライブラリを頼るのが無難
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL</title>
<script>
// ページの読み込みを待つ
window.addEventListener('DOMContentLoaded', init);
function init() {
// Canvas
var w = 400;
var h = 400;
var canvas = document.getElementById('myCanvas');
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext('webgl');
// Clear
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var w = 400; // 幅
var h = 400; // 高さ
// 今いる場所 [x=-1.0, y=1.0]
// 向かいたい座標
var x = 250;
var y = 250;
// 計算して算出する
var dx = (x-(w/2))/(w/2); // dx = 0.25
var dy = -(y-(h/2))/(h/2); // dy = -0.25
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
var vSource = [
'precision mediump float;',
'attribute vec2 vertex;',
'void main(void) {',
'gl_Position = vec4(vertex, 0.0, 1.0);',
'}'
].join('\n');
var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vSource);
gl.compileShader(vShader);
gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
var rgba = [0.0, 0.0, 0.0, 1.0]; // Red, Green, Blue, Alpha
var fSource = [
'precision mediump float;',
'void main(void) {',
'gl_FragColor = vec4('+ rgba.join(',') +');',
'}'
].join('\n');
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fSource);
gl.compileShader(fShader);
gl.getShaderParameter(fShader, gl.COMPILE_STATUS);
var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
var vertex = gl.getAttribLocation(program, 'vertex');
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
// 開始座標
var x = 200; // x座標
var y = 200; // y座標
// 向かいたい座標
var dx = 400; // x座標
var dy = 0; // y座標
// 座標をセット
var vertices = [
(x-(w/2))/(w/2), ~(y-(h/2))/(h/2),
(dx-(w/2))/(w/2), ~(dy-(h/2))/(h/2)
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.LINE_STRIP, 0, vertices.length/2);
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
■Unity
【Unity入門】WebGLの出力方法!ブラウザ上で作品を動かそう | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
https://www.sejuku.net/blog/58732
WebGL のブラウザー間での互換性 - Unity マニュアル
https://docs.unity3d.com/ja/current/Manual/webgl-browsercompatibility.html