learnopengl-cn.github.io
/
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="http://learnopengl.com 系列教程的简体中文翻译">

        <link rel="canonical" href="https://learnopengl-cn.github.io/">
        <link rel="shortcut icon" href="./img/favicon.ico">

	<title>LearnOpenGL CN</title>

        <link href="./css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="./css/font-awesome-4.0.3.css" rel="stylesheet">
        <link rel="stylesheet" href="./css/highlight.css">
        <link href="./css/base.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet">
        <link href="./css/admonition_fix.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
          ga('create', 'UA-80323542-1', 'auto');
          ga('send', 'pageview');
        </script>
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href=".">LearnOpenGL CN</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">


                <li class="active">
                    <a href=".">主页</a>
                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">目录 <b class="caret"></b></a>
                    <ul class="dropdown-menu">


<li >
    <a href="intro/">简介</a>
</li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">入门</a>
    <ul class="dropdown-menu">


<li >
    <a href="01 Getting started/01 OpenGL/">OpenGL</a>
</li>


<li >
    <a href="01 Getting started/02 Creating a window/">创建窗口</a>
</li>


<li >
    <a href="01 Getting started/03 Hello Window/">你好，窗口</a>
</li>


<li >
    <a href="01 Getting started/04 Hello Triangle/">你好，三角形</a>
</li>


<li >
    <a href="01 Getting started/05 Shaders/">着色器</a>
</li>


<li >
    <a href="01 Getting started/06 Textures/">纹理</a>
</li>


<li >
    <a href="01 Getting started/07 Transformations/">变换</a>
</li>


<li >
    <a href="01 Getting started/08 Coordinate Systems/">坐标系统</a>
</li>


<li >
    <a href="01 Getting started/09 Camera/">摄像机</a>
</li>


<li >
    <a href="01 Getting started/10 Review/">复习</a>
</li>


    </ul>
  </li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">光照</a>
    <ul class="dropdown-menu">


<li >
    <a href="02 Lighting/01 Colors/">颜色</a>
</li>


<li >
    <a href="02 Lighting/02 Basic Lighting/">基础光照</a>
</li>


<li >
    <a href="02 Lighting/03 Materials/">材质</a>
</li>


<li >
    <a href="02 Lighting/04 Lighting maps/">光照贴图</a>
</li>


<li >
    <a href="02 Lighting/05 Light casters/">投光物</a>
</li>


<li >
    <a href="02 Lighting/06 Multiple lights/">多光源</a>
</li>


<li >
    <a href="02 Lighting/07 Review/">复习</a>
</li>


    </ul>
  </li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">模型加载</a>
    <ul class="dropdown-menu">


<li >
    <a href="03 Model Loading/01 Assimp/">Assimp</a>
</li>


<li >
    <a href="03 Model Loading/02 Mesh/">网格</a>
</li>


<li >
    <a href="03 Model Loading/03 Model/">模型</a>
</li>


    </ul>
  </li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">高级OpenGL</a>
    <ul class="dropdown-menu">


<li >
    <a href="04 Advanced OpenGL/01 Depth testing/">深度测试</a>
</li>


<li >
    <a href="04 Advanced OpenGL/02 Stencil testing/">模板测试</a>
</li>


<li >
    <a href="04 Advanced OpenGL/03 Blending/">混合</a>
</li>


<li >
    <a href="04 Advanced OpenGL/04 Face culling/">面剔除</a>
</li>


<li >
    <a href="04 Advanced OpenGL/05 Framebuffers/">帧缓冲</a>
</li>


<li >
    <a href="04 Advanced OpenGL/06 Cubemaps/">立方体贴图</a>
</li>


<li >
    <a href="04 Advanced OpenGL/07 Advanced Data/">高级数据</a>
</li>


<li >
    <a href="04 Advanced OpenGL/08 Advanced GLSL/">高级GLSL</a>
</li>


<li >
    <a href="04 Advanced OpenGL/09 Geometry Shader/">几何着色器</a>
</li>


<li >
    <a href="04 Advanced OpenGL/10 Instancing/">实例化</a>
</li>


<li >
    <a href="04 Advanced OpenGL/11 Anti Aliasing/">抗锯齿</a>
</li>


    </ul>
  </li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">高级光照</a>
    <ul class="dropdown-menu">


<li >
    <a href="05 Advanced Lighting/01 Advanced Lighting/">高级光照</a>
</li>


<li >
    <a href="05 Advanced Lighting/02 Gamma Correction/">Gamma校正</a>
</li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">阴影</a>
    <ul class="dropdown-menu">


