GLSL着色器- 游戏开发环境 - MDN Web Docs

这个着色器的作用是设置 gl_FragColor 变量, 也是一个GLSL内置变量: void main() { gl_FragColor = makeCalculationsToHaveColor; } SkiptomaincontentSkiptosearchSkiptoselectlanguage游戏开发环境Techniquesforgamedevelopment3DgamesontheWebGLSL着色器ArticleActions中文(简体)此页面由社区从英文翻译而来。

了解更多并加入MDNWebDocs社区。

着色器类型例子总结其他链接RelatedTopics Introduction Introduction Anatomy Examples APIsforgamedevelopment Canvas CSS Fullscreen Gamepad IndexedDB JavaScript PointerLock SVG TypedArrays WebAudio WebGL WebRTC WebSockets WebVR WebWorkers XMLHttpRequest Techniques Usingasyncscriptsforasm.js Optimizingstartupperformance UsingWebRTCpeer-to-peerdatachannels Efficientanimationforwebgames AudioforWebGames 2Dcollisiondetection Tilesandtilemapsoverview 3DgamesontheWeb 3DgamesontheWeboverview Explainingbasic3Dtheory BuildingupabasicdemowithA-Frame BuildingupabasicdemowithBabylon.js BuildingupabasicdemowithPlayCanvas BuildingupabasicdemowithThree.js WebVR 3Dcollisiondetection BoundingvolumecollisiondetectionwithTHREE.js Implementinggamecontrolmechanisms Controlmechanisms Mobiletouch Desktopwithmouseandkeyboard Desktopwithgamepad Other Tutorials 2DbreakoutgameusingpureJavaScript 2DbreakoutgameusingPhaser 2Dmaze_gamewithdeviceorientation 2DplatformgameusingPhaser Publishinggames Publishinggamesoverview Gamedistribution Gamepromotion Gamemonetization 着色器类型例子总结其他链接GLSL着色器使用GLSL的着色器(shader),GLSL是一门特殊的有着类似于C语言的语法,在图形管道(graphicpipeline)中直接可执行的OpenGL着色语言.着色器有两种类型-- 顶点着色器(VertexShader)和片段着色器(FragmentShader).前者是将形状转换到真实的3D绘制坐标中,后者是计算最终渲染的颜色和其他属性用的. GLSL不同于JavaScript,它是强类型语言,并且内置很多数学公式用于计算向量和矩阵.快速编写着色器非常复杂,但创建一个简单的着色器并不难.在这篇文章我们将介绍使用着色器的基础知识,并且构建一个使用Three.js的例子来加速代码编写. 你可能记得基本原理那篇文章,一个顶点(vertex)是在空间中有自己3D坐标的点,并且通常包含些被定义的其他信息.空间本身会被坐标系统定义.在那个3D空间中一切都是关于形状的呈现.着色器类型一个着色器实际上就是一个绘制东西到屏幕上的函数.着色器运行在GPU中,它对这些操作进行了很多的优化,这样你就可以卸载很多不必要的CPU,然后集中处理能力去执行你自己的代码.顶点着色器顶点着色器操作3D空间的坐标并且每个顶点都会调用一次这个函数.其目的是设置 gl_Position 变量--这是一个特殊的全局内置变量,它是用来存储当前顶点的位置: voidmain(){ gl_Position=makeCalculationsToHaveCoordinates; } 这个 voidmain()函数是定义全局gl_Position变量的标准方式.所有在这个函数里面的代码都会被着色器执行. 如果将3D空间中的位置投射到2D屏幕上这些信息都会保存在计算结果的变量中.片段着色器片段(或者纹理)着色器在计算时定义了每像素的 RGBA颜色—每个像素只调用一次片段着色器.这个着色器的作用是设置 gl_FragColor变量,也是一个GLSL内置变量: voidmain(){ gl_FragColor=makeCalculationsToHaveColor; } 计算结果包含RGBA颜色信息.例子让我们构建一个简单的例子来解释这些着色器的动作.假设你已经看过Three.js教程并掌握了场景,物体和材质的基本概念. 注意:记住你没必要使用Three.js或者其他库来编写着色器--纯WebGL 完全够了.我们这里使用Three.js来制作背景代码更简单和易理解.所以你只需关注着色器代码.Three.js和其他3D库给你抽象了很多东西出来--如果你想要用纯WebGL创建这个例子,你得写很多其他的代码才能运行. 环境设置要开始编写WebGL着色器你不需要做太多,只需: 确保你在使用对 WebGL有良好支持的现代浏览器,比如最新版的Firefox或Chrome. 创建一个目录保存你的实验. 拷贝一份的 压缩版的Three.js库 到你的目录. HTML结构这是将用到的HTML结构.