GMTC2018 《前端中的图形技术》程劭非

2020-02-27 156浏览

1.前端与图形学 winter 阿里巴巴高级技术专家
2.
3.
4.• 前端与图形学 • 图形学应用场景 • 图形学基础设施
5.缘起 • 2011 gesture animation scroll • 2013 flexible design • 2016- 2017 BindingX • 2018 ？ • 对齐iOS体验 • 解决适配问题 • 通用交互领域模型
6.缘起 BindingX Gesture Transform Lottie SVG ……
7.缘起？
8.浏览器中的图形学 webkit skia Open GL (ES) canvas shader
9.设计稿中的图形学图像处理类渲染类
10.• 前端与图形学 • 图形学应用场景 • 图形学基础设施
11.Image pattern photo shape
12.来自设计稿的图形——云雾
13.云雾 noise (st) fbm (st)
14.fbm (st) photoshop
15.来自数学的图形——几何图形 • 几何图形
16.来自数学的图形——分形
17.Julia Set
18.Julia Set -0.4+0.6i -0.8+0.156i -0.7269+0.1889i
19.来自数学的图形——分形
20.来自物理的图形——光的衍射 //http://www.pouet.net/prod.php?which=57245#define t iTime #define r iResolution.xy void mainImage( out vec4 fragColor, in vec2 fragCoord ){ vec3 c; float l,z=t; for(int i=0;i<1;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*(sin(z)+1.)*abs(sin(l*9.-z*2.)); c[i]=.01/length(abs(mod(uv,1.)-.5)); } fragColor=vec4(c/l,t); }
21.相变 rgb hsv R' = R/255 G' = G/255 B' = B/255 Cmax = max(R', G', B') Cmin = min(R', G', B') Δ = Cmax - Cmin V = Cmax rgb C=V×S X = C × (1 - (H / 60°) mod 2 - 1 ) m=V-C (R,G,B) = ((R'+m)×255, (G'+m)×255, (B'+m)×255)
22.绿幕
23.3D图形 • threejs & babylonjs
24.• 前端与图形学 • 图形学应用场景 • 图形学基础设施
25.基础设施——GCanvas weex webview React Native Canvas 2D WebGL OpenGL ES
26.基础设施——GCanvas JS bridge（JS） JSRuntime:JSC/V8 command queue command queue OpenGL Thread Android TextureView iOS GLKView GCanvas Core（C++） OpenGL ES
27.基础设施——GCanvas draw command bridge OpenGL Render Thread Surface Texture View JSC GLK View Command Queue GCanvas Manager GCanvas 2D Pipeline WebGL Bypass Frame Buffer
28.基础设施——G3D 插件 obj 格式 stl 格式字体 GLTF …… 交互点选顶点变形拖拽基础功能相机几何体底层 WebGL物料管理着色器数据块纹理基本材质冯氏材质 PBR材质点光源平行光源场景树节点变换状态机管理
29.Q&Ahttps://alibaba.github.io/GCanvas/https://alibaba.github.io/G3D/
30.
31.
32.
33.https://www.shadertoy.com/https://thebookofshaders.com/https://jsplayground.taobao.org/

GMTC2018 《前端中的图形技术》 程劭非

GMTC2018 《前端中的图形技术》程劭非