WebGL Context上下文

最新推荐文章于 2024-07-12 15:22:46 发布
最新推荐文章于 2024-07-12 15:22:46 发布
阅读量1k 收藏 2
点赞数
分类专栏： WebGL 文章标签： WebGL
原文链接：https://www.yiibai.com/webgl/webgl_context.html
版权

要编写一个WebGL的应用程序，第一步是让WebGL渲染上下文 - Context 对象。这个对象与 WebGL 绘制缓冲区进行交互，可以调用所有WebGL的方法。执行以下操作来获取WebGL的上下文-

	创建HTML5 canvas
	
	获取画布 canvas 的 ID

	获取WebGL

创建HTML5 canvas元素

我们知道，建立一个HTML5 canvas 元素 -

	在HTML5主体内写入canvas语句声明
	
	给定 canvas 一个ID
	
    使用高度和宽度(height & width)属性(可选)更改画布尺寸

示例

下面的例子说明如何创建一个 canvas 元素。创建了一个边框使用 CSS 可视性画布的尺寸(500×500)。复制并粘贴到下面的代码到 my_canvas.html 文件。

<!DOCTYPE HTML>
<html>
   <head>
      <title>Canvas示例  -www.yiibai.com</title
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
	
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
   
</html>

在这里插入图片描述

获取WebGL的绘图上下文
为了得到 WebGLRenderingContext 对象(或图形的WebGL上下文对象或只在WebGL的情况下)，调用当前 HTMLCanvasElement 的getContext()方法。getContext()的语法如下 -
canvas.getContext(contextType, contextAttributes);
通过 WebGL字符串或experimental-webgl 作为 contentType。contextAttributes参数是可选的。 (虽然在进行这一步，请确保您的浏览器实现了WebGL 1.0版本(OpenGL ES 2.0))。
下面的代码片段展示了如何获取WebGL的渲染上下文。在这里，gl是参考变量所获得的上下文对象。

         var canvas = document.getElementById('my_Canvas');
         var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

在这里插入图片描述

下面的代码片段展示了如何创建一个WebGL的上下文模板缓存，这将不执行抗锯齿

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

在创建 WebGLRenderingContext 的时候，一个绘图缓冲器被创建。上下文对象管理OpenGL 状态，并呈现到图形缓冲区。

WebGLRenderingContext

它是 WebGL 的主要接口。它表示 WebGL 绘图上下文。该接口包含了所有用于在绘图缓冲执行各种任务的方法。此接口的属性给出在下表中。
在这里插入图片描述

