内容简介:本文示例用随机几何体、光照、纹理贴图、着色器整合起来绘制一个水晶簇。通过调整着色器,可以产生岩浆、蓝宝石等各种效果。示例效果图:很多三维库的几何体基本都是规则几何体,没有随机的美感,因此捣鼓了一个随机水晶生成器,源码地址:
本文示例用随机几何体、光照、纹理贴图、着色器整合起来绘制一个水晶簇。通过调整着色器,可以产生岩浆、蓝宝石等各种效果。
示例效果图:
27个单晶45度随机分布的蓝色水晶簇。
77个单晶180度随机分布的红色水晶簇。
制作随机水晶体生成器
很多三维库的几何体基本都是规则几何体,没有随机的美感,因此捣鼓了一个随机水晶生成器,源码地址: github.com/guoweish/ve…
实现思路如下:
- 生成单个水晶顶点
- 生成水晶簇顶点
实现步骤如下:
- 一个圆周上取多边形点,使用随机角度,形成不同宽度面
... angle = i / faceNumber * PI * 2 + r * angleDithringFactor * angleDithringUnit; px = Math.sin(angle) * polygonCircleRadius; py = Math.cos(angle) * polygonCircleRadius; ... 复制代码
- 随机缩放圆半径,圆周上同角度取多边形点,形成不同柱体半径
... pxd = Math.sin(angle) * polygonCircleRadius* (circleRadiusDithringFactor + radiusDithringDistance); pyd = Math.cos(angle) * polygonCircleRadius* (circleRadiusDithringFactor + radiusDithringDistance); ... 复制代码
- 形成多边形棱柱的上下两层顶点
... vertexs.topPositions.push(px); vertexs.topPositions.push(py); ... 复制代码
- 增加正对圆心的顶点,形成水晶柱顶点
... vertexsCon = [0, cylinderHeight+conHeight, 0]; ... 复制代码
- 生成一个水晶体几何体
... vertexs = [...vertexsCylinderDown, ...vertexsCylinderTop, ...vertexsCon]; ... 复制代码
- 矩阵变换缩放、旋转单个水晶体的顶点,并复制顶点
... let scaleMatrix = new Matrix4(); scaleMatrix.setScale(scaleFactor, scaleFactor, scaleFactor); let rotateMatrix = new Matrix4(); rotateMatrix.setRotate(rotateAngle, rotateCenter.x, rotateCenter.y, rotateCenter.z); ... let vScaledRotated = rotateMatrix.multiplyVector4(vScaled); ... 复制代码
- 生成水晶簇几何体
... let extendedIndices = extendIndices(cristalTransformed.indices, currentIndicesLength); cluster.indices = cluster.indices.concat(extendedIndices); cluster.positions = cluster.positions.concat(cristalTransformed.positions); cluster.uvs = cluster.uvs.concat(cristal.uvs); ... 复制代码
渲染几何体
用纯色shader简单渲染一下是否顶点和索引正确;
- 片元着色器
fragColor = vec4(0.6, 0.6, 0.6, 1.0); 复制代码
添加光照
增加光照,使用Blinn-Phong模型;
- 片元着色器
vec3 diffuse = max(dot(normal, ec_lightDirection), 0.0) * lightColor * lightIntensity * baseColor; vec3 viewDirection = -normalize(ec_position); vec3 halfAngle = normalize(viewDirection + ec_lightDirection); float specularFactor = clamp(dot(normal, halfAngle), 0.0, 1.0); float spec = pow(specularFactor, specularIntensity); vec3 specular = clamp(spec * specularColor, 0.0, 1.0); fragColor = vec4(diffuse + specular + ambient, 1.0); 复制代码
着色器添加渐变的祖母绿效果
为了看上去像祖母绿宝石效果,用纹理做一个渐变;用pow函数使得渐变非线性,用mix函数融合得颜色,看上去效果更自然;
- 片元着色器
... float colorMixFactor = pow(v_uv.y, 3.0); ... vec3 baseColor = mix(CRISTAL_COLOR, GEM_COLOR_GREEN, colorMixFactor); ... 复制代码
使用贴图增强表面细节
为了表面有石头纹样效果,找一张大理石图片做贴图过滤一下颜色;魔改一下光照模型,贴图过滤diffuse而不过滤specular,这样使得表面反色不受影响而产生表面光滑的效果;
- 片元着色器
... fragColor = vec4(diffuse + diffuse * textureFilter + specular + AMB_COLOR, 1.0); 复制代码
以上所述就是小编给大家介绍的《如何使用WebGL渲染一簇水晶》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 水晶报表使用IEnumerable<T>数据源
- Octane渲染入门-渲染设置图文版
- 通过分析 WPF 的渲染脏区优化渲染性能
- React 服务器端渲染和客户端渲染效果对比
- iOS渲染-将视频原始数据(RGB,YUV)渲染到屏幕上
- 通过共享内存优化 Flutter 外接纹理的渲染性能,实时渲染不是梦
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
嵌入式系统开发之道
2011-12 / 69.00元
《嵌入式系统开发之道:菜鸟成长日志与项目经理的私房菜》用平易朴实的语言,以一个完整的嵌入式系统的开发流程为架构,通过一位“菜鸟”工程师与项目经理的诙谐对话,故事性地带出嵌入式系统概念及开发要素,并点出要成为一名称职的嵌入式系统工程师,在实际工作中所必须具备的各项知识及技能。 《嵌入式系统开发之道:菜鸟成长日志与项目经理的私房菜》可以分为三大部分:第1、3、4、17、18、19章和附录D为嵌入......一起来看看 《嵌入式系统开发之道》 这本书的介绍吧!