《前端中的图形技术.pdf》由会员分享,可在线阅读,更多相关《前端中的图形技术.pdf(26页珍藏版)》请在三个皮匠报告上搜索。
1、图形学应用场景前端与图形学图形学基础设施缘起2011 gesture animation scroll2013 flexible design2016-2017 BindingX2018?对齐iOS体验解决适配问题通用交互领域模型缘起BindingXGesture Transform Lottie SVG缘起?浏览器中的图形学webkitskiaOpen GL(ES)canvasshader设计稿中的图形学图像处理类渲染类前端与图形学图形学应用场景图形学基础设施Imagepatternphotoshape来自设计稿的图形云雾云雾noise(st)fbm(st)fbm(st)photoshop来
2、自数学的图形几何图形几何图形来自数学的图形分形Julia SetJulia Set-0.8+0.156i-0.4+0.6i-0.7269+0.1889i来自数学的图形分形来自物理的图形光的衍射/http:/ t iTime#define r iResolution.xyvoid mainImage(out vec4 fragColor,in vec2 fragCoord)vec3 c;float l,z=t;for(int i=0;i1;i+)vec2 uv,p=fragCoord.xy/r;uv=p;p-=.5;p.x*=r.x/r.y;z+=.07;l=length(p);uv+=p/l*
3、(sin(z)+1.)*abs(sin(l*9.-z*2.);ci=.01/length(abs(mod(uv,1.)-.5);fragColor=vec4(c/l,t);相变rgbhsvR=R/255G=G/255B=B/255Cmax=max(R,G,B)Cmin=min(R,G,B)=Cmax-CminrgbV=CmaxC=V SX=C (1-|(H/60)mod 2-1|)m=V-C(R,G,B)=(R+m)255,(G+m)255,(B+m)255)绿幕3D图形threejs&babylonjs前端与图形学图形学基础设施图形学应用场景基础设施GCanvasOpenGL ESWebGL
4、Canvas 2DwebviewweexReactNative基础设施GCanvasOpenGL ESGCanvas Core(C+)Android TextureViewiOS GLKViewJS bridge(JS)command queueJS Runtime:JSC/V8command queueOpenGL Thread基础设施GCanvasdrawcommandbridgeJSCCommandQueueGCanvasManagerGCanvas2D PipelineWebGL BypassFrameBufferOpenGLRender ThreadSurfaceTexture ViewGLK View基础设施G3D底层交互插件WebGL物料管理着色器数据块纹理场景树节点变换状态机管理点选拖拽顶点变形基础功能相机几何体基本材质冯氏材质PBR材质点光源平行光源obj 格式stl 格式字体GLTF