| 两侧同时换到之前的修订记录
前一修订版
后一修订版
|
前一修订版
|
en:stpc-exxx-c [2026/11/14 02:31]
wjj 图库图注改为「视角名 · 特征」 |
en:stpc-exxx-c [2026/11/14 03:52] (当前版本)
wjj 3D 透视配色与透明度终值：蓝灰鬼影 + 内部零件加重 |
| <div class="sml-gallery"> | <div class="sml-gallery"> |
| <div class="sml-g-head"><div><div class="sml-g-kicker">PRODUCT GALLERY / Product Gallery</div><div class="sml-g-title">sTPC-EXXX-C Series · Unit Appearance</div></div><div class="sml-g-note">Using the E156 model as an example · Click a view on the right to switch</div></div> | <div class="sml-g-head"><div><div class="sml-g-kicker">PRODUCT GALLERY / Product Gallery</div><div class="sml-g-title">sTPC-EXXX-C Series · Unit Appearance</div></div><div class="sml-g-note">Using the E156 model as an example · Click a view on the right to switch</div></div> |
| <div class="sml-g-body"><div class="sml-g-stage"><img id="sml-g-main" class="sml-g-main" src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front_v.jpg" alt="Front View · Multi-Point Capacitive Touch Screen"><div class="sml-g-badge">INDUSTRIAL PANEL PC</div><a id="sml-g-zoom" class="sml-g-zoom" href="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front.jpg" target="_blank" rel="noopener">View Full-Resolution Image ↗</a><div class="sml-3d" id="sml-3d"></div><div class="sml-g-cap" id="sml-g-cap">Front View · Multi-Point Capacitive Touch Screen</div><div class="sml-g-count" id="sml-g-count">01 / 05</div></div><div class="sml-g-side"><div class="sml-g-side-hd">Unit Views / 05 VIEWS</div><button type="button" class="sml-g-thumb on" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front.jpg" data-idx="01" data-cap="Front View · Capacitive Touch Panel"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_01.jpg" alt="Front View"></span><span class="sml-g-tx"><b>SLC</b>Front View</span></button><button type="button" class="sml-g-thumb" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_persp_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_persp.jpg" data-idx="02" data-cap="Perspective View · Main Module"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_02.jpg" alt="Perspective View"></span><span class="sml-g-tx"><b>SLC</b>Perspective View</span></button><button type="button" class="sml-g-thumb" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_back_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_back.jpg" data-idx="03" data-cap="Rear View · Mounting Back Plate"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_03.jpg" alt="Rear View"></span><span class="sml-g-tx"><b>SLC</b>Rear View</span></button><button type="button" class="sml-g-thumb" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_io_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_io.jpg" data-idx="04" data-cap="Interface View · Power and Network"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_04.jpg" alt="Interface View"></span><span class="sml-g-tx"><b>SLC</b>Interface View</span></button> | <div class="sml-g-body"><div class="sml-g-stage"><img id="sml-g-main" class="sml-g-main" src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front_v.jpg" alt="Front View · Multi-Point Capacitive Touch Screen"><div class="sml-g-badge">INDUSTRIAL PANEL PC</div><a id="sml-g-zoom" class="sml-g-zoom" href="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front.jpg" target="_blank" rel="noopener">View Full-Resolution Image ↗</a><div class="sml-3d" id="sml-3d"></div><div class="sml-g-cap" id="sml-g-cap">Front View · Capacitive Touch Panel</div><div class="sml-g-count" id="sml-g-count">01 / 05</div></div><div class="sml-g-side"><div class="sml-g-side-hd">Unit Views / 05 VIEWS</div><button type="button" class="sml-g-thumb on" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_front.jpg" data-idx="01" data-cap="Front View · Capacitive Touch Panel"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_01.jpg" alt="Front View"></span><span class="sml-g-tx"><b>SLC</b>Front View</span></button><button type="button" class="sml-g-thumb" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_persp_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_persp.jpg" data-idx="02" data-cap="Perspective View · Main Module"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_02.jpg" alt="Perspective View"></span><span class="sml-g-tx"><b>SLC</b>Perspective View</span></button><button type="button" class="sml-g-thumb" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_back_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_back.jpg" data-idx="03" data-cap="Rear View · Mounting Back Plate"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_03.jpg" alt="Rear View"></span><span class="sml-g-tx"><b>SLC</b>Rear View</span></button><button type="button" class="sml-g-thumb" data-view="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_io_v.jpg" data-full="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_io.jpg" data-idx="04" data-cap="Interface View · Power and Network"><span class="sml-g-tn"><img src="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_thumb_04.jpg" alt="Interface View"></span><span class="sml-g-tx"><b>SLC</b>Interface View</span></button> |
| <button type="button" class="sml-g-thumb" data-3d="1" data-idx="05" data-zip="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_3d.zip" data-lang="en" data-size="about 3.4 MB" data-rear="0" data-parts="[["后壳","Rear Shell","#c9d1da",1.25,-1],["前框","Front Bezel","#b8c2cd",1.55,1],["显示模组","Display Module","#0b1015",1.0,1],["角部盖板","Corner Plate","#8e99a6",1.7,1],["触摸屏","Touch Panel","#151d26",1.8,1],["前视窗玻璃","Front Glass","#0a0d11",1.95,1],["主板组件","Main Board","#2f6f59",0.7,-1],["连接器","Connector","#a45a52",0.35,-1],["接口座","I/O Socket","#a45a52",0.4,-1],["接口板","I/O Board","#2f6f59",0.5,-1],["屏蔽板","Shield Plate","#a8b3bd",0.5,-1],["按键座","Button Seat","#a45a52",0.35,-1],["导光件","Light Guide","#c9a227",0.3,-1],["紧固件","Fastener","#9aa4b0",0.2,-1],["显示面板","Display Panel","#0a0e12",2.0,1]]" data-cap="3D Teardown · Part Structure"><span class="sml-g-tn"><svg viewBox="0 0 44 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none" stroke="#0b5394" stroke-width="1.3" stroke-linejoin="round"><path d="M12 8 L22 3 L32 8 L22 13 Z"/><path d="M12 8 L12 20 L22 25 L22 13"/><path d="M32 8 L32 20 L22 25"/><path d="M17 5.5 L27 10.5" stroke="#8fb2d6" stroke-width="1"/></g></svg></span><span class="sml-g-tx"><b>SLC</b>3D Teardown</span></button></div></div> | <button type="button" class="sml-g-thumb" data-3d="1" data-idx="05" data-zip="/dokuwiki/lib/exe/fetch.php?media=wiki:stpc_e156c_3d.zip" data-lang="en" data-size="about 3.4 MB" data-rear="0" data-parts="[["后壳","Rear Shell","#eef2f5",1.25,-1],["前框","Front Bezel","#e6ebef",1.55,1],["显示模组","Display Module","#0b1015",1.0,1],["角部盖板","Corner Plate","#e2e8ed",1.7,1],["触摸屏","Touch Panel","#151d26",1.8,1],["前视窗玻璃","Front Glass","#0a0d11",1.95,1],["主板组件","Main Board","#2f6f59",0.7,-1],["连接器","Connector","#a45a52",0.35,-1],["接口座","I/O Socket","#a45a52",0.4,-1],["接口板","I/O Board","#2f6f59",0.5,-1],["屏蔽板","Shield Plate","#dfe5ea",0.5,-1],["按键座","Button Seat","#a45a52",0.35,-1],["导光件","Light Guide","#c9a227",0.3,-1],["紧固件","Fastener","#9aa4b0",0.2,-1],["显示面板","Display Panel","#0a0e12",2.0,1]]" data-cap="3D Teardown · Part Structure"><span class="sml-g-tn"><svg viewBox="0 0 44 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g fill="none" stroke="#0b5394" stroke-width="1.3" stroke-linejoin="round"><path d="M12 8 L22 3 L32 8 L22 13 Z"/><path d="M12 8 L12 20 L22 25 L22 13"/><path d="M32 8 L32 20 L22 25"/><path d="M17 5.5 L27 10.5" stroke="#8fb2d6" stroke-width="1"/></g></svg></span><span class="sml-g-tx"><b>SLC</b>3D Teardown</span></button></div></div> |
| <div class="sml-g-specs"><div class="sml-g-spec"><b>RK3568 / 3576 / 3588</b><em>Three Platforms · up to 6 TOPS NPU</em></div><div class="sml-g-spec"><b>10.1″–21.5″</b><em>Six Sizes · Capacitive Touch</em></div><div class="sml-g-spec"><b>Fanless Fully Sealed</b><em>VESA / Embedded Mounting</em></div><div class="sml-g-spec"><b>Wide-Range Power</b><em>DC 12~24V ±10%</em></div></div> | <div class="sml-g-specs"><div class="sml-g-spec"><b>RK3568 / 3576 / 3588</b><em>Three Platforms · up to 6 TOPS NPU</em></div><div class="sml-g-spec"><b>10.1″–21.5″</b><em>Six Sizes · Capacitive Touch</em></div><div class="sml-g-spec"><b>Fanless Fully Sealed</b><em>VESA / Embedded Mounting</em></div><div class="sml-g-spec"><b>Wide-Range Power</b><em>DC 12~24V ±10%</em></div></div> |
| <div class="sml-g-apps"><span class="t">Typical Applications</span><span class="chip">Production Line Dashboard</span><span class="chip">Equipment HMI</span><span class="chip">Self-Service Query Terminal</span><span>Long-Term Stable Operation in Industrial Sites</span></div> | <div class="sml-g-apps"><span class="t">Typical Applications</span><span class="chip">Production Line Dashboard</span><span class="chip">Equipment HMI</span><span class="chip">Self-Service Query Terminal</span><span>Long-Term Stable Operation in Industrial Sites</span></div> |
| var VS=['#version 300 es','in vec3 aP;in vec3 aN;uniform mat4 uP,uV;uniform vec3 uO;out vec3 vP;out vec3 vN;', | var VS=['#version 300 es','in vec3 aP;in vec3 aN;uniform mat4 uP,uV;uniform vec3 uO;out vec3 vP;out vec3 vN;', |
| 'void main(){vec3 p=aP+uO;vP=p;vN=aN;gl_Position=uP*uV*vec4(p,1.0);}'].join('\n'); | 'void main(){vec3 p=aP+uO;vP=p;vN=aN;gl_Position=uP*uV*vec4(p,1.0);}'].join('\n'); |
| var FS=['#version 300 es','precision highp float;in vec3 vP;in vec3 vN;uniform vec3 uC,uE;uniform float uS,uD,uX;out vec4 f;', | var FS=['#version 300 es','precision highp float;in vec3 vP;in vec3 vN;uniform vec3 uC,uE;uniform float uS,uD,uX,uA;uniform mat4 uV;out vec4 f;', |
| 'void main(){vec3 N=normalize(vN),V=normalize(uE-vP);if(dot(N,V)<0.0)N=-N;', | 'void main(){vec3 N=normalize(vN),V=normalize(uE-vP);if(dot(N,V)<0.0)N=-N;', |
| 'vec3 L1=normalize(vec3(-0.45,0.72,0.62)),L2=normalize(vec3(0.72,-0.28,0.44));', | 'mat3 R=mat3(uV);vec3 Nv=normalize(R*N),Vv=normalize(R*V);vec3 L1=normalize(vec3(-0.42,0.58,0.70)),L2=normalize(vec3(0.60,-0.30,0.74));', |
| 'float k1=max(dot(N,L1),0.0),k2=max(dot(N,L2),0.0);vec3 H=normalize(L1+V);', | 'float k1=max(dot(Nv,L1),0.0),k2=max(dot(Nv,L2),0.0);vec3 H=normalize(L1+Vv);', |
| 'float sp=pow(max(dot(N,H),0.0),46.0)*0.30;float rm=pow(1.0-max(dot(N,V),0.0),3.0)*0.20;', | 'float sp=pow(max(dot(Nv,H),0.0),46.0)*0.30;float rm=pow(1.0-max(dot(Nv,Vv),0.0),3.0)*0.20;', |
| 'vec3 c=uC*(0.40+0.66*k1+0.24*k2)+vec3(sp)+vec3(rm)*0.55;', | 'vec3 c=uC*(0.34+0.52*k1+0.20*k2)+vec3(sp)+vec3(rm)*0.55;', |
| 'if(uS>0.5)c=mix(c,vec3(0.12,0.40,0.85),0.34);if(uD>0.5)c=mix(c,vec3(0.72,0.76,0.81),0.62);', | 'if(uS>0.5)c=mix(c,vec3(0.12,0.40,0.85),0.34);if(uX>0.5)c=mix(c,vec3(0.40,0.48,0.58),0.55);else if(uD>0.5)c=mix(c,vec3(0.72,0.76,0.81),0.62);', |
| 'float a=1.0-0.62*uX;if(uD>0.5)a*=0.40;f=vec4(c,a);}'].join('\n'); | 'float a=1.0;if(uD>0.5)a*=mix(0.40,1.0,uX);f=vec4(c,a*uA);}'].join('\n'); |
| function sh(t,s){var o=gl.createShader(t);gl.shaderSource(o,s);gl.compileShader(o); | function sh(t,s){var o=gl.createShader(t);gl.shaderSource(o,s);gl.compileShader(o); |
| if(!gl.getShaderParameter(o,gl.COMPILE_STATUS))throw new Error(gl.getShaderInfoLog(o));return o;} | if(!gl.getShaderParameter(o,gl.COMPILE_STATUS))throw new Error(gl.getShaderInfoLog(o));return o;} |
| gl.attachShader(pr,sh(gl.VERTEX_SHADER,VS));gl.attachShader(pr,sh(gl.FRAGMENT_SHADER,FS)); | gl.attachShader(pr,sh(gl.VERTEX_SHADER,VS));gl.attachShader(pr,sh(gl.FRAGMENT_SHADER,FS)); |
| gl.bindAttribLocation(pr,0,'aP');gl.bindAttribLocation(pr,1,'aN');gl.linkProgram(pr);gl.useProgram(pr); | gl.bindAttribLocation(pr,0,'aP');gl.bindAttribLocation(pr,1,'aN');gl.linkProgram(pr);gl.useProgram(pr); |
| var U={};['uP','uV','uO','uC','uE','uS','uD','uX'].forEach(function(n){U[n]=gl.getUniformLocation(pr,n);}); | var U={};['uP','uV','uO','uC','uE','uS','uD','uX','uA'].forEach(function(n){U[n]=gl.getUniformLocation(pr,n);}); |
| |
| var cam={th:0.60,ph:0.19,dist:3,tgt:[0,0,0],fov:34*Math.PI/180}; | var cam={th:0.60,ph:0.19,dist:3,tgt:[0,0,0],fov:34*Math.PI/180}; |
| gl.viewport(0,0,cv.width,cv.height); | gl.viewport(0,0,cv.width,cv.height); |
| gl.clearColor(0,0,0,0);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); | gl.clearColor(0,0,0,0);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); |
| gl.enable(gl.DEPTH_TEST);gl.disable(gl.CULL_FACE);gl.enable(gl.BLEND); | if(xray){gl.disable(gl.DEPTH_TEST);}else{gl.enable(gl.DEPTH_TEST);}gl.disable(gl.CULL_FACE);gl.enable(gl.BLEND); |
| gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA); | gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA); |
| var e=eye(); | var e=eye(); |
| gl.uniform3fv(U.uO,off(p)); | gl.uniform3fv(U.uO,off(p)); |
| gl.uniform1f(U.uS,p.pi===sel?1:0); | gl.uniform1f(U.uS,p.pi===sel?1:0); |
| gl.uniform1f(U.uD,(any&&p.pi!==sel)||xray?1:0); | gl.uniform1f(U.uD,(any&&p.pi!==sel)?1:0); |
| | gl.uniform1f(U.uA, xray ? (p.pi===sel ? 1.0 : (Math.max(p.size[0],p.size[1],p.size[2])>0.075?0.20:0.62)) : 1.0); |
| gl.uniform1f(U.uX,xray&&p.pi!==sel?1:0); | gl.uniform1f(U.uX,xray&&p.pi!==sel?1:0); |
| gl.drawElements(gl.TRIANGLES,p.count,gl.UNSIGNED_INT,p.start*4); | gl.drawElements(gl.TRIANGLES,p.count,gl.UNSIGNED_INT,p.start*4); |
