webgl 绘制扇形区域

作者: antlove | 来源:发表于2020-06-26 21:10 被阅读0次

webgl 绘制扇形区域
简单实现扇形图表
15 使用 Canvas 绘图
TWaver3D直线、曲线、曲面的绘制
ArcGIS 4.11学习笔记之绘制扇形区域
WebGL 绘制Line的bug（一）
配色
webgl入门(一)
用Canvas绘制抽奖游戏
用线段绘制球体（three.js webgl_lines_spe

index.html

<html>
<head>
  <meta lang="en">
  <meta charset="UTF-8">
  <title>绘制扇形区域</title>
  <script src="./cuon-utils.js"></script>
  <style>
      body{
          margin:0;
      }
      canvas{
          border:1px solid #999;
      }
  </style>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>

<script src="./index.js"></script>

index.js

// 顶点着色器程序
var VSHADER_SOURCE =`
    attribute vec4 a_Position;
    void main() {
        //设置坐标
        gl_Position = a_Position; 
        //设置尺寸
        gl_PointSize = 10.0; 
    } 
`;

// 片元着色器
var FSHADER_SOURCE =`
    precision mediump float;
    uniform vec4 u_FragColor;
    void main() {
        //设置颜色
        gl_FragColor = u_FragColor;
    }
`;

// 获取canvas元素
var canvas = document.getElementById('canvas');

// 获取绘制二维上下文
var gl = canvas.getContext('webgl');

initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

var n = initVertexBuffer(gl);

var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
gl.uniform4f(u_FragColor, 0.0, 1.0, 0.0, 1.0);
gl.drawArrays(gl.POINT, 0, n);

gl.uniform4f(u_FragColor, 0.5, 0.2, 0.5, 0.5);
gl.drawArrays(gl.TRIANGLE_FAN, 0, n );


function initVertexBuffer(gl) {
    var sqrt2 = Math.sqrt(2) / 2;

    var vertices = new Float32Array([
        0.0, 0.0,
        0.5, 0.0,
        0.5 * sqrt2, 0.5 * sqrt2,
        0, 0.5,
        -0.5 * sqrt2, 0.5 * sqrt2,
        -0.5, 0.0,
        -0.5 * sqrt2, -0.5 * sqrt2,
        0.0, -0.5,
        0.5 * sqrt2, -0.5 * sqrt2,
        0.5, 0.0,
    ]);
    var size = 2;
    var pointCount = vertices.byteLength / size / Float32Array.BYTES_PER_ELEMENT;
    // 创建缓冲区
    var vertexBuffer = gl.createBuffer();
    // 将缓冲区绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    // 向缓冲区写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    // 将缓冲区对象分配给a_Position
    gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, 0, 0);
    // 激活attibue 是缓冲区对attribute变量分配生效
    gl.enableVertexAttribArray(a_Position);
    return pointCount;
}

cuon-utils.js

// cuon-utils.js (c) 2012 kanda and matsuda
/**
 * Create a program object and make current
 * @param gl GL context
 * @param vshader a vertex shader program (string)
 * @param fshader a fragment shader program (string)
 * @return true, if the program object was created and successfully made current 
 */
function initShaders(gl, vshader, fshader) {
  var program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.log('Failed to create program');
    return false;
  }

  gl.useProgram(program);
  gl.program = program;

  return true;
}

/**
 * Create the linked program object
 * @param gl GL context
 * @param vshader a vertex shader program (string)
 * @param fshader a fragment shader program (string)
 * @return created program object, or null if the creation has failed
 */
function createProgram(gl, vshader, fshader) {
  // Create shader object
  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
  if (!vertexShader || !fragmentShader) {
    return null;
  }

  // Create a program object
  var program = gl.createProgram();
  if (!program) {
    return null;
  }

  // Attach the shader objects
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  // Link the program object
  gl.linkProgram(program);

  // Check the result of linking
  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    var error = gl.getProgramInfoLog(program);
    console.log('Failed to link program: ' + error);
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
  }
  return program;
}

/**
 * Create a shader object
 * @param gl GL context
 * @param type the type of the shader object to be created
 * @param source shader program (string)
 * @return created shader object, or null if the creation has failed.
 */
function loadShader(gl, type, source) {
  // Create shader object
  var shader = gl.createShader(type);
  if (shader == null) {
    console.log('unable to create shader');
    return null;
  }

  // Set the shader program
  gl.shaderSource(shader, source);

  // Compile the shader
  gl.compileShader(shader);

  // Check the result of compilation
  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!compiled) {
    var error = gl.getShaderInfoLog(shader);
    console.log('Failed to compile shader: ' + error);
    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

/** 
 * Initialize and get the rendering for WebGL
 * @param canvas <cavnas> element
 * @param opt_debug flag to initialize the context for debugging
 * @return the rendering context for WebGL
 */
function getWebGLContext(canvas, opt_debug) {
  // Get the rendering context for WebGL
  var gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) return null;

  // if opt_debug is explicitly false, create the context for debugging
  if (arguments.length < 2 || opt_debug) {
    gl = WebGLDebugUtils.makeDebugContext(gl);
  }

  return gl;
}

image.png