项目介绍

github上一个帮助快速上手和理解glsl的项目，比较简单和直观，而且展示的都是实际中比较常用的效果。

Graphic-workshop github地址
作者Eric Zhang个人主页

环境配置

环境配置十分简单，只需要用npm安装依赖即可，运行成功后在本地浏览器中打开

$ npm install$ npm run dev

Quilt pattern

最终效果

precision mediump float;uniform vec2 resolution;
uniform float time;
uniform float seed;void main() {vec2 coord = gl_FragCoord.xy / resolution;// Output RGB color in range from 0.0 to 1.0vec3 color = vec3(coord.x, coord.y, 0.0);color.z += abs(sin(time));// 1. Uncomment these lines to draw trianglesvec2 squareCoord = 20.0 * gl_FragCoord.xy / resolution.y - vec2(time);vec2 loc = fract(squareCoord);color = vec3(smoothstep(-0.05, 0.05, loc.y - loc.x));// 2. Uncomment these lines to invert some of the trianglesvec2 cell = squareCoord - loc;if (mod(seed * 4.0 * cell.x + cell.y, 5.0) == 1.0) {color = 1.0 - color;}// 3. Uncomment these lines to produce interesting colorsfloat c1 = mod(3.0 * cell.x + 2.0 * cell.y, 7.0) / 7.0;float c2 = mod(4.0 * cell.x + 3.0 * cell.y, 7.0) / 7.0;float c3 = mod(5.0 * cell.x + 1.5 * cell.y, 7.0) / 7.0;color = 1.0 - (1.0 - color) * vec3(c1, c2, c3);// 4. Uncomment to lighten the colorscolor = sqrt(color);gl_FragColor = vec4(color, 1.0);
}

代码中：

第一部分根据坐标取颜色值并按时间改变RGB中B通道的颜色值
第二部分通过数学运算确定每个正方体的位置，加减vec2(time)决定动画的走向向左下还是右上，fract()函数将方块颜色分为上下两部分，smoothstep()函数平滑黑白之间过渡的部分

查阅frac()函数具体作用如图

smoothstep()函数定义及作用
float smoothstep(float edge0, float edge1, float x)
第三部分判断位置在正方形中的相对位置并用seed加权调整出不同形状，取模判断将黑白颜色值取反
第四部分赋予黑色块随机颜色值得到彩色结果（但仍存在规律）
第五部分将颜色值进行开方达到淡化的效果

Procedural landscape

这里用到了一个比较常见的噪声Simplex Noise
最终生成的地形效果

void main() {vec2 coord = (2.0 * gl_FragCoord.xy - resolution) / resolution.y;coord *= scale;// "Organic" simplex noise values in range [-1, 1]float noise1 = snoise(vec2(seed * 10000.0, 0) + coord);float noise2 = snoise(vec2(seed * 10000.0, 1e3) + coord / 2.0);float noise4 = snoise(vec2(seed * 10000.0, 2e3) + coord / 4.0);float noise8 = snoise(vec2(seed * 10000.0, 3e3) + coord / 8.0);// Display various scales of simplex noisevec3 color = 0.5 + 0.5 * vec3(noise8, noise8, noise8);// 1. Fractal noise scales: uncomment each line, one at a timecolor = vec3(0.5);color += 0.5 * noise8;color += 0.25 * noise4;color += 0.1 * noise2;color += 0.05 * noise1;// 2. Generate "water" and "land"float elevation = 0.3 - 0.2 * max(length(coord) - 10.0, 0.0);elevation += noise8 + noise4 * 0.2 + noise2 * 0.1 + noise1 * 0.05;float landFactor = smoothstep(-0.05, 0.05, elevation);float deepSea = smoothstep(-0.1, -0.3, elevation);float deepColor = 0.8 - 0.3 * smoothstep(-0.2, -0.5, elevation);vec3 waterColor = mix(vec3(0.2, 0.2, 0.8), vec3(0.0, 0.0, deepColor), deepSea);color = mix(waterColor, vec3(0.0, 0.6, 0.0), landFactor);// 3. Generate "mountains" and "beaches" based on elevationfloat mountainFactor = (elevation - 1.0) * 5.0;vec3 mountainColor = vec3(0.12, 0.15, 0.1); //BlackmountainColor = mix(mountainColor, vec3(0.4, 0.32, 0.4), smoothstep(0.7, 0.8, mountainFactor)); //BrownmountainColor = mix(mountainColor, vec3(0.9, 0.9, 0.9), smoothstep(1.1, 1.15, mountainFactor)); //Whitevec3 landColor = mix(vec3(0.0, 0.6, 0.0), mountainColor, smoothstep(0.0, 0.1, mountainFactor));float grassFactor = smoothstep(0.75, 0.7, elevation);landColor = mix(landColor, vec3(0.2, 0.8, 0.0), grassFactor);float beachFactor = smoothstep(0.5, 0.4, elevation);landColor = mix(landColor, vec3(0.9, 0.9, 0.5), beachFactor);color = mix(waterColor, landColor, landFactor);gl_FragColor = vec4(color, 1.0);
}

首先定义四个通过Simplex noise处理过后的噪声值，这里单独每个噪声值都拿出来看一下是什么效果，然后在淡化合并赋值给颜色以看到一个更明显的效果

Rasterization and shading

Phong shading

