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的更多相关文章

  1. webgl 初识2

    之前的文章介绍了webgl. 这里进一步精简. WebGL的全部内容就是创建不同的着色器, 向着色器提供数据然后调用gl.drawArrays 或 gl.drawElements 让WebGL调用当前 ...

  2. webgl helloworld

    之前的webgl 初识1, 初识2 已经介绍了webgl的基本概念,工作原理. 没有理解的自己yy. 现呈上例子一枚 <!DOCTYPE html> <html lang=" ...

  3. WebGL入门教程(一)-初识webgl

    一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...

  4. 初识webgl--我的webgl学习第一课(基于threeJs)

    一,我为什么要学习webgl 一个偶然的机会,在和朋友的聊天过程中,听说了webgl,也许过去也看到过,但是没有特别在意过.原来,JavaScript也可以很好的渲染并在网页上显示三维动画,不用借助插 ...

  5. 初识WEBGL

    WEBGL (全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一 ...

  6. WEBGL学习【一】初识WEBGL

    <html lang="zh-CN"> <head> <title>NeHe's WebGL</title> <meta ch ...

  7. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  8. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  9. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

随机推荐

  1. SDR软件无线电知识要点(三)EVM

    SDR软件无线电知识要点(三)EVM 信号质量如何评估 Noise Figure (NF) or sensitivity and Error Vector Magnitude (EVM) provid ...

  2. linux编程实践:实现pwd命令

    内核为每个目录都设置了一个指向自己的i节点入口,即".",还有一个指向其父目录i节点的入口,即"..",我们首先获取当前目录的i节点编号,但是并不能知道当前目录 ...

  3. 资源很多,你却不会使用——以不变应万变才是自学Java的正确方法

    鄙人乐于寻找学习方法,在这里提出自己的见解,希望可以帮助想玩好Java而又感觉很难上手的同学对Java不再恐惧 现状 我们的同学们除了某月,某婷等等大神以外,想必仍然存在着一大批同学根本没有摸索到学习 ...

  4. 20155320 实验二 Java面向对象程序设计

    20155320 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...

  5. C语言复习20170716

    C语言复习20170716 C数据类型 图片来自:C语言基本数据类型简介 C语言程序处理的数据有常量和变量两种形式. 常量是在程序中不能改变其值的量.例如:整型常量.实型常量.字符常量.字符串常量和枚 ...

  6. 思维水题 poj1852

    题目链接:http://poj.org/problem?id=1852 题意:木板长为n,    蚂蚁数量为k,    后面k个数,依次代表蚂蚁的位置,  当蚂蚁到达边界的时候会立马掉下,当两个蚂蚁相 ...

  7. 新技能get,使用PHPStorm的deployment工具

    1. 工具栏 Tools - Deployment - Configuration 2. 添加一个服务端的配置信息 type 类型可以选择:FTP.local等. 填完信息别忘了点"Test ...

  8. web中简单wcf的创建和应用

    以前做过wcf控制台作为宿主,今天回顾一下,不过公司用的web直接创建就把这种过程写下来. 第一步:创建wcf页面如图 第二步:创建wcf时候已经自动生成了接口(契约)和实现类(契约),但是我们可以修 ...

  9. Maven学习(十)-----使用Maven创建Java项目

    所需要的工具: Maven 3.3.3 Eclipse 4.2 JDK 8 注意:请确保 Maven 是正确安装和配置(在Windows,*nix,Mac OSX系统中),然后再开始本教程,避免 mv ...

  10. 测试面试必会sql(1)

    测试一般各种查询语句用的较多,下面的查询语句都是需要熟悉的 Course表 Score表 Student表 Teacher表 1,查询课程编号为“02”的总成绩 SELECT * FROM `Scor ...