Git Product home page Git Product logo

tengge1 / webgl-study-notes Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 0.0 429 KB

《WebGL编程指南》学习笔记,从最简单的点线面的绘制,到复杂的MVP矩阵变换、光源、混合、雾效、帧缓冲区、多个物体处理都有代码示例,非常全面。

License: MIT License

HTML 50.04% C# 0.36% CSS 0.03% JavaScript 49.57%
webgl webgl-programming webgl-tutorials learn-webgl

webgl-study-notes's Introduction

《WebGL编程指南》学习笔记

01 DrawPoint 画点

02 DrawMultiPoint 画多个点

03 ClickPoint 点击鼠标画点

04 ClickColorPoint 点击鼠标画带颜色的点

05 DrawTriangle 画三角形(TRIANGLES)

06 DrawTriangleStrip 画三角形带(TRIANGLE_STRIP)

07 DrawTriangleFan 画三角形扇(TRIANGLE_FAN)

08 DrawLine 画线(LINES)

09 DrawLineStrip 画线带(LINE_STRIP)

10 DrawLineLoop 画线圈(LINE_LOOP)

11 RotateTriangle 使用三角函数旋转三角形

12 RotateTriangleMatrix 使用矩阵旋转三角形

13 ScaleTriangleMatrix 使用矩阵缩放三角形

14 TranslateTriangle 使用向量平移三角形

15 TranslateTriangleMatrix 使用矩阵平移三角形

16 ColorTriangle 给三角形染颜色

17 ColorFragCoord 通过gl_FragCoord给三角形染颜色

18 VertexAndColor 将顶点位置和颜色放到同一个缓冲区

19 UseTexture 使用纹理

20 UseTextureRepeat 纹理重复方式

21 UseTextureFlipY 翻转Y轴

22 Cube 立方体(颜色插值、VP矩阵)

23 ColorCube 带颜色的立方体(每个面一个颜色)

24 DepthBuffer 深度测试(DEPTH_TEST)

25 RotateTriangle 旋转三角形(MVP矩阵)

26 RotateTriangleWithKey 使用左右方向键旋转三角形

27 OrthoViewWithKey 正视投影(使用上下左右控制near和far的大小)

28 Zfighting 使用PolygonOffset解决ZFighting问题(两个面共面绘制问题)

29 RotateCubeWithKey 使用上下左右旋转带颜色的正方体

30 LightingCube 光照(平行光)

31 AmbientLight 环境光

32 PointLight 点光源

33 LightingSphere 球体

34 MoveAround 一个球围着另一个球转(多个物体同时运动)

35 TestClick 点击正方体(如何判断是否点击到正方体)

36 BlendCube 颜色混合

37 Fog 雾效

38 FramebufferObject 帧缓冲区的使用(3D笔记本屏幕里演示3D物体效果)

39 2D3D 在3D中用半透明平板显示2D文字图形信息

webgl-study-notes's People

Contributors

tengge1 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.