WebGL(2D) - 입문편 - 1일차: 선 그리기
비망록도 겸해, 투고해 나가려고 생각합니다.
목표
WebGL(2D)로 선을 그립니다.
HTML
index.html에 canvas를 설정합니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="study.js"></script>
<title>WebGL Study</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
WebGL 시작.
study.js// canvas
var w = 400;
var h = 400;
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext("webgl");
좋아.
이제 WebGL을 사용할 수 있습니다! !
초기화
study.js// clear
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
좌표 세트
canvas에서는 0.0, 0.0 가 좌상이었던 것에 대해 webgl의 좌상의 지점은 -1.0, 1.0 가 된다.
canvas에서는 높이와 가로폭이 지정한 px였지만 webgl은 모두 -1.0에서 1.0의 폭으로 고정된다.
높이와 너비는 실제 px에서 계산하고 계산해야합니다 orz
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
그리기 전에 다양한 절차가 필요합니다.
1 - 빈 버퍼 객체 생성
study.jsvar buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
2 - 버텍스 (정점) 셰이더
study.jsvar 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);
3 - 조각 셰이더
study.jsvar 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);
4 - 프로그램 객체 생성
study.jsvar program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
5 - 셰이더 측 변수를 js 측에서 수신
study.jsvar vertex = gl.getAttribLocation(program, "vertex");
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
6 - 좌표 설정
중심점에서 맨 오른쪽 위 지점을 설정
(이번에는 2D이므로 x와 y만으로 그리기)
study.js// 開始座標
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)
];
7 - 그리기
study.jsgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.LINE_STRIP, 0, vertices.length/2);
직선을 쓰는 것인데, 이렇게 코드를 쓰지 않으면 안되는지 orz
하지만 제대로 그려지면 재미 있습니다.
비망록
WebGLStudy
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 1일차: 선 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ienaga/items/9f85d127c175bfca0cae
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
index.html에 canvas를 설정합니다.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="study.js"></script>
<title>WebGL Study</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
WebGL 시작.
study.js// canvas
var w = 400;
var h = 400;
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext("webgl");
좋아.
이제 WebGL을 사용할 수 있습니다! !
초기화
study.js// clear
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
좌표 세트
canvas에서는 0.0, 0.0 가 좌상이었던 것에 대해 webgl의 좌상의 지점은 -1.0, 1.0 가 된다.
canvas에서는 높이와 가로폭이 지정한 px였지만 webgl은 모두 -1.0에서 1.0의 폭으로 고정된다.
높이와 너비는 실제 px에서 계산하고 계산해야합니다 orz
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
그리기 전에 다양한 절차가 필요합니다.
1 - 빈 버퍼 객체 생성
study.jsvar buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
2 - 버텍스 (정점) 셰이더
study.jsvar 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);
3 - 조각 셰이더
study.jsvar 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);
4 - 프로그램 객체 생성
study.jsvar program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
5 - 셰이더 측 변수를 js 측에서 수신
study.jsvar vertex = gl.getAttribLocation(program, "vertex");
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
6 - 좌표 설정
중심점에서 맨 오른쪽 위 지점을 설정
(이번에는 2D이므로 x와 y만으로 그리기)
study.js// 開始座標
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)
];
7 - 그리기
study.jsgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.LINE_STRIP, 0, vertices.length/2);
직선을 쓰는 것인데, 이렇게 코드를 쓰지 않으면 안되는지 orz
하지만 제대로 그려지면 재미 있습니다.
비망록
WebGLStudy
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 1일차: 선 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ienaga/items/9f85d127c175bfca0cae
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// canvas
var w = 400;
var h = 400;
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext("webgl");
study.js
// clear
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
좌표 세트
canvas에서는 0.0, 0.0 가 좌상이었던 것에 대해 webgl의 좌상의 지점은 -1.0, 1.0 가 된다.
canvas에서는 높이와 가로폭이 지정한 px였지만 webgl은 모두 -1.0에서 1.0의 폭으로 고정된다.
높이와 너비는 실제 px에서 계산하고 계산해야합니다 orz
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
그리기 전에 다양한 절차가 필요합니다.
1 - 빈 버퍼 객체 생성
study.jsvar buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
2 - 버텍스 (정점) 셰이더
study.jsvar 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);
3 - 조각 셰이더
study.jsvar 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);
4 - 프로그램 객체 생성
study.jsvar program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
5 - 셰이더 측 변수를 js 측에서 수신
study.jsvar vertex = gl.getAttribLocation(program, "vertex");
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
6 - 좌표 설정
중심점에서 맨 오른쪽 위 지점을 설정
(이번에는 2D이므로 x와 y만으로 그리기)
study.js// 開始座標
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)
];
7 - 그리기
study.jsgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.LINE_STRIP, 0, vertices.length/2);
직선을 쓰는 것인데, 이렇게 코드를 쓰지 않으면 안되는지 orz
하지만 제대로 그려지면 재미 있습니다.
비망록
WebGLStudy
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 1일차: 선 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ienaga/items/9f85d127c175bfca0cae
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
1 - 빈 버퍼 객체 생성
study.js
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
2 - 버텍스 (정점) 셰이더
study.js
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);
3 - 조각 셰이더
study.js
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);
4 - 프로그램 객체 생성
study.js
var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
5 - 셰이더 측 변수를 js 측에서 수신
study.js
var vertex = gl.getAttribLocation(program, "vertex");
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
6 - 좌표 설정
중심점에서 맨 오른쪽 위 지점을 설정
(이번에는 2D이므로 x와 y만으로 그리기)
study.js
// 開始座標
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)
];
7 - 그리기
study.js
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.LINE_STRIP, 0, vertices.length/2);
직선을 쓰는 것인데, 이렇게 코드를 쓰지 않으면 안되는지 orz
하지만 제대로 그려지면 재미 있습니다.
비망록
WebGLStudy
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 1일차: 선 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ienaga/items/9f85d127c175bfca0cae
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 1일차: 선 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ienaga/items/9f85d127c175bfca0cae텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
