webgl简介_WebGL简介

webgl简介

There were many early attempts at true, interactive 3D on the web, including VRML and Flash, but it took until 2013 for a true standard to emerge: WebGL, based on OpenGL ES 2.0. This means that it’s now possible to integrate native 3D directly into your web pages, without any need for plugins or browser extensions.

在网络上进行了很多真正的交互式3D的早期尝试，包括VRML和Flash，但是直到2013年才出现了真正的标准：基于OpenGL ES 2.0的WebGL。 这意味着现在可以将本机3D直接集成到您的网页中，而无需任何插件或浏览器扩展。

什么是WebGL？ (What is WebGL?)

WebGL writes 3D to pages using JavaScript, via the <canvas> element. Unlike HTML, WebGL does not create elements on a page: it’s work is done at the pixel level. As such, WebGL is a relatively low-level API: it offers precise control of a 3D space via shaders, without any abstraction.

WebGL通过<canvas>元素使用JavaScript将3D写入页面。 与HTML不同，WebGL 不会在页面上创建元素 ：它的工作是在像素级别完成的。 因此，WebGL是一个相对较低级别的API ：它通过着色器提供对3D空间的精确控制，而无需任何抽象。

Unlike most 3D applications, WebGL does not natively provide “scenes”, “objects”, or “models”. This makes it extremely powerful, but also potentially very challenging for developers to grasp, or quickly produce results in.

与大多数3D应用程序不同，WebGL本机不提供“场景”，“对象”或“模型”。 这使其功能极其强大，但对于开发人员来说，要想掌握或快速产生结果，也可能会带来很大的挑战。

For this reason, while it’s entirely possible to write native WebGL code directly in your JavaScript, most developers use a framework. Right now, the most popular WebGL framework is threeJS, although there are many other possibilities.

因此，虽然完全有可能直接在JavaScript中编写本机WebGL代码，但大多数开发人员都使用framework 。 目前，最受欢迎的WebGL框架是threeJS ，尽管还有许多其他可能性 。

对3D框架的需求 (The Need for a 3D Framework)

If you’ve read other articles on this site, you’ll be aware that I have a fairly strong aversion to frameworks: as a rule, I believe that developers gain more valuable long-term knowledge by learning the fundamentals, rather than taking “shortcuts”.

如果您阅读了本网站上的其他文章，您会意识到我对框架有强烈的反感：通常，我认为开发人员通过学习基础知识会获得更多有价值的长期知识，而不是采用“捷径”。

That being said, 3D is already a fairly complicated subject: trying to build up knowledge of WebGL on top of the rest of web development is a big task for anyone, and taking on WebGL fundamentals would mean a steep learning curve for most before they were able to create anything worthwhile.

话虽这么说，3D已经是一个相当复杂的问题：试图建立的WebGL的知识对 Web开发的其余部分的顶部是一个任何一项艰巨的任务，并采取对WebGL的基本面将意味着一个陡峭的学习曲线对于大多数他们之前能够创造任何有价值的东西。

For that reason, the majority of the early WebGL material on this site will use a framework: the aforementioned threeJS. No previous knowledge of 3D will be required, but you will need an intermediate understanding of HTML, CSS and JavaScript.

因此，该站点上的大多数早期WebGL资料都将使用一个框架：前述的threeJS。 以前不需要3D知识 ，但是您需要对HTML ， CSS和JavaScript有一定的了解。

A WebGL presentation

WebGL演示

The material provided will always use the latest version of threeJS and WebGL; when WebGL 2.0 becomes mainstream, the articles will be updated to reflect any changes.

提供的材料将始终使用最新版本的threeJS和WebGL； 当WebGL 2.0成为主流时，文章将进行更新以反映所有更改。

是什么使这种方法与众不同 (What Makes This Approach Different)

The majority of threeJS learning material on the web is, in my opinion, fairly poor: demos often fail to work because their code hasn’t been updated (improvements and changes to the threeJS framework come very frequently), and entire steps are often skipped, or left unexplained. This series won’t do that: each point will be stepped through, allowing the lessons to build on each other. We’ll start with practical, fun examples that have broad interest: I’ve chosen the planets of the solar system, modelled in 3D. Our first stop is Mars…

我认为网络上的大多数threeJS学习材料都相当差：演示程序常常由于未更新其代码而无法正常工作(对threeJS框架的改进和更改非常频繁)，并且常常跳过整个步骤。 ，或无法解释。 本系列不会这样做：将逐步完成每个要点，使各课程可以相互借鉴。 我们将从具有广泛兴趣的实用，有趣的示例开始：我选择了以3D建模的太阳系行星。 我们的第一站是火星…

翻译自: https://thenewcode.com/1171/Introduction-to-WebGL

webgl简介