Memo

メモ > 技術 > 開発: WebGL
WebGL
Three.js
Babylon.js
戻る
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
Three.js
■入門

【Three.js入門】初心者がまず見るべきサイト・書籍まとめ | 仙台を代表するホームページ制作会社｜AndHA（アンドエイチエー）
https://and-ha.com/coding/three-js-start/

最新版で学ぶThree.js入門 - 手軽にWebGLを扱える3Dライブラリ - ICS MEDIA
https://ics.media/entry/14771/

WebGL入門 ~ three.js ?~
https://zenn.dev/vava/articles/0d0352c1f4a7bd

必要なのはJavaScriptの基本的な知識だけ　3Dアニメーション制作をお手軽にする「Three.js」の魅力 - ログミーTech
https://logmi.jp/tech/articles/328319

【WebGL特集】第1回：WebGLって何？｜株式会社モックス
https://mox-motion.com/blog/webgl01-2/■サンプル

簡単なThree.jsのサンプルを試そう - ICS MEDIA
https://ics.media/tutorial-three/quickstart/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js</title>
<script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
<script>
    // ページの読み込みを待つ
    window.addEventListener('DOMContentLoaded', init);

    function init() {
        // サイズを指定
        const width = 960;
        const height = 540;

        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#myCanvas')
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);

        // シーンを作成
        const scene = new THREE.Scene();

        // カメラを作成
        const camera = new THREE.PerspectiveCamera(45, width / height);
        camera.position.set(0, 0, +1000);

        // 箱を作成
        const geometry = new THREE.BoxGeometry(400, 400, 400);
        const material = new THREE.MeshNormalMaterial();
        const box = new THREE.Mesh(geometry, material);
        scene.add(box);

        tick();

        // 毎フレーム時に実行されるループイベントです
        function tick() {
            box.rotation.y += 0.01;
            renderer.render(scene, camera); // レンダリング

            requestAnimationFrame(tick);
        }
    }
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
■Blender

【Blender & Three.js】3DモデルをThree.jsでWEBブラウザ表示する方法｜WEB CREATES
https://web-creates.com/code/blender-threejs/

Blenderで3Dモデルを作成し、webpack × Three.js でサイトを作成する - Qiita
https://qiita.com/kaito_takase/items/4b381799d76d4101278c
Babylon.js

Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも − Publickey
https://www.publickey1.jp/blog/23/web3d2dbabylonjs_650wasm.html

Babylon.js 公式入門チュートリアル ざっくり和訳
https://zenn.dev/chomado/books/babylonjs-tutorial-ja
Memo

Advertisement
