BRLホームページのデータについて
白USB：\210111BRL_HP
白USB：\@@
白USB：\pl
d:\ACCS
190619BRLホーム
canvas ３題
１．左('yourCanvas')
全てindex.htmlの中で完結
sample 関数を、ヘッダーの中で定義
でロード時に起動
２．中（'ourCanvas')
tableS.jsの中で定義
インクルードされた時点で、
document.addEventListener('DOMContentLoaded',function(event){ });
で実行。処理内容は、直接定義
３．右（'myCanvas')
tableS.jsの中で定義
インクルードされた時点で、
window.addEventListener('DOMContentLoaded',init);
で実行。処理内容は、init()関数の中で定義
１の処理内容
function sample(){
var canvas=document.getElementById('yourCanvas');
if(canvas.getContext){
var context=canvas.getContext('2d');
context.fillRect(4,8,10,20);
context.strokeStyle='rgb(00,00,255)';
context.fillStyle='rgb(00,255,00)';
context.strokeRect(30,20,20,10);
context.arc(30,45,12,Math.PI*1,Math.PI*2,true);
context.fill();
}
}
２の処理内容
//関数定義
function getWebGL(){
var canvas = document.getElementById('ourCanvas');
// var canvas = document.querySelector("#canvas");
var webgl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if(!webgl || !(webgl instanceof WebGLRenderingContext)){
return false;
}
return webgl;
}
/**
* Creates the vertex buffer, binds it, passes the vortex data to it,
* and sets the color.
*/
function initWebGL(webgl, vortexes){
var vertexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, vertexBuffer);
webgl.bufferData(
webgl.ARRAY_BUFFER,
new Float32Array(vortexes),
webgl.STATIC_DRAW
);
webgl.clearColor(0, 0.5, 0.5, 0.9);
webgl.clear(webgl.COLOR_BUFFER_BIT);
}
/**
* Creates the vertex shader object from the source code defined in
* 2_vertex_shader.js.
*/
function createVertexShader(){
var vertexShader = webgl.createShader(webgl.VERTEX_SHADER);
webgl.shaderSource(vertexShader, vertexCode);
webgl.compileShader(vertexShader);
return vertexShader;
}
/**
* Creates the fragment shader object from the source code defined in
* 2_vertex_shader.js.
*/
function createFragmentShader(){
var fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(fragmentShader, fragmentCode);
webgl.compileShader(fragmentShader);
return fragmentShader;
}
/**
* Create and attach eht shader programs from the shader compiled objects.
*/
function createShaderProgram(webgl, vertexShader, fragmentShader){
var shaderProgram = webgl.createProgram();
webgl.attachShader(shaderProgram, vertexShader);
webgl.attachShader(shaderProgram, fragmentShader);
webgl.linkProgram(shaderProgram);
webgl.useProgram(shaderProgram);
return shaderProgram;
}
/**
* Gets and sets the coordinates associating the compiled shader pgograms
* to buffer objects.
*/
function transformCoordinatesAndSet(webgl, shaderProgram){
var coordinates = webgl.getAttribLocation(
shaderProgram,
'coordinates'
);
webgl.vertexAttribPointer(
coordinates,
2,
webgl.FLOAT,
false,
0,
0
);
webgl.enableVertexAttribArray(coordinates);
}
/**
* Draws the arrays.
*/
function drawArrays(webgl){
webgl.drawArrays(webgl.TRIANGLES, 0, 3);
}
//本体
var vortexes = [0.8, 0.0, 0.0, 1, 1, 0.8];
webgl = getWebGL();
if(webgl){
initWebGL(webgl, vortexes);
var vertexShader = createVertexShader();
var fragmentShader = createFragmentShader();
var shaderProgram = createShaderProgram(webgl, vertexShader, fragmentShader);
transformCoordinatesAndSet(webgl, shaderProgram);
drawArrays(webgl);
}
３．three.js で定義された関数を参照している。
function init(){
// const width = 900;
// const height = 540;
const width = 60;
const height = 60;//過大にすると桝が縦長になる
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, 1, 10000);
camera.position.set(0,0,+1000);
const geometry = new THREE.BoxGeometry(500,500,500);
const material = new THREE.MeshStandardMaterial({ color: 0x0000ff });
const box = new THREE.Mesh(geometry, material);
scene.add(box);
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.intensity = 2;
directionalLight.position.set(1,1,1);
scene.add(directionalLight);
tick();
function tick(){
requestAnimationFrame(tick);
box.rotation.x += 0.01;
box.rotation.y += 0.01;
renderer.render(scene, camera);
}
}
'DOMContentLoaded'
HTML5で定義
DOMツリーの構築が完了したことを判定する
但し、scriptの実行を待つ（例えばdocument.writeの結果）
scriptはstylesheetの解析を待つ
HTMLコンテンツがロードされ、そこから参照される画像などがロードされる前のタイミングで
実行したい処理を記述する方法として、
(1)
(2)
(3) の直前に
window と document のどちらにも登録することができる。
'load'は画像含め全てがロードされた後に発火
windowに対してのみ登録でき、documentには登録できない。
window.addEventListener('load',…)
画像を含む
●描画処理