/2D_3D

2d,3d学习项目

Primary LanguageJavaScript

图形学Webgl学习资料

这个是我平时学图形学收集的一些资料,以及我自己学图形学过程中做的一些例子

项目启动

安装依赖

yarn 

或者用 npm

npm i 

启动项目

npm run start   

这个webpack配置我配置的是多页面入口的,所以在主页看到空白,不如要看那个例子 可以 复制该文件夹目录到浏览器地址栏上面查看。比如 在目录的 2D_3D\src\pages\3d\webgl\webgl编程指南\09层次模型\02MultiJointModel 中,如果要查看这个例子在浏览器可以这样访问

http://localhost:8089/3d/webgl/webgl编程指南/09层次模型/02MultiJointModel

这样拼接

http://localhost:8089+ /3d/webgl/webgl编程指南/09层次模型/02MultiJointModel

其他例子也是一样的。

2d,3d 学习资料

https://www.bilibili.com/video/BV1Gg411X7FY?p=60&vd_source=244d29250f99d72b759d594ebd4a6c47

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial http://webglplayground.net/documentation http://www.webglacademy.com/ https://webglreport.com/?v=1 实时渲染,版次四

https://search.jd.com/Search?keyword=%E5%AE%9E%E6%97%B6%E6%B8%B2%E6%9F%93&enc=utf-8&wq=%E5%AE%9E%E6%97%B6%E6%B8%B2%E6%9F%93&pvid=4c69dc4620dd43a787383039777f22d8

webgl 3d api 文档 https://en.wikipedia.org/wiki/List_of_3D_graphics_libraries

webgl 3d api 教程文档 https://webglfundamentals.org/

webgl 教程 学习网站 含高级: https://www.labs.cs.uregina.ca/315/

webgl 教程学习网站 :https://learnwebgl.brown37.net/index.html

webgl 教程学习网站 :https://wgld.org/d/webgl/w021.html

webgl 教程学习网站 :http://webgl-lesson.wysaid.org/

webgl 教程学习网站 : https://www.learnopengles.com/android-lesson-three-moving-to-per-fragment-lighting/

webgl 帖子 https://www.cnblogs.com/hammerc?page=1

Webgl 帖子 : https://blog.csdn.net/lufy_Legend?type=blog

webgl 帖子 :https://hammerc.github.io/dou3d-ts/

webgl 例子: https://wow.techbrood.com/fiddle/26436

webgl教程:https://google.github.io/filament/Filament.html

webgl 例子:https://www.jb51.net/article/234799.htm

webgl mdn web doc 操作api :https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getActiveUniformc

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

shadertoy 网站 https://www.shadertoy.com/browse

shader 网站:https://www.vertexshaderart.com/art/PHWvovEcpp6R6yT8K

shader 网站:https://ogldev.org/

shader 网站:https://glslsandbox.com/

shader

https://chinedufn.com/

3d炫酷效果 网站:https://www.instagram.com/dailycssdesign/

3d炫酷效果 网站: https://wangyasai.github.io/Work/

3d炫酷效果 网站:https://dailycssdesign.com/

shader 书网站:https://www.realtimerendering.com/resources/shaderx/

shader 帖子: https://juejin.cn/column/7222305161368469541?share_token=d0c9cc7c-7242-44bf-8b67-3a9838936206

shader 帖子:https://mp.weixin.qq.com/s/0E95yb35glAOvpMgyzul-g

shader 网站 https://shaderfrog.com/2/

https://learnopengl-cn.readthedocs.io/zh/latest/05%20Advanced%20Lighting/07%20Bloom/

https://blog.csdn.net/AHcola233/article/details/117825091

齐次坐标 https://zh.wikipedia.org/wiki/%E9%BD%90%E6%AC%A1%E5%9D%90%E6%A0%87

https://learnwebgl.brown37.net/#

https://learnopengl-cn.github.io/

矩阵 http://www.360doc.com/content/12/0121/07/7317486_146206322.shtml https://baijiahao.baidu.com/s?id=1729786016813908622&wfr=spider&for=pc

webgl 教程 https://www.w3cschool.cn/webgl/glnw1ohq.html

https://madebyevan.com/webgl-water/

three.js 开源项目 https://mp.weixin.qq.com/s/Z1Lpcj4LU_jgpuMKB5444Q

shader电子书

探秘图形编程之美:《The Book of Shaders》详解

https://thebookofshaders.com/

https://thebookofshaders.com/01/?lan=ch

https://www.yuque.com/books/share/5825eaa7-9d30-45f0-aa6e-db73000f2f47?#(密码:xh59) 《前端提高就业讲义》

《前端全栈课程讲义》:https://www.yuque.com/books/share/aa187c93-6603-453e-9377-9a935b59aeb4?#(密码:lzzk)

https://www.yuque.com/books/share/5825eaa7-9d30-45f0-aa6e-db73000f2f47?#(密码:xh59) 《前端提高就业讲义》

《前端全栈课程讲义》:https://www.yuque.com/books/share/aa187c93-6603-453e-9377-9a935b59aeb4?#(密码:lzzk)

李伟 博客 http://yxyy.name/blog/

opengl 教程 http://www.opengl-tutorial.org/cn/beginners-tutorials/tutorial-1-opening-a-window/

opengl 教程 https://learnopengl-cn.readthedocs.io/zh/latest/

webgl专区: https://codepen.io/search/pens/?limit=all&page=5&q=webgl

(8)在线三维人物角色骨骼自动绑定,上千动作库直接生成人物动画

网站地址: https://www.mixamo.com/

相机 研究 https://www.jianshu.com/p/7b27447fdd0e?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

一些 学习 计算机图形的书本 :https://www.realtimerendering.com/

three.js 教程例子: https://stemkoski.github.io/Three.js/

three.js 教程例子:https://discoverthreejs.com/

webgl 官网 https://www.khronos.org/webgl/

webgl 例子:https://wgld.org/

webgl 视频教程:https://www.youtube.com/watch?v=kB0ZVUrI4Aw&list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt

webgl 学习资料 :https://www.realtimerendering.com/webgl.html

webgl 学习网站 :https://hackr.io/tutorials/learn-webgl

webgl 学习网站 : https://and-ha.com/coding/three-js-start/#toc___3

一些 列子 :https://bashooka.com/coding/25-beginner-friendly-three-js-tutorials-examples/

一些webgl列子 :https://madebyevan.com/

three视频教程:https://www.classcentral.com/report/best-three-js-courses/

three 文档:https://github.com/puxiao/threejs-tutorial

three 游戏https://blog.logrocket.com/creating-game-three-js/

three 教程 https://css-tricks.com/creating-photorealistic-3d-graphics-web/

webxr https://www.w3.org/TR/2023/CRD-webxr-20231005/#xrsystem-interface

three 教程: https://github.com/Experience-Monks/jam3-lesson-webgl-shader-threejs

实时渲染 :https://www.realtimerendering.com/#intro

webxr :https://immersive-web.github.io/webxr-samples/

webxr :https://immersiveweb.dev/

webgl 教程学习网站 :https://learnwebgl.brown37.net/index.html

角度符号 α β γ θ η 。

desmos

天空盒 框架 https://pannellum.org/

透视投影 推导 :https://blog.csdn.net/qq_33913063/article/details/115105999

webgl api 文档 https://registry.khronos.org/OpenGL-Refpages/gl4/html/

数学可视化 线性图形工具 :

https://www.desmos.com/calculator?lang=zh-CN

https://graphtoy.com/