【HTML】WebGL에서 우선 직선을 그린다【WebGL/2D】

12513 단어 HTML5WebGL
WebGL에서 2D 우선 선을 그리는 샘플입니다.
원형으로 움직입니다.
라이브러리가 필요하지 않습니다.
IE11, Edge, Chrome에서 동작 확인되었습니다.
넷에 있는 샘플을 변경한 것은 프로그램의 엔트리 포인트 정도입니다.
document.addEventListener('DOMContentLoaded',function() {//실제 여기에서 프로그램이 움직이는});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>webgl2d sample</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById("canvas");
    canvas.width = 500;
    canvas.height = 500;
    var gl = canvas.getContext("webgl") || canvas.getContext('experimental-webgl');
    gl.clearColor(1.0, 0.0, 1.0, 1.0); //Red,Green,Blue,Alpha
    gl.clear(gl.COLOR_BUFFER_BIT);

    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 vertices = [
        -1 , 0, //x,y
        1 , 0 //x,y
    ];
    var verticesNum = vertices.length / 2;

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
    gl.drawArrays(gl.LINE_LOOP, 0, verticesNum);
});

</script>
</head>
<body style="text-align: center; width: 100%; height: 100%;">
<canvas id="canvas"></canvas>
</body>
</html>

이런 식으로 표시되어야합니다.
AWS S3 -- CLI로 버킷 の中身を全て DL 가능
파이썬 | 간단한 스택 클래스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage