I found out that do draw the shape as expected the coordinates should be ... getContext("webgl2", { antialias: false }); gl.viewport(0, 0, ...
Home
Public
Questions
Tags
Users
Companies
Collectives
ExploreCollectives
Teams
StackOverflowforTeams
–Startcollaboratingandsharingorganizationalknowledge.
CreateafreeTeam
WhyTeams?
Teams
CreatefreeTeam
Collectives™onStackOverflow
Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost.
LearnmoreaboutCollectives
Teams
Q&Aforwork
Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch.
LearnmoreaboutTeams
WebGLlinedrawingissue
AskQuestion
Asked
8monthsago
Modified
8monthsago
Viewed
63times
1
IamtryingtodrawsimpleshapesusingWebGLLINESmode.Thesearemyvertices:
...
vertices.push(
0.01,0.13,0.03,0.15,
0.03,0.15,0.09,0.15,
0.09,0.15,0.11,0.13,
0.11,0.13,0.11,0.03,
0.11,0.03,0.09,0.01,
0.09,0.01,0.03,0.01,
0.03,0.01,0.01,0.03,
0.01,0.03,0.01,0.13);
Thepictureshowstheresultwhichisfarfrommyexpectations:
screen
Itrieddifferentthingswithoutsuccess.Howtofixit?
Hereisaworkingexample(DPIshouldbe1):
varcanvas=document.getElementById("canvas");
vargl=canvas.getContext("webgl2",{antialias:false});
vardpi=window.devicePixelRatio||1;
gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
//vertexshader
varvertexShaderSource=`#version300es
invec2a_position;
voidmain(){
gl_Position=vec4(a_position,0,1);
}
`;
varvertexShader=gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader,vertexShaderSource);
gl.compileShader(vertexShader);
//fragmentshader
varfragmentShaderSource=`#version300es
precisionhighpfloat;
outvec4outColor;
voidmain(){
outColor=vec4(0,0,0,1);
}
`;
varfragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader,fragmentShaderSource);
gl.compileShader(fragmentShader);
//program
varprogram=gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
//vertices
varvertices=[];
vertices.push(
0.01,0.13,0.03,0.15,
0.03,0.15,0.09,0.15,
0.09,0.15,0.11,0.13,
0.11,0.13,0.11,0.03,
0.11,0.03,0.09,0.01,
0.09,0.01,0.03,0.01,
0.03,0.01,0.01,0.03,
0.01,0.03,0.01,0.13);
//positionattribute
varpositionLocation=gl.getAttribLocation(program,"a_position");
varpositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation,2,gl.FLOAT,false,0,0);
gl.drawArrays(gl.LINES,0,vertices.length/2);
Ifoundthatwhenanti-aliasingisturnedon,theshapeismoreacurratebutblurry.
webglwebgl2
Share
Follow
editedDec29,2021at21:14
MarcinPopławski
askedDec29,2021at13:04
MarcinPopławskiMarcinPopławski
1133bronzebadges
4
Sohowexactlyareyouprojectingthese?
– LJᛃ
Dec29,2021at15:02
Iaddedaworkingexample.
– MarcinPopławski
Dec29,2021at21:08
2
You'rejustgettingrounding.Yourcoordinatesgetmultipliedbytheviewportsizeandroundeddowntopixels.Ifyousettheviewportto(0,0,100,100),itlookscorrect.Andyourdpivalueisneverused.Right?
– TimRoberts
Dec29,2021at21:22
HaveImissedsomething?Iamtryingtodrawan11x15pxshape.WhenIsettheviewportto(0,0,100,100),theshapeisdownscaled.Bydpi=1Imeantsettingtheoperatingsystemscaleto100%.
– MarcinPopławski
Dec30,2021at14:41
Addacomment
|
1Answer
1
Sortedby:
Resettodefault
Highestscore(default)
Trending(recentvotescountmore)
Datemodified(newestfirst)
Datecreated(oldestfirst)
0
Ifoundoutthatdodrawtheshapeasexpectedthecoordinatesshouldbehalfpixel:
varcanvas=document.getElementById("canvas");
vargl=canvas.getContext("webgl2",{antialias:false});
gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
//vertexshader
varvertexShaderSource=`#version300es
invec2a_position;
voidmain(){
gl_Position=vec4(a_position,0,1);
}
`;
varvertexShader=gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader,vertexShaderSource);
gl.compileShader(vertexShader);
//fragmentshader
varfragmentShaderSource=`#version300es
precisionhighpfloat;
outvec4outColor;
voidmain(){
outColor=vec4(0,0,0,1);
}
`;
varfragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader,fragmentShaderSource);
gl.compileShader(fragmentShader);
//program
varprogram=gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
//vertices
varvertices=[];
vertices.push(
0.015,0.135,0.035,0.155,
0.035,0.155,0.095,0.155,
0.095,0.155,0.115,0.135,
0.115,0.135,0.115,0.035,
0.115,0.035,0.095,0.015,
0.095,0.015,0.035,0.015,
0.035,0.015,0.015,0.035,
0.015,0.035,0.015,0.135);
//positionattribute
varpositionLocation=gl.getAttribLocation(program,"a_position");
varpositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation,2,gl.FLOAT,false,0,0);
gl.drawArrays(gl.LINES,0,vertices.length/2);
Share
Follow
answeredJan2at8:14
MarcinPopławskiMarcinPopławski
1133bronzebadges
Addacomment
|
YourAnswer
ThanksforcontributingananswertoStackOverflow!Pleasebesuretoanswerthequestion.Providedetailsandshareyourresearch!Butavoid…Askingforhelp,clarification,orrespondingtootheranswers.Makingstatementsbasedonopinion;backthemupwithreferencesorpersonalexperience.Tolearnmore,seeourtipsonwritinggreatanswers.
Draftsaved
Draftdiscarded
Signuporlogin
SignupusingGoogle
SignupusingFacebook
SignupusingEmailandPassword
Submit
Postasaguest
Name
Email
Required,butnevershown
PostYourAnswer
Discard
Byclicking“PostYourAnswer”,youagreetoourtermsofservice,privacypolicyandcookiepolicy
Nottheansweryou'relookingfor?Browseotherquestionstaggedwebglwebgl2oraskyourownquestion.
TheOverflowBlog
Functionalprogrammingisanidealfitfordevelopingblockchains
Environmentson-demand(Ep.479)
FeaturedonMeta
AnnouncingtheStackOverflowStudentAmbassadorProgram
GoogleAnalytics4(GA4)upgrade
StagingGroundWorkflow:QuestionLifecycle
The[option]tagisbeingburninated
CollectivesUpdate:WSO2launches,andGoogleGosunsets
Related
4
WebGL:asyncoperations?
2
WebGL2--Howtostoreandretrieve3Dtexturedataneededby3Dgridofverticestocalculatenewvertexpositions
0
IsWebGLShaderCachingPossible?
2
webGLgl_Positionvaluesavingoutsideshaders
0
MakinghierarchicaltransformationinWebGL
1
DrawingmultipleelementsinWebgl
HotNetworkQuestions
Bookaboutspacefaringhumansthatcapturesomeformofalien/spirit(possiblynamed"angels")foundinspace
IsURLrewritingine-mailasoundsecuritypractice?
Wasone-thirdofPakistanfloodedinAugust2022?
WhydidthepilotsinTopGun:Maverickinvertatthecrestofthemountainbeforedescending?
SkyrimcharacterprogressandSteamFamilySharing
Isitbadpracticetohavea'superadmin'-sotheyeffectivelybypasssecuritychecksinyoursystem?
Whatisthepointofthelineonacheck?
WhendidthisglobalruleschangehappeninMathematica?Isthischangedocumented?
Simplegroup-likeobjectsinothercategories
Shortstoryaboutdiscoveringthatgeometryisinconsistent
Definition:Whatismeantby"bishoppair"inthiscontext?
Whywerehiraganaandkatakananevermergedintoonesystem?
DoesPSRRimprovewithmultipleLDOsinseries?
TheenigmaoftheSorNword
Thenumberofpolynomialsonafinitegroup
Istherealawagainstsigningacontracttodosomethingillegal?
Dopilotsneeddifferentlicenseforeachtypeofaircraft?
ErrormessageonplottingasolutioncurveforanODEsolvedwithDSolve
DelaycircuitusingCMOSinverters
WhydoweneedportswithIPv6?
Yetanothersequencewithlettersandaquestionmark
Howsafeanddurableiscommercialmeatpackagingwhenexposedtoalkalineandacidicmarinades?
Whatarethereasonssomethoughtscannotbesimplified,reducedtoasimplersetorphrases?
Intheelectrondoubleslitexperiment,whatisinterfering?
morehotquestions
Questionfeed
SubscribetoRSS
Questionfeed
TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader.
Yourprivacy
Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy.
Acceptallcookies
Customizesettings
