WebGL(2D) - 입문편 - 3일째: 원 그리기
목표
원을 그리다
원 설정
study.jsvar x = 200; // 中心x座標
var y = 200; // 中心y座標
var r = 80; // 半径
WebGL 시작.
study.jsvar w = 400; // 幅
var h = 400; // 高さ
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext("webgl");
초기화
study.jsgl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
빈 버퍼 객체 생성
study.jsvar buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
바텍스 (정점) 셰이더
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);
단편 셰이더
중심 좌표와 반경으로 설정한 좌표에만 색을 바른다.
study.js
var x = 200; // 中心x座標
var y = 200; // 中心y座標
var r = 80; // 半径
WebGL 시작.
study.jsvar w = 400; // 幅
var h = 400; // 高さ
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext("webgl");
초기화
study.jsgl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
빈 버퍼 객체 생성
study.jsvar buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
바텍스 (정점) 셰이더
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);
단편 셰이더
중심 좌표와 반경으로 설정한 좌표에만 색을 바른다.
var w = 400; // 幅
var h = 400; // 高さ
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext("webgl");
study.js
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
빈 버퍼 객체 생성
study.jsvar buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
바텍스 (정점) 셰이더
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);
단편 셰이더
중심 좌표와 반경으로 설정한 좌표에만 색을 바른다.
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
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);
단편 셰이더
중심 좌표와 반경으로 설정한 좌표에만 색을 바른다.
yoya 메모
study.js
var rgba = [0.0, 0.0, 0.0, 1.0]; // Red, Green, Blue, Alpha
var fSource = [
"precision mediump float;",
"void main(void) {",
"vec3 p = vec3("+ x +", "+ (h - y) +", "+ r +");",
"float x = gl_FragCoord.x - p[0];",
"float y = gl_FragCoord.y - p[1];",
"if (sqrt(x * x + y * y) < p[2]) {",
"gl_FragColor = vec4("+ rgba.join(",") +");",
"} else {",
"discard;",
"}",
"}"
].join("\n");
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fSource);
gl.compileShader(fShader);
gl.getShaderParameter(fShader, gl.COMPILE_STATUS);
프로그램 객체 생성
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);
셰이더 측 변수를 js 측에서 수신
study.jsvar vertex = gl.getAttribLocation(program, "vertex");
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
4점의 좌표를 세트
study.jsvar x1 = x - r;
var y1 = y - r;
var x2 = x + r;
var y2 = y - r;
var x3 = x - r;
var y3 = y + r;
var x4 = x + r;
var y4 = y + r;
var vertices = [
(x1-(w/2))/(w/2), -(y1-(h/2))/(h/2),
(x2-(w/2))/(w/2), -(y2-(h/2))/(h/2),
(x3-(w/2))/(w/2), -(y3-(h/2))/(h/2),
(x4-(w/2))/(w/2), -(y4-(h/2))/(h/2)
];
그리기
study.jsgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length/2);
비망록
WebGLStudy
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 3일째: 원 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ienaga/items/3263a752da3287a6c4b6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
study.js
var vertex = gl.getAttribLocation(program, "vertex");
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
4점의 좌표를 세트
study.jsvar x1 = x - r;
var y1 = y - r;
var x2 = x + r;
var y2 = y - r;
var x3 = x - r;
var y3 = y + r;
var x4 = x + r;
var y4 = y + r;
var vertices = [
(x1-(w/2))/(w/2), -(y1-(h/2))/(h/2),
(x2-(w/2))/(w/2), -(y2-(h/2))/(h/2),
(x3-(w/2))/(w/2), -(y3-(h/2))/(h/2),
(x4-(w/2))/(w/2), -(y4-(h/2))/(h/2)
];
그리기
study.jsgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length/2);
비망록
WebGLStudy
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 3일째: 원 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ienaga/items/3263a752da3287a6c4b6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var x1 = x - r;
var y1 = y - r;
var x2 = x + r;
var y2 = y - r;
var x3 = x - r;
var y3 = y + r;
var x4 = x + r;
var y4 = y + r;
var vertices = [
(x1-(w/2))/(w/2), -(y1-(h/2))/(h/2),
(x2-(w/2))/(w/2), -(y2-(h/2))/(h/2),
(x3-(w/2))/(w/2), -(y3-(h/2))/(h/2),
(x4-(w/2))/(w/2), -(y4-(h/2))/(h/2)
];
study.js
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length/2);
비망록
WebGLStudy
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 3일째: 원 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ienaga/items/3263a752da3287a6c4b6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(WebGL(2D) - 입문편 - 3일째: 원 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ienaga/items/3263a752da3287a6c4b6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)