首先复习一下Phong shading光照模型的公式，在glsl中可以视为如下：
color = vec3(Ka * ambientColor + Kd * lambertian * diffuseColor + Ks * specular * specularColor);
最终颜色 = 直射光颜色 * 反射光颜色 * pow(max(0, dot(反射光方向, 视野方向)), 光泽度(gloss)) + 漫反射颜色 + 环境光颜色
在本例子中向illuminate()函数传入入射光位置，返回相应的着色值

vec3 illuminate(vec3 lightPosition) {vec3 wi = lightPosition - vPosition;float intensity = 1.0 / dot(wi, wi); // inverse-square lawvec3 diffuse = kd * max(dot(normalize(wi), normalize(vNormal)), 0.0);// 1. Your specular highlights code goes here!//// This is the outline of what your program should do://  - Compute the unit vector wo from the current position to the//    camera, by subtracting vPosition from eye and calling//    normalize().vec3 wo = normalize(eye - vPosition);//  - Compute the reflected incident light vector r, by reflecting//    normalize(wi) about normalize(vNormal) using the reflect()//    function.vec3 r = reflect(-normalize(wi), normalize(vNormal));//  - Take the dot product of r and wo, then raise this to the//    exponent of the shininess coefficient. (Make sure your//    result is not negative!)//  - Multiply the result by specular coefficient ks.vec3 specular = ks * pow(max(dot(r, wo), 0.0), shininess); // Change me!return intensity * (diffuse + specular);
}

最终效果如下

Cook-Torrance

sRGB gamma correction

NPR

这里的NPR和上面的着色区别在于完成光线相关的计算后不急着将结果赋值给颜色，而是将结果离散并通过一些阈值控制最后呈现的颜色。
这部分的代码和Rasterization and shading中的几乎一致，差别在于多了一个根据相机视角的移动进行变化

其中使用了一个拓展#extension GL_OES_standard_derivatives : enable，这个拓展主要包含了三个方法：dFdx()，dFdy()，fwidth()，可以看出来前两个用于求微分，而fwidth()相当于前两个的和，即fwidth(x)=abs(dFdx(x))+abs(dFdy(x))
通过边缘估计来实现随相机视角移动进行变化

float vn = abs(dot(normalize(vNormal), normalize(vPosition - eye)));
float vnGradient = fwidth(vn);
float edgeFactor = smoothstep(1.25, 0.75, vn / vnGradient / 5.0);
color = mix(color, vec3(0.1), edgeFactor);

待更新…

Ray tracing部分，Simplex noise详解

Graphic-workshop上手体验（持续更新中）相关推荐

2020云栖大会奖品大盘点（持续更新中）
简介:2020云栖大会开发者游乐园正在火热进行中,但是阿里妹听到有许多开发者表示,不知道这次开发者游乐园都有哪些礼品,或是不知道上哪赢取.阿里妹决定为你带来一篇最全的开发者奖品大盘点!奖品持续更新中, ...
叮咚！您有一份2017杭州云栖大会参会指南待签收【持续更新中】
点击查看全文 10月11-14日,为期四天的2017杭州云栖大会将再度在杭州云栖小镇举办,作为全球最具影响力的科技展会之一,本届大会不仅有阿里集团专家以及各企业行业领袖的精彩演讲,众多让人耳目一新的黑 ...
db2dual_DB2常用SQL的写法(持续更新中...)
DB2常用SQL的写法(持续更新中...) -- Author: lavasoft -- Date : 2006-12-14 -- 创建一个自定义单值类型 create distinct typ ...
网络流题目详讲+题单(提高版)(持续更新中......)
网络流题目详讲+题单(提高版)(持续更新中......) 标签:图论--网络流 PS:如果你觉得自己还不够强(和我一样弱),可以去入门版看看阅读体验:https://zybuluo.com/Junl ...
沉睡者 - 网赚创业VIP项目课程-持续更新中...
沉睡者 - 网赚创业VIP项目课程-持续更新中... 不管在线下还是线上,都尽量只做有积累可持续的项目,否则就容易进入到一个找项目做项目死项目之后,不断重复找项目,不断重复做苦力没有发展的死循环. 在 ...
JAVA面试大全(持续更新中...)
本文旨在收集Java面试过程中出现的问题,力求全面,仅作学习交流,欢迎补充,持续更新中-,部分段落选取自网上,部分引用文章已标注,部分已记不清了,如侵权,联系本人 Java基础 1.面向对象的概述面 ...
psid mysql_DB2常用SQL的写法(持续更新中...)
DB2常用SQL的写法(持续更新中...) -- Author: lavasoft -- Date : 2006-12-14 -- 创建一个自定义单值类型 create distinct typ ...
【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程整合学习目录（持续更新中）
写在开头大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门 ...
最实用的微信小程序大全，持续更新中...
最全的小程序开发教程,点击下载掘金App. 小程序上线 1月9日,张小龙没有食言,微信小程序如约而至.凌晨刚过,我们便在微信发现页看到了小程序的入口. 微信发现页之后的一个小时里,每个微信群都在疯狂 ...
嵌入式相关开源项目、库、资料------持续更新中
学习初期最难找的就是找学习资料了,本贴精心汇总了一些嵌入式相关资源,包括但不限于编程语言.单片机.开源项目.物联网.操作系统.Linux.计算机等资源,并且在不断地更新中,致力于打造全网最全的嵌入式资 ...

Graphic-workshop上手体验（持续更新中）

目录