WebGL-第一个WebGL程序

最新推荐文章于 2022-02-22 22:29:42 发布
最新推荐文章于 2022-02-22 22:29:42 发布
阅读量235 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytuyzh/article/details/104930199
版权

 HTML:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>canvas</title>
 </head>


 <body onload="main()">
 <canvas id="webgl" width="500" height="500"
style="border:1px solid #000000;">
 Please use a browser that supports "canvas"

 </canvas>
 <script src="../lib/webgl-utils.js"></script>
 <script src="../lib/webgl-debug.js"></script>
 <script src="../lib/cuon-utils.js"></script>
 <script src="HelloCanvas.js"></script>
 </body>
</html>

 JS:

function main() {
//获取canvas元素
 var canvas = document.getElementById('webgl');

//获取WevGL绘图上下文
 var gl = getWebGLContext(canvas);

//判断时候获得画笔，不成功则报错
 if (!gl) {
 console.log('Failed to get the rendering context for WebGL');
 return;
 }

//指定清空颜色
 gl.clearColor(0.5, 0.2, 0.3, 1.0);

//清空<canvas>
 gl.clear(gl.COLOR_BUFFER_BIT);
}

运行结果： 

 

coderyzh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
01：WebGL简介、示例、应用场景
大剑师兰特的GIS世界
06-12 1329
WebGL（Web Graphics Library）是一种开放标准的API，用于在Web浏览器中渲染交互式的3D和2D图形，无需任何插件。它基于OpenGL ES 2.0规范，并使用JavaScript作为接口，允许开发者直接利用GPU的硬件加速功能。WebGL通过HTML5的元素来获取上下文，并使用GLSL ES（OpenGL Shading Language for Embedded Systems）来编写着色器程序。
WebGL---1.第一个三角形
WADE
09-17 579
最近无意中接触到WebGL，之前上半年学了一些opengl方面的知识，但知识这东西就是这样只有温故才能知新，打算正好借助学习WebGL来复习一下opengl方面的知识，顺便比较两者之间的区别。 一、获取WebGL上下文 一般都把WebGL上下文对象命名为gl。这样做也可以保证 JavaScript 代码与 OpenGL 程序更相近。取得了 WebGL 上下文之后，就可以开始 3D 绘图...
一起来玩玩WebGL--第一弹
热门推荐
音视频开发进阶
11-16 1万+
文末福利：开发者藏经阁NO.1序上一篇文章说到我从客户端转前端的历程，短短一年的时间就打开了前端世界的大门，简直就是有无穷多的东西可玩，以前酷爱Java的我终于见识到什么都可以写的Jav...
WebGL 入门-第一个WebGL程序
xinyuan82的博客
12-21
在开始使用Three.js前，请确保你已经引用了three.js到你的HTML文件中: <!DOCTYPE html> <head> <title>我的第一个WebGL程序</title> <style>canvas { width: 100%; height: 100% }</style> &l...
学习笔记(01):webgl基础篇视频教程-坚如磐石-Hello webgl-第一个webgl程序
u012760270的博客
02-05 392
webgl入门视频课程从基础开始介绍webgl技术,介绍基本的webgl渲染管线,各种常用的缓冲区的作用,以及用法,结合程序实例做到全方位的讲解；精讲三维的理论,针对三维理论中的三个矩阵变换一个坐标变换深入讲解.针对webgl核心技术逐个讲解；针对可编程管线,理论结合实践,让学员深刻的体验到shader的作用；重点围绕webgl的核心技术进行实践。...
WebGL绘制一个点-第一个WebGL程序
u014291990的博客
11-08 3127
WebGL绘制一个点 通过WebGL可以渲染出来各种各样酷炫的3D效果，但是考虑到WebGL复杂性，为了大家降低初学难度，下面的代码仅仅在Canvas画布上绘制了一个点，对WebGL的整个绘图渲染流程进行了完整的演示，麻雀虽小，五脏俱全。 学习建议 本节课你不需要刻意去记忆具体知识，对于暂时不理解的小细节可以跳过，先有个整体印象即可，可以把全部代码复制到编辑器中，根据课程对相关知识模块的介绍，尝试...
WebGL学习系列-第一个程序
android开发笔记
04-24 244
前言 本篇学习第一个WebGL程序——画一个点，通过此程序来理解WebGL程序的结构，这是所有后续知识的开端。 画一个点 先看一下效果图： 为了画这么一个点，在WebGL可不太简单，它会涉及到WebGL上下文以及着色器的概念，不要着急，咱们慢慢来理解。 WebGL上下文 学过Canvas的同学应该都知道，想要在浏览器中使用Canvas画图，需要先取得一个上下文，就像创建一个场景一样，有了...
webgl gis java_WebGL-实例化绘制
weixin_35970195的博客
02-28 278
今天来学习webgl一个重要功能：Instanced Drawing(实例化绘制)，内容翻译自webgl学习网站webglfundamentals(由于英语水平尽量按原文翻译)：https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html。WebGL下个版本(WebGL2.0)有一个功能叫实例化绘制。它的基本思想是...
webgl 第一个程序
技术学习
02-22 86
目录main.htmlopengl.js main.html <!DOCTYPE html> <html> <head> <meta lang="en"> <meta charset="UTF-8"> <title>WebGL Hello World</title> <link href="style/style.css"> <script type="text/ja
webgl - 2 - js与着色器间的数据传输
weixin_38245947的博客
11-18 368
er
WebGL-Basis:我的第一个WebGL hack
05-03
这个“WebGL基础：我的第一个WebGL hack”可能是一个初学者教程，旨在引导用户了解如何在Web环境中创建交互式的3D图形。 1. **WebGL的原理**： WebGL是Web上的一个低级图形库，它直接与GPU通信，通过OpenGL ES 2.0...
WebGL学习系列-第一个程序-附件资源
03-05
WebGL学习系列-第一个程序-附件资源
webgl-realidade-aumentada:第一份激励工作
07-08
第一个工作动机：增强现实 (AR) 是一种可视化模式，其中虚拟对象与真实场景混合或匹配 [1]。 这种组合首先旨在在用户沉浸的真实环境的上下文中添加信息。 AR 中最大的问题之一是虚拟对象在真实场景图像中的对齐。 ...
WebGL-demo:学习WebGL的一些例子
05-17
1. **WebGL上下文**：在HTML5 canvas元素上创建WebGL上下文是所有WebGL程序的第一步。这允许你开始与GPU进行通信并执行图形指令。 2. **顶点着色器和片段着色器**：这两个是WebGL的核心，它们分别负责处理几何形状...
基于贝叶斯网络BO-Transformer-BiLSTM实现负荷数据回归预测附matlab代码.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
易语言 - 易语言我的世界3D源码
最新发布
07-27
易语言我的世界3D源码
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-pp310-pypy310_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
精通Three.js：WebGL的JavaScript 3D库(第2版)
在WebGL技术领域，Three.js是一个非常关键的库，它为开发者提供了一个高级接口，用于处理复杂的WebGL编程任务，使得创建交互式3D内容变得更加容易。WebGL是一种基于OpenGL标准的JavaScript API，允许在任何兼容的web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值