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

  1. 顶点着色器：定义点的位置、大小
  1. 片元着色器：定义画出来的物体的材质（颜色、反光度等...）
  2.  
  3. 着色器定义有自己的一套语言：GLSL(Graphics Library Shading Language)
  4.  
  5. 推荐阅读：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画一个点：

  1. <head>
  2.     <!-- 顶点着色器 定义代码 -->
  3.     <script type='x-shader/x-vertex' id='shader-vs'>
  4.         void main(){
  5.             gl_Position=vec4(100,0.0,0.0,1000);
  6.             gl_PointSize=10.0;
  7.         }
  8.     </script>
  9.     <!-- 片元着色器 定义代码 -->
  10.     <script type='x-shader/x-fragment' id='shader-fs'>
  11.         void main(){
  12.             gl_FragColor=vec4(0.0,0.0,1.0,1.0);
  13.         }
  14.     </script>
  15. </head>
  16.  
  17. <body>
  18.     <canvas id='webgl' width='400' height='400'></canvas>
  19. </body>
  20. <script>
  21.  
  22.     // 获取webgl的上下文
  23.     var canvas = document.getElementById('webgl');
  24.     var gl = canvas.getContext('webgl');
  25.  
  26.     // 设置清空颜色
  27.     gl.clearColor(0, 1, 1, 1.0);
  28.     gl.clear(gl.COLOR_BUFFER_BIT);
  29.  
  30.     // 初始化着色器（定点着色器和片段着色器）
  31.     // 顶点着色器：就是定义点的位置、大小
  32.     // 片元着色器：定义画出来的物体的材质（颜色、反光度等...）
  33.     var vs_source = document.getElementById('shader-vs').innerHTML,
  34.         fs_source = document.getElementById('shader-fs').innerHTML;
  35.  
  36.     // 创建顶点着色器对象
  37.     var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  38.     // 给顶点着色器对象绑定定义代码
  39.     gl.shaderSource(vertexShader, vs_source);
  40.     // 编顶点译着色器对象
  41.     gl.compileShader(vertexShader);
  42.  
  43.     // 创建片元着色器对象
  44.     var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  45.     // 给片元着色器对象绑定定义代码
  46.     gl.shaderSource(fragmentShader, fs_source);
  47.     // 编译片元着色器对象
  48.     gl.compileShader(fragmentShader);
  49.  
  50.     // 创建一个着色器程序
  51.     var glProgram = gl.createProgram();
  52.  
  53.     // 把前面创建的二个着色器对象添加到着色器程序中（顶点和片段着色器都需要）
  54.     gl.attachShader(glProgram, vertexShader);
  55.     gl.attachShader(glProgram, fragmentShader);
  56.  
  57.     // 把着色器程序链接成一个完整的程序
  58.     gl.linkProgram(glProgram);
  59.  
  60.     // 使用这个完整的程序
  61.     gl.useProgram(glProgram);
  62.  
  63.     // 绘制一个点
  64.     gl.drawArrays(gl.POINTS, 0, 1);
  65. </script>
  66.  
  67. </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. diverta 2019 Programming Contest

    A:签到. #include<bits/stdc++.h> using namespace std; #define ll long long #define inf 1000000010 ...

  2. RabbitMq的环境安装

    1.如图第一个是erlang语言的安装包,第二个是rabbitmq的安装包. 2.配置erlang语言环境,因为rabbitmq由erlang语言编写的,所以需要配置erlng语言环境. erlang ...

  3. （五）Maven中的聚合和继承

    一.为什么要聚合? 定义:我们在开发过程中,创建了2个以上的模块,每个模块都是一个独立的maven project,在开始的时候我们可以独立的编译和测试运行每个模块,但是随着项目的不断变大和复杂化,我 ...

  4. 奇妙的算法【7】-贪婪算法-dp

    问题1描述:[贪婪算法,Dijistra算法] ①有一只兔子要从一个N*N的二维矩阵方格中从上跳到下面: ②每次只能向左或向下,越过一个方格,跳到下一个方格中: ③被越过的方格中的数值,表示该兔子越过 ...

  5. 浅谈.NET中的类型和装箱、拆箱原理

    谈到装箱拆箱,大概的意思就是值类型和引用类型的相互转换呗---值类型到引用类型叫装箱,反之则叫拆箱.这当然没有问题,可是你只知道这么多,那么建议你花点时间看看楼主这篇文章 1. .NET中的类型 为了 ...

  6. nginx和PHP之间的通信

    如果程序员a和B在windows上开发代码,它们可以被分离到不同的服务器,因为nginx和PHP之间的通信是基于TCP fastcgi协议的我们可以在程序员的windows pc上安装nginx,使用 ...

  7. openssl/opensslv.h错误的解决方案

    sudo apt install libssl-dev  

  8. 图卷积神经网络(GCN)入门

    图卷积网络Graph Convolutional Nueral Network,简称GCN,最近两年大热,取得不少进展.不得不专门为GCN开一个新篇章,表示其重要程度.本文结合大量参考文献,从理论到实 ...

  9. Paper Reading:word2vec Parameter Learning Explained

    论文:word2vec Parameter Learning Explained 发表时间:2016 发表作者:Xin Rong 论文链接:论文链接 为了揭开Word2vec的神秘面纱,不得不重新整理 ...

  10. mysql修改表字段顺序

    修改字段排列位置 ALTER TABLE 表名 MODIFY 字段名1 数据类型 FIRST|AFTER 字段名2 参数说明 FIRST,可选参数 将字段1,修改为表的第一个字段. AFTER 字段名 ...