心若成梦
关注
专栏目录
WebGL入门（032）：WEBGL_lose_context 简介、使用方法、示例代码
大剑师兰特的GIS世界
09-06 1204
在WebGL中，`WEBGL_lose_context`扩展提供了一种机制来模拟WebGL上下文丢失的情况。这对于测试WebGL应用程序在上下文丢失时的行为非常有用，因为真实世界中的上下文丢失可能由于多种原因发生，例如浏览器崩溃、GPU过热、驱动程序错误等。
WebGL入门（022）：WebGL2RenderingContext 简介、使用方法、示例代码
最新发布
大剑师兰特的GIS世界
09-01 878
`WebGL2RenderingContext`是WebGL 2 API的核心接口，它继承自`WebGLRenderingContext`，并且添加了许多新的功能和改进，包括但不限于对顶点数组对象的支持、更多的着色器类型、更多的纹理格式、增强的混合功能等。
webgl-context:在浏览器中获取WebGL上下文
05-31
webgl-上下文 获取一个 WebGLRenderingContext，如果它不存在则返回 null。 类似于 。 //get a webgl context, will be null if not found var gl = require ( 'webgl-context' ) ( ) if ( gl ) { document . body . appendChild ( gl . canvas ) //do something... } 或者，带有选项： //or with optional settings... var gl = require ( 'webgl-context' ) ( { canvas : canvas , //the canvas DOM element to use width : 400 , //resi
WebGL 上下文(Context)
whl0071的专栏
12-09 681
WebGL 上下文(Context)怎么获取
Cornerstone3D导致浏览器崩溃的踩坑记录
bug处理进行时
07-12 1307
WebGL: CONTEXT_LOST_WEBGL: Context: context lost；Cornerstone3D渲染Volume时导致windows 浏览器页面崩溃的处理方案及问题复盘记录
Javascript高级编程学习笔记（97）—— WebGL(3) WebGL上下文(1)
dazhongshuo1167的博客
04-24 284
WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 "webgl" 如果浏览器不支持,那么在获取webgl上下文的时候浏览器会返回 null 所以在使用前需要检测返回值 基本的获取 WebGL 代码如下: let drawing = documen...
WebGL context lost
lemon
03-07 3972
1.版本 cocos creator 3.4.1 win7 2.问题 启动或者编辑的时候经常场景编辑器会什么都不显示，然后控制台出现一堆红色的莫名其妙的错误，后面还有两段警告信息： 3.解决 cocos dashboard的设置里面，启动选项添加**–disable-gpu**。 据引擎开发组的人说是win7的兼容问题，导致WebGl上下文丢失。 4.其他常见问题 4.1 启动遇到 /private/xxx 相关的权限报错 这种问题一般是 mac 的沙盒机制将 app 隔离了，一般出现在直接复制 app
webgl 上下文丢失
书读百遍，其义自见
08-11 252
webgl上下文丢失
kiwi.fusion:一个虚拟的webgl运行上下文，可以将第三个webgl库gl命令混合在一起，包括three.js，claygl等
04-29
一个虚拟的webgl运行上下文，可以将webgl库的gl命令与第三种混合在一起，包括 ， 等。 例子 安装 npm install kiwi . gl 或者 npm install --save-dev kiwi.gl 例子 获取htmlelement的webgl上下文 //get ...
cef中运行webgl报错creating webgl context
07-02
在Chromium Embedded Framework (CEF)中，WebGL 是一种用于在网页上渲染 3D 图形的技术，但它可能会遇到一些问题，特别是当创建 WebGL 上下文（context）时出错，报错 "creating WebGL context"。这种情况通常发生在...
cesium 解决 WebGLRenderingContext 丢失问题
纯爱枫若情的博客
11-29 6567
通常来说，对于大多数使用场景，页面上只需要创建一个 cesium 的 viewer 就够用了。 ​ 但是架不住，某些情况下，会需要多个 viewer 的存在。 ​ 了解 cesium 的童鞋应该知道，一般情况下，一个 viewer 对应着一个 webgl context，如果有多个就会存在多个 WebGLRenderingContext。 ​ 如果还不了解 WebGLRenderingContext 是什么的童鞋，建议去了解学习下 webgl 相关的知识，下面送上学习链接：https://develope
WebGPU 规范篇 11 Canvas上下文
树后树前
02-09 294
系列博客总目录：https://blog.csdn.net/cRGBc/article/details/120412614 文章目录1 GPUCanvasContext2 GPUCanvasConfiguration 类型举例GPUCanvasCompositingAlphaMode 枚举类型3 Canvas 尺寸变更问题 对应规范中 Canvas Rendering 一章 1 GPUCanvasContext GPUCanvasContext 类型，其对象被称作 WebGPU 上下文。 它的作用就是让
webGL学习——context对象获取及初始化（一）
pgLi
04-26 2795
1、webGL介绍 WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复...
苹果IOS系统webglcontextlost问题-解决方案
苍老师背后的男人
11-03 1446
1.TypeError: Argument 1 ('shader') to WebGLRenderingContext.shader Source must be an instance of WebGLShader 2.gl.createShader(x)返回结果变为 null
WebGL 响应上下文丢失解决方案
dabaooooq的博客
10-05 1737
WebGL使用了计算机的图形硬件，而这部分资源是被操作系统管理，由包括浏览器在内的多个应用程序共享。在某些特殊情况下，如另一个程序接管了图形硬件，或者操作系统进入休眠，浏览器就会失去使用这些资源的权利，并导致存储在硬件中的数据丢失。在这种情况下，WebGL绘图上下文就会丢失。比如，如果你正在一台笔记本电脑或智能手机上运行WebGL程序，如下图（左）所示，然后使其进入休眠状态，通常此时浏览器的控制台会显示一条错误新消息。当你将电脑或手机重新唤醒后，操作系统确实回到了休眠前的状态，但是浏览器中运行的WebGL程
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
点燃火柴的博客
05-23 6998
WebGL上下文丢失事件与上下文恢复事件处理1. demo效果2. 相关知识点2.1 上下文丢失介绍2.2 WebGL提供的响应事件2.3 响应事件处理2.3.1 响应事件注册2.3.2 响应事件实现说明3. demo代码 1. demo效果 2. 相关知识点 2.1 上下文丢失介绍 WebGL 绘图时会使用计算机的图形处理硬件，这部分资源被操作系统统一管理，由浏览器在内的多个应用程序共享，当系统进入休眠状态或一些特殊情况下，浏览器会失去使用这些资源的权利，会导致存贮在硬件中的数据丢失，这时WebGL会出
56 WebGL处理响应上下文丢失
热门推荐
现在学习也不晚
07-02 1万+
这将是WebGL基础的最后一节的更新，以后请关注three.js框架的相关学习的更新。案例查看地址：点击这里WebGL使用了计算机的图形硬件，而这部分资源是被操作系统管理，由包括浏览器在内的多个应用程序共享。在某些特殊情况下，入另一个程序接管了图形硬件，或者操作系统进入休眠，浏览器就会失去使用这些资源的权利，并导致存储在硬件中的数据丢失。在这种情况下，WebGL绘图上下文就会丢失，比如，如果你正在...
WebGL：与浏览器脚本交互
12-07 374
WebGL：与浏览器脚本交互
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值