<li >
    <a href="05 Advanced Lighting/03 Shadows/01 Shadow Mapping/">阴影映射</a>
</li>


<li >
    <a href="05 Advanced Lighting/03 Shadows/02 Point Shadows/">点阴影</a>
</li>


<li >
    <a href="05 Advanced Lighting/03 Shadows/03 CSM/">CSM</a>
</li>


    </ul>
  </li>


<li >
    <a href="05 Advanced Lighting/04 Normal Mapping/">法线贴图</a>
</li>


<li >
    <a href="05 Advanced Lighting/05 Parallax Mapping/">视差贴图</a>
</li>


<li >
    <a href="05 Advanced Lighting/06 HDR/">HDR</a>
</li>


<li >
    <a href="05 Advanced Lighting/07 Bloom/">泛光</a>
</li>


<li >
    <a href="05 Advanced Lighting/08 Deferred Shading/">延迟着色法</a>
</li>


<li >
    <a href="05 Advanced Lighting/09 SSAO/">SSAO</a>
</li>


    </ul>
  </li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">PBR</a>
    <ul class="dropdown-menu">


<li >
    <a href="07 PBR/01 Theory/">理论</a>
</li>


<li >
    <a href="07 PBR/02 Lighting/">光照</a>
</li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">IBL</a>
    <ul class="dropdown-menu">


<li >
    <a href="07 PBR/03 IBL/01 Diffuse irradiance/">漫反射辐照</a>
</li>


<li >
    <a href="07 PBR/03 IBL/02 Specular IBL/">镜面IBL</a>
</li>


    </ul>
  </li>


    </ul>
  </li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">实战</a>
    <ul class="dropdown-menu">


<li >
    <a href="06 In Practice/01 Debugging/">调试</a>
</li>


<li >
    <a href="06 In Practice/02 Text Rendering/">文本渲染</a>
</li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">2D游戏</a>
    <ul class="dropdown-menu">


<li >
    <a href="06 In Practice/2D-Game/01 Breakout/">Breakout</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/02 Setting up/">准备工作</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/03 Rendering Sprites/">渲染精灵</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/04 Levels/">关卡</a>
</li>


  <li class="dropdown-submenu">
    <a tabindex="-1" class="nav-title">碰撞</a>
    <ul class="dropdown-menu">


<li >
    <a href="06 In Practice/2D-Game/05 Collisions/01 Ball/">球</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/05 Collisions/02 Collision detection/">碰撞检测</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/05 Collisions/03 Collision resolution/">碰撞处理</a>
</li>


    </ul>
  </li>


<li >
    <a href="06 In Practice/2D-Game/06 Particles/">粒子</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/07 Postprocessing/">后期处理</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/08 Powerups/">道具</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/09 Audio/">音效</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/10 Render Text/">渲染文本</a>
</li>


<li >
    <a href="06 In Practice/2D-Game/11 Final thoughts/">结语</a>
</li>


    </ul>
  </li>


    </ul>
  </li>


<li >
    <a href="legacy/">历史存档</a>
</li>


                    </ul>
                </li>


                <li >
                    <a href="code_repo/">代码仓库</a>
                </li>


            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" data-toggle="modal" data-target="#mkdocs_search_modal">
                        <i class="fa fa-search"></i> 搜索
                    </a>
                </li>
                <li class="disabled">
                    <a rel="next" >
                        <i class="fa fa-arrow-left"></i> 上一节
                    </a>
                </li>
                <li >
                    <a rel="prev" href="intro/">
                        下一节 <i class="fa fa-arrow-right"></i>
                    </a>
                </li>

                <li>
                    <a href="https://github.com/LearnOpenGL-CN/LearnOpenGL-CN">

                            <i class="fa fa-github"></i>

                        GitHub
                    </a>
                </li>

                <li>
                    <a href="https://www.paypal.me/learnopengl/">
                            <img class="paypal" src="/img/paypal_logo.png" alt="">
                        支持原作者
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">

        <li class="main active"><a href="#opengl">欢迎来到OpenGL的世界</a></li>

            <li><a href="#_1">为什么要阅读这些教程呢？</a></li>

            <li><a href="#_2">你将学会什么呢？</a></li>

            <li><a href="#_3">关于中文翻译</a></li>


    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="opengl">欢迎来到OpenGL的世界</h1>
