WebGL－02.窗口自适应

最新推荐文章于 2024-03-21 17:10:33 发布

sun zi chao

最新推荐文章于 2024-03-21 17:10:33 发布

阅读量220

点赞数

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

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

版权

ＷebGL 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本教程介绍了如何使用WebGL开发三维图形程序，强调了在窗口大小改变时需要重新初始化WebGL以调整视口，同时提到了资源丢失问题。示例代码展示了如何响应窗口resize事件，并改变canvas的尺寸和视口设置。

摘要由CSDN通过智能技术生成

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

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

canvas.width = newWidth;
canvas.height = newHieght;

这只是HTML5里简单的修改canvas大小。在WebGL里除了canvas的大小要改变。WebGL的视口也要改变。下面我们修改webgl.htm程序，让canvas随着窗口大小的变化而动态改变大小。这里主要加入window.onresize事件。当屏幕大小发生改变时执行。

window.onresize = function()
{
   init_webgl();
}

程序的意思很简单，当屏幕大小改变时，则重新初始化WebGL，为什么要重新初始化，而不是直接改变大小就可以呢。用过Opengl的都知道。这里协及一个资源丢失的问题。这个以后再讲。这里就不细讲了。下面我们来看下完整的程序。

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<title>WebGL_02:自动适应窗口大小</title>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    
<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 = document.body.clientWidth/2;
  canvas.height = 300;
    
  //设置视口大小
  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);
}
    
//窗口大小发生改变
window.onresize = function()
{
    init_webgl();
}
    
</script>
</head>
<body>
<center>
<div>
<canvas id='webGL' width='600' height='400' style='border:1px solid #000000;'>
<b>浏览器不支持WebGL.</b>
</canvas>
</div>
<div><button onclick='init_webgl();'>初始化WebGL</button></div>
</center>
</body>
</html>

这个程序很简单，canvas的大小是窗口宽度的一半。这里主要说下viewport这个函数，这个是GL的视口设置函数，设置渲染区大小，一般大小和canvas一样，也可以不一样。比如要保证渲染视角比例时，可以限定viewport的大小，不随canvas变化。但通常都是一样的。