就个人而言我更喜欢这些,但我有偏见,因为它们是我写的。与其他教程不同,它们不会掩盖任何内容,也不假设您已经了解 3D 数学。它们也不是基于 OpenGL 教程,这些教程已经过时了 20 年,而且并不真正适合 WebGL。
Personally I prefer these ones but then I'm biased because I wrote them. Unlike the other tutorials they don't gloss over anything and don't assume you know 3D math already. They also aren't based on OpenGL tutorials that are 20 years out of date and not really appropriate for WebGL.
WebGL 是浏览器到 OpenGL ES 2.0 的 JavaScript 接口,它是 嵌入式系统。* 因此,WebGL 规范没有提供其接口的完整描述。相反,它引用 OpenGL ES 2.0 规范,并且仅指定差异< /a> 介于两者之间。
共同构成 WebGL API 的接口在第 5 节 规范。您可以在目录 部分5.14.1 及以后列出了 WebGL 上下文的属性和方法,这是您最可能感兴趣的信息。在每个方法签名旁边,都有一个指向相应 OpenGL ES 2.0 手册条目,您可以在其中找到有关它们的详细信息。使用 OpenGL ES 2.0 手册时,您必须记住这两个 API 之间存在一些细微差别。幸运的是,这些差异分别在每个方法的签名下方指定,并在 规范的第 6 节。
*在这方面,浏览器可以被认为是通用计算机内的嵌入式系统。
There is no manual for WebGL, but the official specification serves as one. To use it as such, you have to understand the following:
WebGL is a JavaScript interface for browsers to OpenGL ES 2.0, which is a graphics API for embedded systems.* Therefore, the WebGL specification doesn't provide the full description of its interfaces. Instead, it refers to the OpenGL ES 2.0 specification and specifies only the differences between the two.
The interfaces that collectively make up the WebGL API are defined in Section 5 of the specification. You can get an overview of them in the table of contents.Sections 5.14.1 and onwards list the attributes and methods of the WebGL context, which is the information that you are most likely interested in. Next to each method signature, there is a link to the corresponding OpenGL ES 2.0 manual entry, where you can find detailed information about them. When using the OpenGL ES 2.0 manual, you have to keep in mind that there are some minor differences between the two APIs. Fortunately, these differences are specified right below the signatures for each method individually and they are summarised in Section 6 of the specification.
*In this regard, a browser can be thought of as an embedded system within a general purpose computer.
As a starter I would suggest Microsoft one as it describes:
extensions
objects
methods
properties
GLSL errors
It really focus on the API which makes it easier to explore IMO. You can find a pretty exhaustive list of methods. Note that Microsoft does not seem to implement all the features of WebGL if you compare it to Mozilla one.
On Mozilla you will find other very interesting resources (tutorials etc.). Of course another good place to get information is the kronos website. You will find the specification and reference card.
发布评论
评论(8)
这两个资源对我帮助很大
Mozilla Devloper Pages
很棒的博客,其中包含我所遵循的课程!
These two resources helped me a lot
Mozilla Devloper Pages
Great blog with lessons I followed!
WebGL 备忘单
WebGL 快速参考卡
WebGL Cheat Sheet
WebGL Quick Reference Card
还有官方手册 - WebGL 规范:
https://www.khronos.org/registry/webgl/规格/1.0/
There is also the official manual — the WebGL specification:
https://www.khronos.org/registry/webgl/specs/1.0/
就个人而言我更喜欢这些,但我有偏见,因为它们是我写的。与其他教程不同,它们不会掩盖任何内容,也不假设您已经了解 3D 数学。它们也不是基于 OpenGL 教程,这些教程已经过时了 20 年,而且并不真正适合 WebGL。
Personally I prefer these ones but then I'm biased because I wrote them. Unlike the other tutorials they don't gloss over anything and don't assume you know 3D math already. They also aren't based on OpenGL tutorials that are 20 years out of date and not really appropriate for WebGL.
您应该使用 Giles Thomas 的指南:http://www.learningwebgl.com - 这就是我得到的开始了。
You should use Giles Thomas' guide: http://www.learningwebgl.com -- This is how I got started.
WebGL 没有手册,但官方规范作为手册。要这样使用它,您必须了解以下内容:
WebGL 是浏览器到 OpenGL ES 2.0 的 JavaScript 接口,它是 嵌入式系统。* 因此,WebGL 规范没有提供其接口的完整描述。相反,它引用 OpenGL ES 2.0 规范,并且仅指定差异< /a> 介于两者之间。
共同构成 WebGL API 的接口在第 5 节 规范。您可以在目录 部分5.14.1 及以后列出了 WebGL 上下文的属性和方法,这是您最可能感兴趣的信息。在每个方法签名旁边,都有一个指向相应 OpenGL ES 2.0 手册条目,您可以在其中找到有关它们的详细信息。使用 OpenGL ES 2.0 手册时,您必须记住这两个 API 之间存在一些细微差别。幸运的是,这些差异分别在每个方法的签名下方指定,并在 规范的第 6 节。
*在这方面,浏览器可以被认为是通用计算机内的嵌入式系统。
There is no manual for WebGL, but the official specification serves as one. To use it as such, you have to understand the following:
WebGL is a JavaScript interface for browsers to OpenGL ES 2.0, which is a graphics API for embedded systems.* Therefore, the WebGL specification doesn't provide the full description of its interfaces. Instead, it refers to the OpenGL ES 2.0 specification and specifies only the differences between the two.
The interfaces that collectively make up the WebGL API are defined in Section 5 of the specification. You can get an overview of them in the table of contents. Sections 5.14.1 and onwards list the attributes and methods of the WebGL context, which is the information that you are most likely interested in. Next to each method signature, there is a link to the corresponding OpenGL ES 2.0 manual entry, where you can find detailed information about them. When using the OpenGL ES 2.0 manual, you have to keep in mind that there are some minor differences between the two APIs. Fortunately, these differences are specified right below the signatures for each method individually and they are summarised in Section 6 of the specification.
*In this regard, a browser can be thought of as an embedded system within a general purpose computer.
API 描述
如果您只对 javascript API 感兴趣,我建议
Microsoft WebGL API (IE11?)
Mozilla WebGL API
作为初学者,我建议使用 Microsoft 的一个,因为它描述了:
它真正关注于 API,这使得探索 IMO 变得更容易。您可以找到非常详尽的方法列表。请注意,如果将 WebGL 与 Mozilla 进行比较,Microsoft 似乎并未实现 WebGL 的所有功能。
在 Mozilla 上,您会发现其他非常有趣的资源(教程等)。当然,另一个获取信息的好地方是 kronos 网站。您将找到规格和参考卡。
https://www.khronos.org/webgl/
为什么你找不到合适的网站描述Javascript API的页面我会参考Agost Biro回答
教程
http://learningwebgl.com /blog/
https://developer.mozilla .org/en-US/docs/Web/API/WebGL_API/Tutorial
从这些资源中您会找到更多资源。
API description
If you are interested only in the javascript API, I would suggest
Microsoft WebGL API (IE11 ?)
Mozilla WebGL API
As a starter I would suggest Microsoft one as it describes:
It really focus on the API which makes it easier to explore IMO. You can find a pretty exhaustive list of methods. Note that Microsoft does not seem to implement all the features of WebGL if you compare it to Mozilla one.
On Mozilla you will find other very interesting resources (tutorials etc.). Of course another good place to get information is the kronos website. You will find the specification and reference card.
https://www.khronos.org/webgl/
For as why you cannot find a proper web page describing the Javascript API I would refer to Agost Biro answer
Tutorials
http://webglfundamentals.org/
http://learningwebgl.com/blog/
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial
From those ones you will find even more resources.
本教程可以为您提供很多帮助,就像我的案例一样。
http://www.webglacademy.com/
在这里您可以从 0 级开始。完成本教程后,您可以使用 Three.js 库来增强您的 WebGl 内容。
https://trijs.org/examples/
This tutorial could help you a lot as it did in my case.
http://www.webglacademy.com/
Here you could start from level 0. After completing this tutorial you could use Three.js library to enhance your WebGl content.
https://threejs.org/examples/