WebGL－03.图元绘制

最新推荐文章于 2023-08-12 10:29:31 发布

sun zi chao

最新推荐文章于 2023-08-12 10:29:31 发布

阅读量109

点赞数

分类专栏：ＷebGL 文章标签： webgl

本文链接：https://blog.csdn.net/u011145873/article/details/131432430

版权

ＷebGL 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本系列教程主要讲解利用WebGL开发网页版的三维图形程序。这里主要用到的OpenGL和FlyMath内容。本系列内容较难。要求学生对几何和编程有一定的了解。建议初三以上同学学习。

在WebGL里有画点、线、面的工具。因为WebGL是基于OpenGL ES2的，所以所有的绘制命令都要用GLSL来绘制。以前的glbegin/glend，大家就忘掉它了吧。

WebGL提供有以下图元支持

const GLenum POINTS = 0x0000;
const GLenum LINES = 0x0001;
const GLenum LINE_LOOP = 0x0002;
const GLenum LINE_STRIP = 0x0003;
const GLenum TRIANGLES = 0x0004;
const GLenum TRIANGLE_STRIP = 0x0005;
const GLenum TRIANGLE_FAN = 0x0006;

跟OpenGL差不多，去掉了Quad图元。WebGL绘制图元全是用GLSL语言来完成。因此要定义VS和PS。这两个什么东西，顶点Shader和片断Shader。不多解释。其声明定义和OpenGL里一样，先定义，再绑定。再引用。过程比较麻烦。但也好理解。就是什么数据都以数组形式放入缓冲区里备用。看程序大家都能看懂。

webgl.htm源文件

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<title>WebGL_03:绘制图元</title>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type="text/javascript" src='jquery-1.11.1.min.js' charset="utf-8"></script>
<script>
    
//初始化WebGL
function init_webgl()
{
  var canvas = document.getElementById("webGL");
  if(!canvas){
    alert("获取<Canvas>标签失败！");
    return;
  }
    
  //获取webGL统计图上下文
  var gl_context = canvas.getContext('webgl',
                { antialias:true,
                  stencil:true});
    
  if(!gl_context){
    alert("获取WebGL上下文失败！");
  }
    
  canvas.width = $("#area").width();
  canvas.height = $("#area").width()*3/5;
    
  //设置视口大小
  gl_context.viewport(0,0,canvas.width,canvas.height);
    
  //清空canvas的背景颜色
  gl_context.clearColor(0,0,0.5,1);
    
  //清空webgl颜色缓冲区里的内容
  gl_context.clear(gl_context.COLOR_BUFFER_BIT);
    
    draw_triangle(gl_context);
}
    
//绘制三角形
function draw_triangle(gl_context)
{
//定义顶点shader和片断shader
  var vs_src = "attribute vec4 a_Position;\n" +
    "void main() {\n" +
    "   gl_Position = a_Position;\n"+
    "}\n";
    
  var fs_src = "void main() {\n" +
    " gl_FragColor = vec4(1,1,0,1);\n" +
    "}\n";
    
  var vs = gl_context.createShader(gl_context.VERTEX_SHADER);
  gl_context.shaderSource(vs,vs_src);
  gl_context.compileShader(vs);
      
  if(!gl_context.getShaderParameter(vs,gl_context.COMPILE_STATUS)){
    alert(gl_context.getShaderInfoLog(vs));
    return;
    }
    
  var fs = gl_context.createShader(gl_context.FRAGMENT_SHADER);
  gl_context.shaderSource(fs,fs_src);
  gl_context.compileShader(fs);
      
  if(!gl_context.getShaderParameter(vs,gl_context.COMPILE_STATUS)){
    alert(gl_context.getShaderInfoLog(fs));
    return;
  }
  if(!gl_context.getProgramParameter(shaderProgram, gl_context.LINK_STATUS)) {
      alert("Could not initialise shaders");
  }
//加载选择的顶点和片断
  var shaderProgram = gl_context.createProgram();
  gl_context.attachShader(shaderProgram, vs);
  gl_context.attachShader(shaderProgram, fs);
  gl_context.linkProgram(shaderProgram);
    
//绑定shader中的参数变量
  var shader_pos = gl_context.getAttribLocation(shaderProgram, "a_Position");
    
  var vertices = new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
  var tri_buf = gl_context.createBuffer();
  gl_context.bindBuffer(gl_context.ARRAY_BUFFER, tri_buf);
  gl_context.bufferData(gl_context.ARRAY_BUFFER, new Float32Array(vertices), gl_context.STATIC_DRAW);
    
//使用选择的程序，激活缓冲区，渲染
  gl_context.useProgram(shaderProgram);
  gl_context.enableVertexAttribArray(shader_pos);
  gl_context.vertexAttribPointer(shader_pos, 2, gl_context.FLOAT, false, 0, 0);
        
  gl_context.drawArrays(gl_context.TRIANGLES,0,3);
}
</script>
</head>
<body>
   
<div id='area' style='width:100%;text-align:center;'>
<canvas id='webGL' width='600' height='400' style='border:1px solid #000000;'>
<b>浏览器不支持Webgl_context.</b>
</canvas>
</div>
   
</body>
<script>init_webgl();</script>
</html>

运行范例

sun zi chao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL－03.图元绘制

本系列教程主要讲解利用WebGL开发网页版的三维图形程序。这里主要用到的OpenGL和FlyMath内容。本系列内容较难。要求学生对几何和编程有一定的了解。建议初三以上同学学习。在WebGL里有画点、线、面的工具。因为WebGL是基于OpenGL ES2的，所以所有的绘制命令都要用GLSL来绘制。以前的glbegin/glend，大家就忘掉它了吧。
复制链接

扫一扫