WebGL与OpenGL中的明暗器? [英] Shaders in WebGL vs openGL?
问题描述
我想使用着色器在WebGL中使用，尤其是在three.js中使用. WebGL和three.js是否使用特定版本的GLSL?
WebGL着色器遵循GLSL ES 1.017规范
https://www.khronos.org/registry /gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf
在某些方面与桌面OpenGL不同.其中之一是GLSL ES的1.0版本，而在GLSL 4.2(而不是ES)上则是桌面GL
WebGL GLSL与许多有关Internet着色器的文章之间的一大区别是OpenGL ES 2.0中没有固定功能管道，因此WebGL中没有固定功能管道.
固定功能管线保留在OpenGL 1.0中，您将在其中使用glLight和glVertex和glNormal之类的命令.然后，您的着色器需要一种引用该数据的方法.在OpenGL ES和WebGL中，所有事情都消失了，因为着色器所做的一切都取决于用户. WebGL所做的一切就是让您定义自己的输入(属性，制服)，并根据需要命名它们.
WebGL2着色器遵循GLSL ES 3.00规范
https://www.khronos.org /registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf
对于three.js，three.js是3d引擎，在生成着色器时会提供自己的一组标准输入，名称和其他功能. 请参阅文档以了解一些详细信息. 默认情况下提供的制服和属性在此处记录.您也可以查看源文件或查看示例.
Three.js还提供了一个称为 RawShaderMaterial 的东西，它没有添加任何内容显然，在这种情况下，您只需编写标准的WebGL GLSL.
您可以在此处找到三.js的标准属性和制服.
关于学习GLSL的地方，我真的没有任何建议.实际上，这取决于您在编程方面的经验水平以及您喜欢学习的方式.通过阅读示例比阅读手册更好地学习.也许其他人可以添加一些链接.
着色器作为一个概念非常简单.创建一对着色器，使用输入对其进行设置，调用gl.drawArrays或gl.drawElements并传递一个计数.您的顶点着色器将称为计数时间，需要设置gl_Position.每被称为WebGL的1至3次将绘制一个点，线或三角形.为此，它将调用您的片段着色器，要求为每个像素绘制要绘制哪种颜色的像素.片段着色器需要设置gl_FragColor.着色器从attributes，uniforms，textures和varyings获取数据. attributes是每个顶点数据.他们从缓冲区中提取数据，顶点着色器的每次迭代每个属性一个数据. Uniforms就像在着色器运行之前设置全局变量一样.您可以使用varying将数据从顶点着色器传递到片段着色器.当调用片段着色器为每个像素提供颜色时，该数据将在为基元(三角形)的每个顶点设置的值之间进行内插或改变.)
由您决定是否将数据创造性地提供给着色器，并创造性地使用该数据来设置gl_Position和gl_FragColor.通过查看示例，我可以获得大多数想法.
GLSL本身非常简单.有几种类型int，float，vec2，vec3，vec4，mat2，mat3，mat4.它们响应运算符+，-，*，/等.其中有一些内置函数.
您可以在 WebGL参考卡.
对我来说这就足够了.并查看工作程序.
与大多数语言相比，对我来说有趣的一件事是vec字段的同义词和混乱.例如vec4
vec4 v = vec4(1.0, 2.0, 3.0, 4.0);
您可以使用x,y,z,w或s,t,u,v或r,g,b,a或数组样式引用v的各个组件.例如
float red = v.r; // OR
float red = v.x; // same thing OR
float red = v.s; // same thing OR
float red = v[0]; // same thing
您可以做的另一件事就是摇摇欲坠
vec4 color = v.bgra; // swap red and blue
vec4 bw = v.ggga; // make a monotone color just green & keep alpha
您还可以获得子组件
vec2 just_xy = v.xy;
I want to use shaders to use in WebGL and specifically three.js. Is there a specific version of GLSL that WebGL and three.js uses?
WebGL shaders follow the GLSL ES 1.017 spec
https://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf
That's different than Desktop OpenGL in several ways. One it's the 1.0 version of GLSL ES where as desktop GL at version 4.2 of GLSL (not ES)
One big difference between WebGL GLSL and many articles found about shaders on the internet is there's no fixed function pipeline in OpenGL ES 2.0 and therefore no fixed function pipeline in WebGL.
The fixed function pipeline is left over from OpenGL 1.0 where you'd use commands like glLight and glVertex and glNormal. And then your shaders needed a way to reference that data. In OpenGL ES and WebGL all that is gone because everything a shader does is 100% up to the user. All WebGL does is let you define your own inputs (attributes, uniforms) and name them whatever you want.
WebGL2 shaders follow the GLSL ES 3.00 spec
https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf
As for three.js, three.js is a 3d engine and provides its own set of standard inputs, names, and other features when it generates a shader. See the docs for some of the details. The uniforms and attributes provided by default are documented here. You can also look at the source or check out an example.
Three.js also provides something called a RawShaderMaterial which does not add any predefined things apparently in which case you just write standard WebGL GLSL.
You can find three.js's standard attributes and uniforms here.
As for a place to learn GLSL I don't really have a suggestion. It really depends on your level of experience with programming in general and how you like to learn. I learn by looking at examples better than reading manuals. Maybe someone else can add some links.
Shaders as a concept are pretty simple. You create a pair of shaders, setup them up with inputs, call gl.drawArrays or gl.drawElements and pass in a count. Your vertex shader will be called count times and needs to set gl_Position. Every 1 to 3 times it's called WebGL will then draw a point, line, or triangle. To do this it will call your fragment shader asking for each pixel it's about to draw what color to make that pixel. The fragment shader needs to set gl_FragColor. The shaders get data from attributes, uniforms, textures and varyings. attributes are per vertex data. They pull their data from buffers, one piece of data per attribute per iteration of your vertex shader. Uniforms are like setting global variables before the shader runs. You can pass data from a vertex shader to a fragment shader with varying. That data will be interpolated or varied ;) between the values set for each vertex of a primitive (triangle) as the fragment shader is called to provide a color for each pixel.
It's up to you to creatively supply data to the shader and use that data creatively to set gl_Position and gl_FragColor. I get most ideas from looking at examples.
GLSL itself is pretty straight forward. There's a few types int, float, vec2, vec3, vec4, mat2, mat3, mat4. They respond to operators +, -, *, / etc. There's some built in functions.
You can find a terse version of all GLSL info on the last 2 pages of the WebGL Reference Card.
That was enough for me. That and looking at working programs.
The one interesting thing for me vs most languages was synonyms for vec fields and the swizzling. A vec4 for example
vec4 v = vec4(1.0, 2.0, 3.0, 4.0);
You can reference the various components of v using x,y,z,w or s,t,u,v or r,g,b,a or array style. So for example
float red = v.r; // OR
float red = v.x; // same thing OR
float red = v.s; // same thing OR
float red = v[0]; // same thing
The other thing you can do is swizzle
vec4 color = v.bgra; // swap red and blue
vec4 bw = v.ggga; // make a monotone color just green & keep alpha
And you can also get subcomponents
vec2 just_xy = v.xy;
这篇关于WebGL与OpenGL中的明暗器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
