WebGL的shader（着色器）有2种：vertexShader（定点着色器）和 fragmentShader（片段着色器）

顶点着色器：定义点的位置、大小
片元着色器：定义画出来的物体的材质（颜色、反光度等...）

着色器定义有自己的一套语言：GLSL(Graphics Library Shading Language)

推荐阅读：https://blog.csdn.net/qq_37338983/article/details/78556063http://www.alloyteam.com/2017/03/teach-you-to-use-webgl-to-quickly-create-a-small-world/

例如用WebGL画一个点：

<head>

    <!-- 顶点着色器 定义代码 -->

    <script type='x-shader/x-vertex' id='shader-vs'>

        void main(){

            gl_Position=vec4(100,0.0,0.0,1000);

            gl_PointSize=10.0;

        }

    </script>

    <!-- 片元着色器 定义代码 -->

    <script type='x-shader/x-fragment' id='shader-fs'>

        void main(){

            gl_FragColor=vec4(0.0,0.0,1.0,1.0);

        }

    </script>

</head>

<body>

    <canvas id='webgl' width='400' height='400'></canvas>

</body>

<script>

    // 获取webgl的上下文

    var canvas = document.getElementById('webgl');

    var gl = canvas.getContext('webgl');

    // 设置清空颜色

    gl.clearColor(0, 1, 1, 1.0);

    gl.clear(gl.COLOR_BUFFER_BIT);

    // 初始化着色器（定点着色器和片段着色器）

    // 顶点着色器：就是定义点的位置、大小

    // 片元着色器：定义画出来的物体的材质（颜色、反光度等...）

    var vs_source = document.getElementById('shader-vs').innerHTML,

        fs_source = document.getElementById('shader-fs').innerHTML;

    // 创建顶点着色器对象

    var vertexShader = gl.createShader(gl.VERTEX_SHADER);

    // 给顶点着色器对象绑定定义代码

    gl.shaderSource(vertexShader, vs_source);

    // 编顶点译着色器对象

    gl.compileShader(vertexShader);

    // 创建片元着色器对象

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

    // 给片元着色器对象绑定定义代码

    gl.shaderSource(fragmentShader, fs_source);

    // 编译片元着色器对象

    gl.compileShader(fragmentShader);

    // 创建一个着色器程序

    var glProgram = gl.createProgram();

    // 把前面创建的二个着色器对象添加到着色器程序中（顶点和片段着色器都需要）

    gl.attachShader(glProgram, vertexShader);

    gl.attachShader(glProgram, fragmentShader);

    // 把着色器程序链接成一个完整的程序

    gl.linkProgram(glProgram);

    // 使用这个完整的程序

    gl.useProgram(glProgram);

    // 绘制一个点

    gl.drawArrays(gl.POINTS, 0, 1);

</script>

</html>

WebGL的shader的更多相关文章

  1. 【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建

    目前Web实现矢量渲染的主流技术包括SVG.VML和WebGL.相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏 ...

  2. WebGIS 利用 WebGL 在 MapboxGL 上渲染 DEM 三维空间数据

    毕业两年,一直在地图相关的公司工作,虽然不是 GIS 出身,但是也对地图有些耳濡目染:最近在看 WebGl 的东西,就拿 MapboxGL 做了一个关于 WebGL 的三维数据渲染的 DEMO 练手. ...

  3. 前端3D引擎-Cesium自定义动态材质

    本文代码基于Vue-cli4和使用WebGL的地图引擎Cesium,主要内容为三维场景下不同对象的动态材质构建. 参考了很多文章,链接附在文末. 为不同的几何对象添加动态材质 不知道这一小节的名称概况 ...

  4. 用shader实现流动的水面(webgl)

    这段时间一直在看如何用shader绘制一个流动的水面,直接用贴图(高度图.法向贴图)实现的方法,这里就不讨论了. 搜了一大波博客资料,感觉存在如下一些问题: 1⃣️大多数资料都是基于opengl实现( ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  6. webgl动画小测试

    // MultiPoint.js (c) 2012 matsuda // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Po ...

  7. 多材质（Shader）实现

    最近在cocos creator上打算写个U3D中shader功能的插件(能在属性面板调整shader属性). 对其中一个功能有点疑惑,就是U3D中一个渲染物体上可以挂多个材质,后来查询了下,一个物体 ...

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

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

  9. Cesium原理篇：6 Render模块(3: Shader)

    在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程渲染管线.之所以单独强调这一点,算是为本篇埋下一个伏笔.通过前两篇,我们介绍了VBO和Textur ...

随机推荐

  1. 关于财务YT知识点

    1 YT 将今年剩余的未花完的money做YT,生成一个YT号,用在下一年使用的机制. 2 生成YT的方式 2.1 PR生成YT 2.2 PO生成YT 2.3 TR生成YT 2.4 预算直接生成YT ...

  2. Autofac三种生命周期

    InstancePerLifetimeScope:同一个Lifetime生成的对象是同一个实例 SingleInstance:单例模式,每次调用,都会使用同一个实例化的对象:每次都用同一个对象: In ...

  3. 解析Illumina+PacBio组装策略

    解析Illumina+PacBio组装策略 (2016-12-08 13:21:58) 转载▼     基于Illumina和PacBio平台的“二加三”组装策略,巧妙的融合了PacBio平台超长读长 ...

  4. 使用Java Executor框架实现多线程

    本文将涵盖两个主题: 通过实现Callable接口创建线程 在Java中使用Executor框架 实现Callable接口 为了创建一段可以在线程中运行的代码,我们创建了一个类,然后实现了Callab ...

  5. JS实现异步的几种方式

    1.JS执行环境:单线程   单线程:就是指一次只能完成一件任务.若有多个任务时,就必须排队,等前面一个任务完成之后,再执行后面一个任务 缺点:任务耗时很长,后面的任务需要等待,拖延整个程序的执行.例 ...

  6. SAP Marketing Cloud的Contact导入配置和数据合并原理

    SAP很多系统的主数据都支持从外部系统导入,SAP Marketing Cloud也是如此,contact主数据可以来自Hybris Commerce,CRM,ERP或者Twitter,Faceboo ...

  7. JdbcTemplate批量插入数据

    运行环境:SpringBoot,注入JdbcTemplate @Autowired private JdbcTemplate jdbcTemplate; 1.单表批量插入数据 @Test public ...

  8. 前阿里P8架构师谈如何设计优秀的API

    随着大数据.公共平台等互联网技术的日益成熟,API接口的重要性日益凸显,从公司的角度来看,API可以算作是公司一笔巨大的资产,公共API可以捕获用户.为公司做出许多贡献.对于个人来说,只要你编程,你就 ...

  9. Java程序猿跳槽应该学哪些方面的技术

    互联网产品.大型企业级项目常会用到的: 并发处理技术 具体到Java上通常是涉及java.util.concurrent.并发锁机制.NIO等方面,当然最近比较火爆的Netty框架也可以作为高并发处理 ...

  10. python中yield的用法详解-转载

    原文链接:https://blog.csdn.net/mieleizhi0522/article/details/82142856 ,今天在写python爬虫的时候,循环的时候用到了yield,于是搜 ...