webgl 初识1
1. webgl是什么?
WebGL其实是一个非常简单的API。好吧,“简单”可能是一个不恰当的描述。 它做的是一件简单的事,它仅仅运行用户提供的两个方法,一个顶点着色器和一个片断着色器,
去绘制点,线和三角形。虽然做三维可以变得很复杂,但是这种复杂只是作为程序员的你, 是一种复杂形式的“着色器”。WebGL API只做光栅化处理并且在概念上十分容易理解。
2. 怎么调用webgl?
通过program(着色程序)
WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器, 另一个叫片断着色器,并且使用一种和C或C++类似的强类型的语言 GLSL。
(GL着色语言)。 每一对组合起来称作一 个 program(着色程序)。
3 webgl怎么工作?
着色器分为顶色着色器和片段着色器,各司其职
顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置,WebGL可以对点, 线和三角形在内的一些图元进行光栅化处理。
当对这些图元进行光栅化处理时需要使用片断着色器方法。
片断着色器的作用是计算出当前绘制图元中每个像素的颜色值。
先假设下,你想画很多三角形要怎么处理?
方法有很多,但基本上不变的是 先设置(顶点)数据,然后draw(三角形).
想要webgl渲染的话,同样需要做这些工作
设置数据
每个顶点,包含了删格化需要的一切数据(包括位置,法向量,纹理坐标,顶点颜色值等)
先思考个问题,想要对所有的顶点都有效,怎么办呢? 答案全局变量
即然webgl是一个删格化的引擎,那顶点就是核心,因为它提供了删格化的一切数据. 数据才是核心
draw
设置好数据后,就可以开始让"gpu"工作,drawArrays/drawElements
先介绍到这里,后面在慢慢介绍,一边写博客一边学习
https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-fundamentals.html
webgl 初识1的更多相关文章
- webgl 初识2
之前的文章介绍了webgl. 这里进一步精简. WebGL的全部内容就是创建不同的着色器, 向着色器提供数据然后调用gl.drawArrays 或 gl.drawElements 让WebGL调用当前 ...
- webgl helloworld
之前的webgl 初识1, 初识2 已经介绍了webgl的基本概念,工作原理. 没有理解的自己yy. 现呈上例子一枚 <!DOCTYPE html> <html lang=" ...
- WebGL入门教程(一)-初识webgl
一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...
- 初识webgl--我的webgl学习第一课(基于threeJs)
一,我为什么要学习webgl 一个偶然的机会,在和朋友的聊天过程中,听说了webgl,也许过去也看到过,但是没有特别在意过.原来,JavaScript也可以很好的渲染并在网页上显示三维动画,不用借助插 ...
- 初识WEBGL
WEBGL (全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一 ...
- WEBGL学习【一】初识WEBGL
<html lang="zh-CN"> <head> <title>NeHe's WebGL</title> <meta ch ...
- WebGL入门教程(五)-webgl纹理
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...
- WebGL入门教程(四)-webgl颜色
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...
- WebGL入门教程(三)-webgl动画
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...
随机推荐
- 20155236 《信息安全概论》实验二(Windows系统口令破解)实验报告
20155236 <信息安全概论>实验二(Windows系统口令破解)实验报告 北京电子科技学院(BESTI) 实验报告 课程:信息安全概论 班级:1552 姓名:范晨歌 学号:20155 ...
- 对Linux命令od -tc -tx1的C语言程序实现myod-优化版
导语 自编od C语言实现版名为myod 上个星期有一个初代版,链接- myod原版 这星期的课上要求实现myod-系统调用版本,要求如下 1 参考教材第十章内容 2 用Linux IO相关系统调用编 ...
- 20155328 2016-2017-2 《Java程序设计》第二周学习总结
20155328 2006-2007-2 <Java程序设计>第2周学习总结 教材学习内容总结 基本类型: 整数:short整数(占2字节).int整数(占4字节).long整数(占8字节 ...
- [arc067F]Yakiniku Restaurants[矩阵差分]
Description 传送门 Solution 假如我们确定了烧烤店区间[l,r],则票j必定会选择在B[i][j](l<=i<=r)最大的烧烤店使用. 反过来想,我们想要票j在第i个烧 ...
- MYSQL中日期与字符串间的相互转换
一.字符串转日期 下面将讲述如何在MYSQL中把一个字符串转换成日期: 背景:rq字段信息为:20100901 1.无需转换的: SELECT * FROM tairlist_day WHERE rq ...
- Yii 2.0 使用片段缓存
网站首页footer中的菜单标题是从数据库读取并显示处理的. 也就是 <footer>标题里面是foreach.这样每个人打开网站就查询遍历效率会很低. <footer class= ...
- asp.net core添加全局异常处理及log4net、Nlog应用
0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.介绍 此篇文章将会介绍项目的全局异常收集以及采用log4net或者NLog记录. 众所周知,一旦自己的项目报错,如果没有进行处 ...
- 关于nginx反向代理504 gateway time-out配置
问题描述: 使用nginx的默认配置用作后端处理服务的反向代理,针对处理时间超过1分钟的请求,返回504 gateway time-out,但后端服务还在执行中. 原因分析: nginx代理默认超时时 ...
- EOJ3134. 短信激活码(大数幂取模)
题面 输入只有5位,所以转化为long long类型用快速幂取模 前面补0的写法printf("%05lld\n",ans);如果ans不足5位会在前面补0 #include< ...
- 随身Wifi+win7 搭建http代理 域名劫持 抓包 内容篡改实验环境
需求来源: 1.平板或手机是个封闭系统无法给wifi设置代理 2.需要利用filllder进行抓包,内容篡改等实验 拥有硬件资源:PC机器 + 小米随身wifi 方案1: NtBind Dns + N ...