Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita454ffe

Browse files
authored
Merge pull request#7915 from lukeplowden/webgpu
Ported the stroke shader to WebGPU renderer
2 parentsce4b31e +468b638 commita454ffe

File tree

7 files changed

+469
-58
lines changed

7 files changed

+469
-58
lines changed

‎preview/index.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
constsketch=function(p){
2626
letfbo;
2727
letsh;
28+
letssh;
29+
2830
p.setup=asyncfunction(){
2931
awaitp.createCanvas(400,400,p.WEBGPU);
3032
sh=p.baseMaterialShader().modify({
@@ -37,18 +39,29 @@
3739
return result;
3840
}`,
3941
})
42+
ssh=p.baseStrokeShader().modify({
43+
uniforms:{
44+
'f32 time':()=>p.millis(),
45+
},
46+
'StrokeVertex getWorldInputs':`(inputs: StrokeVertex) {
47+
var result = inputs;
48+
result.position.y += 40.0 * sin(uniforms.time * 0.01);
49+
return result;
50+
}`,
51+
})
4052
};
4153

4254
p.draw=function(){
4355
constt=p.millis()*0.008;
4456
p.background(200);
45-
p.noStroke();
4657
p.shader(sh);
58+
p.strokeShader(ssh)
4759
p.ambientLight(50);
4860
p.directionalLight(100,100,100,0,1,-1);
4961
p.pointLight(155,155,155,0,-200,500);
5062
p.specularMaterial(255);
5163
p.shininess(300);
64+
p.stroke('white')
5265
for(const[i,c]of['red','lime','blue'].entries()){
5366
p.push();
5467
p.fill(c);
@@ -67,4 +80,4 @@
6780
</script>
6881
</body>
6982

70-
</html>
83+
</html>

‎src/core/p5.Renderer3D.js‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ import { RenderBuffer } from "../webgl/p5.RenderBuffer";
1616
import{Image}from"../image/p5.Image";
1717
import{Texture}from"../webgl/p5.Texture";
1818

19-
exportfunctiongetStrokeDefs(){
19+
exportfunctiongetStrokeDefs(shaderConstant){
2020
constSTROKE_CAP_ENUM={};
2121
constSTROKE_JOIN_ENUM={};
2222
letlineDefs="";
2323
constdefineStrokeCapEnum=function(key,val){
24-
lineDefs+=`#defineSTROKE_CAP_${key}${val}\n`;
24+
lineDefs+=shaderConstant(`STROKE_CAP_${key}`,`${val}`,'u32');
2525
STROKE_CAP_ENUM[constants[key]]=val;
2626
};
2727
constdefineStrokeJoinEnum=function(key,val){
28-
lineDefs+=`#defineSTROKE_JOIN_${key}${val}\n`;
28+
lineDefs+=shaderConstant(`STROKE_JOIN_${key}`,`${val}`,'u32');
2929
STROKE_JOIN_ENUM[constants[key]]=val;
3030
};
3131

@@ -41,7 +41,7 @@ export function getStrokeDefs() {
4141
return{STROKE_CAP_ENUM,STROKE_JOIN_ENUM, lineDefs};
4242
}
4343

44-
const{STROKE_CAP_ENUM,STROKE_JOIN_ENUM}=getStrokeDefs();
44+
const{STROKE_CAP_ENUM,STROKE_JOIN_ENUM}=getStrokeDefs(()=>"");
4545

4646
exportclassRenderer3DextendsRenderer{
4747
constructor(pInst,w,h,isMainCanvas,elt){
@@ -563,7 +563,6 @@ export class Renderer3D extends Renderer {
563563
}
564564

565565
_drawStrokes(geometry,{ count}={}){
566-
constgl=this.GL;
567566

568567
this._useLineColor=geometry.vertexStrokeColors.length>0;
569568

@@ -584,22 +583,7 @@ export class Renderer3D extends Renderer {
584583
geometry.hasStrokeTransparency()
585584
);
586585

587-
if(count===1){
588-
gl.drawArrays(gl.TRIANGLES,0,geometry.lineVertices.length/3);
589-
}else{
590-
try{
591-
gl.drawArraysInstanced(
592-
gl.TRIANGLES,
593-
0,
594-
geometry.lineVertices.length/3,
595-
count
596-
);
597-
}catch(e){
598-
console.log(
599-
"🌸 p5.js says: Instancing is only supported in WebGL2 mode"
600-
);
601-
}
602-
}
586+
this._drawBuffers(geometry,{count})
603587

604588
shader.unbindShader();
605589
}

‎src/webgl/p5.RendererGL.js‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import filterInvertFrag from "./shaders/filters/invert.frag";
3939
importfilterThresholdFragfrom"./shaders/filters/threshold.frag";
4040
importfilterShaderVertfrom"./shaders/filters/default.vert";
4141

42-
const{ lineDefs}=getStrokeDefs();
42+
const{ lineDefs}=getStrokeDefs((n,v)=>`#define${n}${v};\n`);
4343

4444
constdefaultShaders={
4545
normalVert,
@@ -276,7 +276,24 @@ class RendererGL extends Renderer3D {
276276

277277
if(!glBuffers)return;
278278

279-
if(glBuffers.indexBuffer){
279+
if(this._curShader.shaderType==='stroke'){
280+
if(count===1){
281+
gl.drawArrays(gl.TRIANGLES,0,geometry.lineVertices.length/3);
282+
}else{
283+
try{
284+
gl.drawArraysInstanced(
285+
gl.TRIANGLES,
286+
0,
287+
geometry.lineVertices.length/3,
288+
count
289+
);
290+
}catch(e){
291+
console.log(
292+
"🌸 p5.js says: Instancing is only supported in WebGL2 mode"
293+
);
294+
}
295+
}
296+
}elseif(glBuffers.indexBuffer){
280297
this._bindBuffer(glBuffers.indexBuffer,gl.ELEMENT_ARRAY_BUFFER);
281298

282299
// If this model is using a Uint32Array we need to ensure the
@@ -1157,7 +1174,7 @@ class RendererGL extends Renderer3D {
11571174

11581175
if(indices){
11591176
constbuffer=gl.createBuffer();
1160-
this.renderer._bindBuffer(buffer,gl.ELEMENT_ARRAY_BUFFER,indices,indexType);
1177+
this._bindBuffer(buffer,gl.ELEMENT_ARRAY_BUFFER,indices,indexType);
11611178

11621179
buffers.indexBuffer=buffer;
11631180

@@ -1478,9 +1495,9 @@ class RendererGL extends Renderer3D {
14781495
createTexture({ width, height, format, dataType}){
14791496
constgl=this.GL;
14801497
consttex=gl.createTexture();
1481-
this.gl.bindTexture(gl.TEXTURE_2D,tex);
1482-
this.gl.texImage2D(gl.TEXTURE_2D,0,this.gl.RGBA,width,height,0,
1483-
gl.RGBA,this.gl.UNSIGNED_BYTE,null);
1498+
gl.bindTexture(gl.TEXTURE_2D,tex);
1499+
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,width,height,0,
1500+
gl.RGBA,gl.UNSIGNED_BYTE,null);
14841501
// TODO use format and data type
14851502
return{texture:tex,glFormat:gl.RGBA,glDataType:gl.UNSIGNED_BYTE};
14861503
}
@@ -1659,7 +1676,7 @@ class RendererGL extends Renderer3D {
16591676
//////////////////////////////////////////////
16601677
// Shader hooks
16611678
//////////////////////////////////////////////
1662-
fillHooks(shader,src,shaderType){
1679+
populateHooks(shader,src,shaderType){
16631680
constmain='void main';
16641681
if(!src.includes(main))returnsrc;
16651682

‎src/webgl/p5.Shader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ class Shader {
123123
}
124124

125125
shaderSrc(src,shaderType){
126-
returnthis._renderer.fillHooks(this,src,shaderType);
126+
returnthis._renderer.populateHooks(this,src,shaderType);
127127
}
128128

129129
/**

‎src/webgl/shaders/line.vert‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ void main() {
271271
}
272272
}else {
273273
vec2 tangent= aTangentIn==vec3(0.)? tangentOut: tangentIn;
274+
274275
vTangent= tangent;
275276
vec2 normal=vec2(-tangent.y, tangent.x);
276277

‎src/webgpu/p5.RendererWebGPU.js‎

Lines changed: 63 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import{Renderer3D}from'../core/p5.Renderer3D';
1+
import{Renderer3D,getStrokeDefs}from'../core/p5.Renderer3D';
22
import{Shader}from'../webgl/p5.Shader';
33
import*asconstantsfrom'../core/constants';
4+
5+
46
import{colorVertexShader,colorFragmentShader}from'./shaders/color';
7+
import{lineVertexShader,lineFragmentShader}from'./shaders/line';
58
import{materialVertexShader,materialFragmentShader}from'./shaders/material';
69

10+
const{ lineDefs}=getStrokeDefs((n,v,t)=>`const${n}:${t} =${v};\n`);
11+
712
classRendererWebGPUextendsRenderer3D{
813
constructor(pInst,w,h,isMainCanvas,elt){
914
super(pInst,w,h,isMainCanvas,elt)
@@ -457,7 +462,6 @@ class RendererWebGPU extends Renderer3D {
457462
for(constattrNameinshader.attributes){
458463
constattr=shader.attributes[attrName];
459464
if(!attr||attr.location===-1)continue;
460-
461465
// Get the vertex buffer info associated with this attribute
462466
constrenderBuffer=
463467
this.buffers[shader.shaderType].find(buf=>buf.attr===attrName)||
@@ -481,7 +485,6 @@ class RendererWebGPU extends Renderer3D {
481485
],
482486
});
483487
}
484-
485488
returnlayouts;
486489
}
487490

@@ -516,7 +519,9 @@ class RendererWebGPU extends Renderer3D {
516519

517520
_useShader(shader,options){}
518521

519-
_updateViewport(){}
522+
_updateViewport(){
523+
this._viewport=[0,0,this.width,this.height];
524+
}
520525

521526
zClipRange(){
522527
return[0,1];
@@ -557,8 +562,9 @@ class RendererWebGPU extends Renderer3D {
557562
if(!buffers)return;
558563

559564
constcommandEncoder=this.device.createCommandEncoder();
565+
constcurrentTexture=this.drawingContext.getCurrentTexture();
560566
constcolorAttachment={
561-
view:this.drawingContext.getCurrentTexture().createView(),
567+
view:currentTexture.createView(),
562568
loadOp:"load",
563569
storeOp:"store",
564570
};
@@ -581,34 +587,33 @@ class RendererWebGPU extends Renderer3D {
581587
};
582588

583589
constpassEncoder=commandEncoder.beginRenderPass(renderPassDescriptor);
584-
passEncoder.setPipeline(this._curShader.getPipeline(this._shaderOptions({ mode})));
585-
590+
constcurrentShader=this._curShader;
591+
passEncoder.setPipeline(currentShader.getPipeline(this._shaderOptions({ mode})));
586592
// Bind vertex buffers
587-
for(constbufferofthis._getVertexBuffers(this._curShader)){
593+
for(constbufferofthis._getVertexBuffers(currentShader)){
588594
passEncoder.setVertexBuffer(
589-
this._curShader.attributes[buffer.attr].location,
595+
currentShader.attributes[buffer.attr].location,
590596
buffers[buffer.dst],
591597
0
592598
);
593599
}
594-
595600
// Bind uniforms
596601
this._packUniforms(this._curShader);
597602
this.device.queue.writeBuffer(
598-
this._curShader._uniformBuffer,
603+
currentShader._uniformBuffer,
599604
0,
600-
this._curShader._uniformData.buffer,
601-
this._curShader._uniformData.byteOffset,
602-
this._curShader._uniformData.byteLength
605+
currentShader._uniformData.buffer,
606+
currentShader._uniformData.byteOffset,
607+
currentShader._uniformData.byteLength
603608
);
604609

605610
// Bind sampler/texture uniforms
606-
for(const[group,entries]ofthis._curShader._groupEntries){
611+
for(const[group,entries]ofcurrentShader._groupEntries){
607612
constbgEntries=entries.map(entry=>{
608613
if(group===0&&entry.binding===0){
609614
return{
610615
binding:0,
611-
resource:{buffer:this._curShader._uniformBuffer},
616+
resource:{buffer:currentShader._uniformBuffer},
612617
};
613618
}
614619

@@ -620,22 +625,27 @@ class RendererWebGPU extends Renderer3D {
620625
};
621626
});
622627

623-
constlayout=this._curShader._bindGroupLayouts[group];
628+
constlayout=currentShader._bindGroupLayouts[group];
624629
constbindGroup=this.device.createBindGroup({
625630
layout,
626631
entries:bgEntries,
627632
});
628-
629633
passEncoder.setBindGroup(group,bindGroup);
630634
}
631635

632-
// Bind index buffer and issue draw
633-
if(buffers.indexBuffer){
634-
constindexFormat=buffers.indexFormat||"uint16";
635-
passEncoder.setIndexBuffer(buffers.indexBuffer,indexFormat);
636-
passEncoder.drawIndexed(geometry.faces.length*3,count,0,0,0);
637-
}else{
638-
passEncoder.draw(geometry.vertices.length,count,0,0);
636+
if(currentShader.shaderType==="fill"){
637+
// Bind index buffer and issue draw
638+
if(buffers.indexBuffer){
639+
constindexFormat=buffers.indexFormat||"uint16";
640+
passEncoder.setIndexBuffer(buffers.indexBuffer,indexFormat);
641+
passEncoder.drawIndexed(geometry.faces.length*3,count,0,0,0);
642+
}else{
643+
passEncoder.draw(geometry.vertices.length,count,0,0);
644+
}
645+
}
646+
647+
if(buffers.lineVerticesBuffer&&currentShader.shaderType==="stroke"){
648+
passEncoder.draw(geometry.lineVertices.length/3,count,0,0);
639649
}
640650

641651
passEncoder.end();
@@ -788,7 +798,6 @@ class RendererWebGPU extends Renderer3D {
788798
}
789799
conststructType=uniformVarMatch[2];
790800
constuniforms=this._parseStruct(shader.vertSrc(),structType);
791-
792801
// Extract samplers from group bindings
793802
constsamplers=[];
794803
constsamplerRegex=/@group\((\d+)\)\s*@binding\((\d+)\)\s*var\s+(\w+)\s*:\s*(\w+);/g;
@@ -941,6 +950,33 @@ class RendererWebGPU extends Renderer3D {
941950
returnthis._defaultColorShader;
942951
}
943952

953+
_getLineShader(){
954+
if(!this._defaultLineShader){
955+
this._defaultLineShader=newShader(
956+
this,
957+
lineDefs+lineVertexShader,
958+
lineDefs+lineFragmentShader,
959+
{
960+
vertex:{
961+
"void beforeVertex":"() {}",
962+
"StrokeVertex getObjectInputs":"(inputs: StrokeVertex) { return inputs; }",
963+
"StrokeVertex getWorldInputs":"(inputs: StrokeVertex) { return inputs; }",
964+
"StrokeVertex getCameraInputs":"(inputs: StrokeVertex) { return inputs; }",
965+
"void afterVertex":"() {}",
966+
},
967+
fragment:{
968+
"void beforeFragment":"() {}",
969+
"Inputs getPixelInputs":"(inputs: Inputs) { return inputs; }",
970+
"vec4<f32> getFinalColor":"(color: vec4<f32>) { return color; }",
971+
"bool shouldDiscard":"(outside: bool) { return outside; };",
972+
"void afterFragment":"() {}",
973+
},
974+
}
975+
);
976+
}
977+
returnthis._defaultLineShader;
978+
}
979+
944980
//////////////////////////////////////////////
945981
// Setting
946982
//////////////////////////////////////////////
@@ -956,7 +992,7 @@ class RendererWebGPU extends Renderer3D {
956992
//////////////////////////////////////////////
957993
// Shader hooks
958994
//////////////////////////////////////////////
959-
fillHooks(shader,src,shaderType){
995+
populateHooks(shader,src,shaderType){
960996
if(!src.includes('fn main'))returnsrc;
961997

962998
// Apply some p5-specific preprocessing. WGSL doesn't have preprocessor

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp