3D의 기본적인 지식을 이해하고 싶어서, 「3차원 CG의 기초와 응용[신정판]( h tp //오. gl/G코 Q4y )」라고 하는 서적을 구입했습니다. 얇고 읽기 쉬운 것 같은 책이지만 샘플 소스가 없기 때문에, 공부가 테라 샘플을 만들면서 읽어 나가려고 생각합니다. 누구나 즉시 추시를 할 수 있도록 HTML + Javascript로 샘플을 만들어갑니다.

완전한 샘플은 이쪽
htps : // 기주 b. 코 m / 나카 칸 0629 / 3ds dy

2.1. 점 그리기

이 절에서는 래스터 그래픽으로 점을 그리는 이야기입니다. 프레임 버퍼는 HTML5의 Canvas를 사용하여 실현됩니다. 다만 1dot=2px로 하는 것으로 조금 보기 쉬워지도록 하고 있습니다.

샘플 코드

session2_1.html에서

/* 共通処理 */

var canvas;
var ctx;

window.onload = function() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    main();
};

var createRgb = function(red, green, blue) {
    return "#"
        + ("0" + red.toString(16)).substr(-2)
        + ("0" + green.toString(16)).substr(-2)
        + ("0" + blue.toString(16)).substr(-2)
    ;
};

var getRandomInt = function(min, max) {
      return Math.floor( Math.random() * (max - min + 1) ) + min;
};

/* 個別処理 */

var main = function() {
    for(var i = 0; i < 100; i++) {
        x = getRandomInt(0, 319);
        y = getRandomInt(0, 199);
        red = getRandomInt(0, 255);
        green = getRandomInt(0, 255);
        blue = getRandomInt(0, 255);
        pset(x, y, createRgb(red, green, blue));
    }
}

var pset = function(x, y, rgb) {
    /* 1pxでは見づらいため、2pxとしている */
    ctx.fillStyle = rgb;
    ctx.fillRect(x * 2, y * 2, 2, 2);
};