<p>欢迎来到OpenGL的世界。这个工程只是我(<a href="http://joeydevries.com/">Joey de Vries</a>)的一次小小的尝试，希望能够建立起一个完善的OpenGL教学平台。无论你学习OpenGL是为了学业，找工作，或仅仅是因为兴趣，这个网站都将能够教会你<strong>现代</strong>(Core-profile) OpenGL从基础，中级，到高级的知识。LearnOpenGL的目标是使用易于理解的形式，使用清晰的例子，展现现代OpenGL的所有知识点，并与此同时为你以后的学习提供有用的参考。</p>
<p>如果您喜欢这个系列教程的话，不妨向Joey de Vries的<a href="https://www.paypal.me/learnopengl/">Paypal</a>进行捐赠，支持一下作者，让这个教程能够持续完善并更新。</p>
<h2 id="_1">为什么要阅读这些教程呢？</h2>
<p><img alt="Image of smiling textured containers in OpenGL" src="img/index_image2.png" class="right medium" /></p>
<p>在互联网上，有关学习OpenGL的有成千上万的文档与资源，然而其中大部分的资源仅仅讨论了OpenGL的立即渲染模式（Immediate Mode，通常会说旧OpenGL），亦或是不完整，缺少适当的文档，甚至是仅仅不适合你的口味。所以，我的目标是提供一个既完整，又易懂的平台供人们学习。</p>
<p>如果你很享受那些提供手把手指导的教程，那些提供清晰例子的教程，以及那些不会一下将你淹没在细节中的教程，那么我的这些教程很可能就很适合你。我的教程旨在让那些没有图形编程经验的人们能够理解，又让那些有经验的读者有阅读下去的兴趣。我的教程同样也讨论了一些常用的概念，只需要你再有一点创造力，就能将你的想法变成真正的3D程序。如果如果你觉得前面这些讲的都是你，欢迎继续阅读我的教程。</p>
<h2 id="_2">你将学会什么呢？</h2>
<p>我这些教程的核心是现代OpenGL。学习（和使用）现代OpenGL需要用户对图形编程以及OpenGL的幕后运作有非常好的理解才能在编程中有很好的发挥。所以，我们会首先讨论核心的图形学概念，OpenGL怎样将像素绘制到屏幕上，以及如何利用黑科技做出一些很酷的效果。</p>
<p>除了核心概念之外，我们还会讨论许多有用的技巧，它们都可以用在你的程序中，比如说在场景中移动，做出漂亮的光照，加载建模软件导出的自定义模型，做一些很酷的后期处理技巧等。最后，我们也将会使用我们已学的知识从头开始做一个小游戏，让你真正体验一把图形编程的魅力。</p>
<h2 id="_3">关于中文翻译</h2>
<p>这里是LearnOpenGL教程的中文翻译，英文版的地址为：<a href="https://learnopengl.com/">https://learnopengl.com/</a></p>
<p>由于翻译可能无法做到精确表达原文意思，我们推荐您在对问题有疑惑的时候去阅读一下英文版的教程。如果您对翻译有更好的建议，可以去我们的<a href="https://github.com/LearnOpenGL-CN/LearnOpenGL-CN">GitHub工程</a>上提交Issue或者Pull Request。如果是对教程的内容有问题，请先查看原文，如果不是翻译错误的话，请直接在原网站评论区向作者（JoeyDeVries）反馈。</p>
<p>如果教程中的源码无法打开的话，可以到教程的<a href="https://github.com/JoeyDeVries/LearnOpenGL">GitHub页面</a>上去寻找所需的代码，每一节教程的源码以及练习都位于 <code>src</code> 目录下的对应章节目录中。</p>

<div id="disqus_thread"></div>
<script>
    (function() {
        var d = document, s = d.createElement('script');

        s.src = '//learnopengl-cn.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>请启用JavaScript以浏览<a href="https://disqus.com/?ref_noscript" rel="nofollow">Disqus评论。</a></noscript></div>
        </div>

        <footer class="col-md-12">
            <hr>

            <center>Powered by <a href="http://www.mkdocs.org/">MkDocs</a> and <a href="http://bootswatch.com/yeti/">Yeti</a></center>
        </footer>

        <script src="./js/jquery-1.10.2.min.js"></script>
        <script src="./js/bootstrap-3.0.3.min.js"></script>
        <script src="./js/highlight.pack.js"></script>
        <script>var base_url = '.';</script>
        <script data-main="./mkdocs/js/search.js" src="./mkdocs/js/require.js"></script>
        <script src="./js/base.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML"></script>

        <div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="Search Modal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">搜索</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            请在下面输入你要搜索的文本（仅支持英文）：
                        </p>
                        <form role="form">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="搜索..." id="mkdocs-search-query">
                            </div>
                        </form>
                        <div id="mkdocs-search-results"></div>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>