webgl入门

最新推荐文章于 2024-10-17 18:12:29 发布
最新推荐文章于 2024-10-17 18:12:29 发布
阅读量193 收藏
点赞数
分类专栏： webgl 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42859887/article/details/90486860
版权

今天我也开始写博客，主要为所有想学webgl的人创建一条道路

这是第一章 入门

很多人都知道3d现在特别火热，想要在以后的潮流当中也有前进的方向，我也一样，所以希望有更多的人一起学习，进步。

这里是html的内容。

<canvas id="canvas"></canvas>

因为webgl只能识别标签，也就是他的画布，所以这个是必要的，id可以不同。如果没有canvas，那么在js里面获取上下文时会报错，当时我被坑了很久。

<body onload="main()">
    <canvas id="canvas">

    </canvas>
</body>

  1. body里面一般要调用一个mian方法来初始化画布。

js内容

function main() {
var canvas = document.getElementById(“canvas”);

if (!canvas) {
    console.log("不支持canvsa");
}

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

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

}

此时你就可以看到你的第一个webgl成果了。

在这里插入图片描述

ccc_c桑
关注
专栏目录
WebGL系列教程：WebGL入门
xiangzhihong8的专栏
07-25 1241
WebGL(全写 Web Graphics Library)是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑 定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统 显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。
《WebGL编程指南》源码
04-12
本资源为《WebGL编程指南》一书的源码。
webgl编程指南（谢光磊译）源码
02-02
Webgl Programming Guide source webgl编程指南（谢光磊 译）所有源码。
WebGL编程指南示例源码（ WebGL Programming Guide）
07-20
WebGL编程指南示例源码（ WebGL Programming Guide）
WebGL编程指南源码.zip
04-12
很多骗子的链接是假的 这个绝对是真的 https://sites.google.com/site/webglbook/ This book covers the WebGL 1.0 API along with all related JavaScript functions. You will learn how HTML, JavaScript, and WebGL are related, how to set up and run WebGL applications, and how to incorporate sophisticated 3D program “shaders” under the control of JavaScript. The book details how to write vertex and fragment shaders, how to implement advanced rendering techniques such as per-pixel lighting and shadowing, and basic interaction techniques such as selecting 3D objects. Each chapter develops a number of working, fully functional WebGL applications and explains key WebGL features through these examples. After finishing the book, you will be ready to write WebGL applications that fully harness the programmable power of web browsers and the underlying graphics hardware. Book examples by chapter
WebGL入门指南源代码
04-13
《WebGL编程指南》《WebGL Programming Guide》的源代码，包含书中每一章的教程的源代码，以及书中所需要的4个js文件，以及所有的贴图文件。
WebGL入门
qq_34754747的博客
04-09 678
WebGL采用HTML5中新引入的元素（标签），它定义了网页上的绘图区域。
WebGL 入门
liubangbo的专栏
07-06 3767
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
WebGL编程指南 - WebGL入门
最新发布
zaizai1007的博客
10-17 1217
入门
webgl编程指南及源码1/2
05-08
文件太大，分割成两个文件了。 原书名：WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL) 原出版社： Addison-Wesley Professional 作者： (美)Kouichi Matsuda Rodger Lea(松田浩一，罗杰.李) 译者： 谢光磊 出版社：电子工业出版社 ISBN：9787121229428 上架时间：2014-6-11 出版日期：2014 年6月 开本：16开 页码：470 版次：1-1 ---------------------------------------- 目录 《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结 7 第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件（HelloCanvas.html） 16 JavaScript 程序（HelloCanvas.js） 17 用示例程序做实验 22 绘制一个点（版本1） 22 HelloPoint1.html 24 HelloPoint1.js 24 着色器是什么？ 25 使用着色器的WebGL 程序的结构 27 初始化着色器 29 顶点着色器 31 片元着色器 33 绘制操作 34 WebGL 坐标系统 35 用示例程序做实验 37 绘制一个点（版本2） 38 使用attribute 变量 38 示例程序（HelloPoint2.js） 39 获取attribute 变量的存储位置 41 向attribute 变量赋值 42 gl.vertexAttrib3f() 的同族函数 44 用示例程序做实验 45 通过鼠标点击绘点 46 示例程序（ClickedPoints.js） 47 注册事件响应函数 48 响应鼠标点击事件 50 用示例程序做实验 53 改变点的颜色 55 示例程序（ColoredPoints.js） 56 uniform 变量 58 获取uniform 变量的存储地址 59 向uniform 变量赋值 60 gl.uniform4f() 的同族函数 61 总结 62 第3 章 绘制和变换三角形 63 绘制多个点 64 示例程序（MultiPoint.js） 66 使用缓冲区对象 69 创建缓冲区对象（gl.createBuffer()） 70 绑定缓冲区（gl.bindBuffer()） 71 向缓冲区对象中写入数据（gl.bufferData()） 72 类型化数组 74 将缓冲区对象分配给attribute 变量（gl.vertexAttribPointer()） 75 开启attribute 变量（gl.enableVertexAttribArray()） 77 gl.drawArrays() 的第2 个和第3 个参数 78 用示例程序做实验 79 Hello Triangle 80 示例程序（HelloTriangle.js） 80 基本图形 82 用示例程序做实验 83 Hello Rectangle（HelloQuad） 84 用示例程序做实验 85 移动、旋转和缩放 86 平移 87 示例程序（TranslatedTriangle.js） 88 旋转 91 示例程序（RotatedTriangle.js） 93 变换矩阵：旋转 97 变换矩阵：平移 100 4×4 的旋转矩阵 101 示例程序（RotatedTriangle_Matrix.js） 102 平移：相同的策略 105 变换矩阵：缩放 106 总结 108 第4 章 高级变换与动画基础 109 平移，然后旋转 109 矩阵变换库：cuon-matrix.js 110 示例程序（RotatedTriangle_Matrix4.js） 111 复合变换 113 示例程序（RotatedTranslatedTriangle.js） 115 用示例程序做实验 117 动画 118 动画基础 119 示例程序（RotatingTriangle.js） 119 反复调用绘制函数（tick()） 123 按照指定的旋转角度绘制三角形（draw()） 123 请求再次被调用（requestAnimationFrame()） 125 更新旋转角（animate()） .126 用示例程序做实验 128 总结 130 第5 章 颜色与纹理 131 将非坐标数据传入顶点着色器 131 示例程序（MultiAttributeSize.js） 133 创建多个缓冲区对象 134 gl.vertexAttribPointer() 的步进和偏移参数 135 示例程序（MultiAttributeSize_Interleaved.js） 136 修改颜色（varying 变量） 140 示例程序（MultiAttributeColor.js） 141 用示例程序做实验 144 彩色三角形（ColoredTriangle.js） 145 几何形状的装配和光栅化 145 调用片元着色器 149 用示例程序做实验 149 varying 变量的作用和内插过程 151 在矩形表面贴上图像 153 纹理坐标 156 将纹理图像粘贴到几何图形上 156 示例程序（TexturedQuad.js） 157 设置纹理坐标（initVertexBuffers()） 160 配置和加载纹理（initTextures()） 160 为WebGL 配置纹理（loadTexture()） 164 图像Y 轴反转 164 激活纹理单元（gl.activeTexture()） 165 绑定纹理对象（gl.bindTexture()） 166 配置纹理对象的参数（gl.texParameteri()） 168 将纹理图像分配给纹理对象（gl.texImage2D()） 171 将纹理单元传递给片元着色器（gl.uniform1i()） 173 从顶点着色器向片元着色器传输纹理坐标 174 在片元着色器中获取纹理像素颜色（texture2D()） 174 用示例程序做试验 175 使用多幅纹理 177 示例程序（MultiTexture.js） 178 总结 183 第6 章 OpenGL ES 着色器语言（GLSL ES） 185 回顾：基本着色器代码 186 GLSL ES 概述 186 你好，着色器！ 187 基础 187 执行次序 187 注释 187 数据值类型（数值和布尔值） 188 变量 188 GLSL ES 是强类型语言 189 基本类型 189 赋值和类型转换 190 运算符 191 矢量和矩阵 192 赋值和构造 193 访问元素 195 运算符 197 结构体 200 赋值和构造 200 访问成员 200 运算符 201 数组 201 取样器（纹理） 202 运算符优先级 203 程序流程控制：分支和循环 203 if 语句和if-else 语句 203 for 语句 204 continue、break 和discard 语句 205 函数 205 规范声明 207 参数限定词 207 内置函数 208 全局变量和局部变量 209 存储限定字 209 const 变量 209 Attribute 变量 210 uniform 变量 211 varying 变量 211 精度限定字 211 预处理指令 213 总结 215 第7 章 进入三维世界 217 立方体由三角形构成 217 视点和视线 218 视点、观察目标点和上方向 219 示例程序（LookAtTriangles.js） 221 LookAtTriangles.js 与RotatedTriangle_Matrix4.js 224 从指定视点观察旋转后的三角形 225 示例程序（LookAtRotatedTriangles.js） 227 用示例程序做实验 228 利用键盘改变视点 230 示例程序（LookAtTrianglesWithKeys.js） 230 独缺一角 232 可视范围（正射类型） 233 可视空间 234 定义盒状可视空间 235 示例程序（OrthoView.html） 236 示例程序（OrthoView.js） 237 JavaScript 修改HTML 元素 239 顶点着色器的执行流程 239 修改near 和far 值 241 补上缺掉的角（LookAtTrianglesWithKeys_ViewVolume.js） 243 用示例程序做实验 245 可视空间（透视投影） 246 定义透视投影可视空间 247 示例程序（perspectiveview.js） 249 投影矩阵的作用 251 共冶一炉（模型矩阵、视图矩阵和投影矩阵） 252 示例程序（PerspectiveView_mvp.js） 254 用示例程序做实验 257 正确处理对象的前后关系 258 隐藏面消除 260 示例程序（DepthBuffer.js） 262 深度冲突 263 立方体 266 通过顶点索引绘制物体 268 示例程序（HelloCube.js） 268 向缓冲区中写入顶点的坐标、颜色与索引 271 为立方体的每个表面指定颜色 274 示例程序（ColoredCube.js） 275 用示例程序做实验 277 总结 279 第8 章 光照 281 光照原理 281 光源类型 283 反射类型 284 平行光下的漫反射 286 根据光线和表面的方向计算入射角 287 法线：表面的朝向 288 示例程序（LightedCube.js） 291 环境光下的漫反射 296 示例程序（LightedCube_ambient.js） 298 运动物体的光照效果 299 魔法矩阵：逆转置矩阵 301 示例程序（LightedTranslatedRotatedCube.js） 302 点光源光 304 示例程序（PointLightedCube.js） 305 更逼真：逐片元光照 308 示例程序（PointLightedCube_perFragment.js） 309 总结 310 第9 章 层次模型 311 多个简单模型组成的复杂模型 311 层次结构模型 313 单关节模型 314 示例程序（JointMode.js） 315 绘制层次模型（draw()） 319 多节点模型 321 示例程序（MultiJointModel.js） 323 绘制部件（drawBox()） 326 绘制部件（drawSegments()） 327 着色器和着色器程序对象：initShaders() 函数的作用 332 创建着色器对象（gl.createShader()） 333 指定着色器对象的代码（gl.shaderSource()） 334 编译着色器（gl.compileShader()） 334 创建程序对象（gl.createProgram()） 336 为程序对象分配着色器对象（gl.attachShader()） 337 连接程序对象（gl.linkProgram()） 337 告知WebGL 系统所使用的程序对象（gl.useProgram()） 339 initShaders() 函数的内部流程 339 总结 342 第10 章 高级技术 343 用鼠标控制物体旋转 343 如何实现物体旋转 344 示例程序（RotateObject.js） 344 选中物体 347 如何实现选中物体 347 示例程序（PickObject.js） 348 选中一个表面 351 示例程序（PickFace.js） 352 HUD（平视显示器） 355 如何实现HUD 355 示例程序（HUD.html） 356 示例程序（HUD.js） 357 在网页上方显示三维物体 359 雾化（大气效果） 359 如何实现雾化 360 示例程序（Fog.js） 361 使用w 分量（Fog_w.js） 363 绘制圆形的点 364 如何实现圆形的点 364 示例程序（RoundedPoint.js） 366 α 混合 367 如何实现α 混合 367 示例程序（LookAtBlendedTriangles.js） 369 混合函数 369 半透明的三维物体（BlendedCube.js） 371 透明与不透明物体共存 372 切换着色器 373 如何实现切换着色器 374 示例程序（ProgramObject.js） 375 渲染到纹理 379 帧缓冲区对象和渲染缓冲区对象 380 如何实现渲染到纹理 381 示例程序（FramebufferObject.js） 382 创建帧缓冲区对象（gl.createFramebuffer()） 385 创建纹理对象并设置其尺寸和参数 385 创建渲染缓冲区对象（gl.createRenderbuffer()） 386 绑定渲染缓冲区并设置其尺寸（gl.bindRenderbuffer()， gl.renderbufferStorage()） 386 将纹理对象关联到帧缓冲区对象（gl.bindFramebuffer()， gl.framebufferTexture2D()） 388 将渲染缓冲区对象关联到帧缓冲区对象（gl.framebufferRenderbuffer()） 389 检查帧缓冲区的配置（gl.checkFramebufferStatus()） 390 在帧缓冲区进行绘图 390 绘制阴影 392 如何实现阴影 392 示例程序（Shadow.js） 393 提高精度 399 示例程序（Shadow_highp.js） 400 加载三维模型 401 OBJ 文件格式 404 MTL 文件格式 405 示例程序（OBJViewer.js） 406 自定义类型对象 409 示例程序（OBJViewer.js 解析数据部分） 411 响应上下文丢失 418 如何响应上下文丢失 419 示例程序（RotatingTriangle_contextLost.js） 420 总结 422 附录A WebGL 中无须交换缓冲区 423 附录B GLSL ES 1.0 内置函数 427 角度和三角函数 428 指数函数 429 通用函数 430 几何函数 433 矩阵函数 434 矢量函数 435 纹理查询函数 436 附录C 投影矩阵 437 正射投影矩阵 437 透视投影矩阵 437 附录D WebGL/OpenGL ：左手还是右手坐标系？ 439 示例程序(CoordinateSystem.js) 440 隐藏面消除和裁剪坐标系统 443 裁剪坐标系和可视空间 444 什么是对的？ 446 总结 448 附录E 逆转置矩阵 449 附录F 从文件中加载着色器 453 附录G 世界坐标系和本地坐标系 . 457 本地坐标系 458 世界坐标系 459 变换与坐标系 461 附录H WebGL 的浏览器设置 . 463
WebGL编程指南高清版含源码和目录
05-26
WebGL编程指南高清版含源码和目录WebGL编程指南高清版含源码和目录
Professional WebGL Programming
09-15
Everything you need to know about developing hardware-accelerated 3D graphics with WebGL!
webGL公用函数库
06-04
webgl编程指南中的4个公用函数库，希望能够帮到刚接触webgl的童鞋们
webgl入门版本
01-07
WebGL主要是一个低级别的光栅化的API，而不是三维的API。要绘制使用WebGL的图像，必须通过表示图像的向量。然后，它在给定载体导入像素格式，使用 OpenGL SL 转换并在屏幕上显示图像。编写WebGL应用涉及一系列步骤，...
WebGL 入门与实践
sybh的博客
10-24 883
介绍 WebGL 与 CSS 3D 开发的点点滴滴，详细阐述 3D 数学库的实现原理与使用，演示 3D 数学库对于 WebGL 开发和普通网页开发的重要作用，助力每个前端开发者轻松掌握 3D 开发的关键技术。
学习笔记- AVFoundation Programming Guide - 概括
sharpyl的专栏
07-20 565
关于 AVFoundation 1. AVAsset  表示一个或多个媒体数据（音频或视频），能提供媒体的信息（标题，时间，等待），AVAsset不依赖特定数据格式，通过媒体文件的URL即可创建。 AVAsset或track被初始化后，并不意味着马上就准备好，可能需要一些时间来计算文件的持续时间。所以需要定义一个块，通过异步回调返回状态。 2. Playback AVFo
Core Image Programming Guide编程指南-Introduction
欢迎来到Jack的程序世界
10-26 755
About Core Image Core Image is an image processing and analysis technology designed to provide near real-time processing for still and video images. It operates on image data types from the Cor
音频队列服务编程指南(Audio Queue Services Programming Guide)(二)
猫+鱼=？
11-19 6692
关于音频队列(Audio Queues)     本章你将学习到音频队列的功能、架构和内部工作原理。我们将向你介绍音频队列用来播放或录制所用的音频队列(audio queues)、音频队列缓冲区(audio queue buffers)和回调函数(callback functions)，你还可以找到关于音频队列状态和参数的信息，截至到本章的结尾，你将会获得有效使用该技术的概念性理解。 什么是音
WebGL入门指南：探索3D图形编程
"WebGL入门教程，面向初学者的HTML5和WebGL图书" 这本《WebGL for Beginning》是一本面向初学者的指南，旨在教授读者如何利用WebGL和HTML5进行网页图形编程。WebGL是一种基于OpenGL标准的JavaScript API，它允许在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值